角度：何时在模块和控制器中使用“ []”

Question

I'm starting in Angular and i don't understand when to use or not [] when declaring (if it's called like this) modules and controllers.

So far, i understood that :

angular.module('app.prof', []).config(config); means i declare the module prof

while angular.module('app.prof').config(config); means i call it.

But i always end up having the [] in the controller and not in the module, and when i have two controllers i don't know what to do anymore.

I just want to understand Angular :(

Edit : adding more details

In my Angular project, i use the Fuse theme with a thing called Yeoman (if i understood well) so i never write <script> tags anywhere myself.

for example, i have this module :

    angular
    .module('app.prof')
    .config(config);

and this controller :

    angular
    .module('app.prof', [])
    .controller('ProfController', ProfController);

My modules and controllers are always declared this way, but sometimes i get errors like "module is not declared" or "controller is not declared"; making me end up randomly putting brackets in the modules or controllers until it works.

EDIT 2 :

here is my main module :

angular
    .module('fuse', ['app.prof']);

my prof module :

    angular
    .module('app.prof')
    .config(config);

and my prof controller :

    angular
    .module('app.prof', [])
    .controller('ProfController', ProfController);

this way, the whole thing works fine. But when i do :

    angular
    .module('app.prof', [])
    .config(config);

and

    angular
    .module('app.prof')
    .controller('ProfController', ProfController);

i get :

Answer 1

The second argument are the dependencies for the module. Since you don't have any dependencies at the moment you have an empty array [] .

You add the brackets (dependencies) only when you create a new module. Every time when you simply want to use the same module you shouldn't have brackets. So in the end every module should be declared only once with the []. And every other time should be called without.

Also make sure that files and code is imported in the correct order. Otherwise the module is not yet defined when you try to add controllers to it.

Small example. App module with multiple controllers.

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

angular.module('app').controller('aCtrl', [ function () {} ]);
angular.module('app').controller('bCtrl', [ function () {} ]);

// ...

Long story short. If you declare a module, you need the brackets. If you want to use the module you don't add them.

---

Edit: For your edit, once again, you need to make sure that you define and use everything in correct order.

Following depends on app.prof which means that app.prof declaration needs to be before this row:

angular.module('fuse', ['app.prof']);

This already suggests that module app.prof is declared and you try to add config to it. When app.prof is not declared before you get a similar error as you displayed:

angular.module('app.prof')
    .config(config);

This declares the module app.prof and adds a controller to that module:

angular.module('app.prof', [])
    .controller('ProfController', ProfController);

This declares the app.prof module ands immediately adds some config to it:

angular.module('app.prof', [])
    .config(config);

This adds a controller to an existing module called app.prof :

angular.module('app.prof')
    .controller('ProfController', ProfController);

I think you get the idea...

As for a solution you need to declare these in an order similar to this... Doesn't matter if everything is in one file or you load them in file by file but the module declaration order is important.

angular.module('app.prof', [])
    .config(config);

angular.module('app.prof')
    .controller('ProfController', ProfController);

angular.module('fuse', ['app.prof']);

Controller declaration can probably happen later but anyway you need to pay attention to the ordering. As you said that fuse is the main module you need to declare the app.prof before.

Answer 2

In angular the "[]" is meant for injecting the external(angular) dependencies to you module and get access of it. refer the below example

angular.module('app.proof',['myservice']).controller(function(bootstrap,myservice){
 myservice.callmethod();});

Hope This helps!

Answer 3

So when you create a module, you can add other modules as dependencies to it that you're planning to use:

var app = angular.module('myModule', ['Restangular', 'UserService', 'otherModule']);

Then, when you create a controller, you can make services, factories, etc. available to the controller.

app.controller('MyNewController', ['$scope', '$http', 'restangular', function($scope, $http, restangular) {
    // Your code here
    $scope.name = "Daniel";
});

Answer 4

You can declare a Module like this:

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

Similarly, you can declare a Controller like this:

 angular.module('myModule')
    .controller('MyController', []);

When you declare the controller, you're not using the empty array notation in the module, because you're defining a controller on an already existing module.

The empty array ( [] ) that you pass into the module or controller is a placeholder for dependencies you want to inject into your module or controller. See: AngularJS Depedency Injection .

Every AngularJS project has a 'top-level' or root module. This is the module that bootstraps your application together when you use it in accordance with an ng-app directive.

In your top-level module(s), you declare your dependencies to the other modules in your application. For example:

angular.module('root', ['childModule1', 'childModule2', 'childModule3']);

In your controllers, you use dependency injection to inject services, functions, or AngularJS' built-in libraries (such as $http, $sce, or $q) For example:

angular.module('root')
    .controller('RootController', ['$window', '$location', 'myRootService']);