AngularJS Module

Question

I am new in AngularJS.I am learning AngularJS. I found below syntax.

var app = angular.module('myApp', ['ngRoute']);

Here is my question is What does it mean by [ ] this square bracket ??

What are functionalities/responsibilities of myApp and ngRoute ?? What are they doing here ??

Which options are available to use like ngRoute ??

I searched a lot in Google. I got several sample code. But could not get any explanation regarding all these things.

Thnanks

Answer 1

As per the angular module developer guide found here: https://docs.angularjs.org/guide/module

<div ng-app="myApp">
    <div>
        {{ 'World' | greet }}
    </div>
</div>


var myAppModule = angular.module('myApp', []);

• The reference to myApp module in <div ng-app="myApp"> . This is what bootstraps the app using your module.
• The empty array in angular.module('myApp', []) . This array is the list of modules myApp depends on.

---

I suggest you read the official documentation as well: https://docs.angularjs.org/api/ng/function/angular.module

Answer 2

Basically [ ] means the module list, your module depends on.

Suppose you write a angular module myApp that depends on ngRoute that is an another angular module.

The benefits of that you can inject lots of third party angular module that works on different different area. So you dont have to reinvent the wheel. By injecting ngRoute you can easily get the functionality of routing in your app.

I think the description I write helps you to understand clearly

Answer 3

In javascript, you can define a array like this:

var arr = [];

the [] here is the same as the [] around 'ngRoute', that means the second parameter of angular.module() method is a array.

you can define a module like this as well:

var app = angular.module('awesomeApp', ['ngRoute', 'ngAnimate', 'ngXXX']);

the first param 'awesomeApp' is the name of your module, the second param [ngRoute', 'ngAnimate', 'ngXXX'] is the dependencies of your module.

Here the dependency will provide some interfaces or features or functions or any stuff that will help you to make your module work as your expectation.

Answer 4

What you pass as the second arguments is the list of your dependencies.

In a basic app, is would be just an empty array.

var app = angular.module('myApp', []);

Basically it could be anything, from the 3rd party plugins that you download to other plugins that you yourself wrote to use. You can find plenty plugins here: http://ngmodules.org/

I'd suggest you to read the angular official documents .

Answer 5

This syntax defines a module.

var app = angular.module('myApp', ['ngRoute']);

myApp this is the name of the app, this is just a string.

[ngRoute] within the square brackets are the modules you'd like to inject (the notion of dependency injection). Some common ones you might have seen or will see include ui.bootstrap , restangular , ui.select etc.

Two things worth mentioning:

1. Please be careful to not mix it up with the module referencing syntax (without the square brackets):

Module definition

angular.module('myApp', []);

Module referencing

angular.module('myApp');

2. Usually, it's better practice to simply write the module definition out instead of assigning it to a variable, as in

Module definition

angular.module('myApp', []);

instead of

var app = angular.module('myApp', ['ngRoute']);

You can have a look at Papa John's style guide for more information.

https://github.com/johnpapa/angular-styleguide

Hope this helps. :)