Angular JS - module.controller parameters [duplicate]

Question

I'm new to Angular JS and in a tutorial they place that the way to create a controller is:

angular.module('app', [])
  .controller('TodoController', ['$scope', function ($scope) {
    $scope.todos = [
      { title: 'Learn Javascript', completed: true },
      { title: 'Learn Angular.js', completed: false },
      { title: 'Love this tutorial', completed: true },
      { title: 'Learn Javascript design patterns', completed: false },
      { title: 'Build Node.js backend', completed: false },
    ];
  }]);

I want to UNDERSTAND what does each of the parameters is:

'TodoController'
array
- '$scope'
- function

I guess the first one is the name of the controller, and the last one is the TodoController constructor.

But what is '$scope' ? A variable name to use on the HTML, a method name?

Can I send more parameters in the array?

I searched on Angular docs but it is pretty lame with no doc about methods. Searching class code neither gave much more info.

i recomend to do the tutorial from codeschool.com/pages/angularjs-vs-angular where they are describing all concepts. — Jesus Carrasco
– Jesus Carrasco, Commented Jul 27, 2017 at 17:36

Koushik Chatterjee · Accepted Answer · 2017-07-27 17:37:29Z

2

In the array the arguments (String) are (excluding the last, yes that's the constructor) the dependencies that need to be injected in the sequence you have in your array, those will be passed in the same order in the implementation of the controller (i.e. the constructor).

$scope is a object, that maintains the binding with the view, and its contents are available both in view and controller. Its is getting created by the $new method of the ($rootScope and then the hierarchy) whenever you are injecting it in a new controller and instance of that controller is need to be created.

answered Jul 27, 2017 at 17:37

Koushik Chatterjee

4,1933 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kkalamarski · Accepted Answer · 2017-07-27 17:45:39Z

1

The second argument (Array of strings + function) is used for dependency injection.

angular.controller('TodoController', ['$scope', function ($scope) { ... }])

In case your code gets minified angular will know which dependencies to inject, as strings are not affected by minification.

So, the above code after minification will become something like this:

angular.controller("TodoController",["$scope",function(o){...}]);

And it will still be readable by angular's dependency injection algorithm.

PS. Array is optional, you can pass there just plain function.

answered Jul 27, 2017 at 17:45

kkalamarski

1346 bronze badges

Comments

Ashish · Accepted Answer · 2017-07-27 17:45:08Z

1

Yes. You are right.

First parameter is controller name. The second one array where last element in array will be controller function and other elements are dependencies. This is called Inline Array Annotation.

You can create the controller without passing array unless you are not minifying your code(Implicit annotation.)

Careful: If you plan to minify your code, your service names will get renamed and break your app.

Please check three ways of creating controllers or services. https://docs.angularjs.org/guide/di

answered Jul 27, 2017 at 17:45

Ashish

1,1218 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular JS - module.controller parameters [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related