AngularJS: Different approach to declare controller with injection

Question

i have seen few approach to declare controller in angular.

QS 1

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

function MyCtrl($scope) {
    angular.element(document).ready(function () {
        document.getElementById('msg').innerHTML = 'Hello';
    });
}

in the above code no where it is specified that MyCtrl is a part of module name MyApp. do we need to add controller to MyApp module ? or it will be added automatically to MyApp module ?

QS 2

var app;

(function () {
    app = angular.module("TestApp", []);
})();

app.controller('TestController', ["$scope", function ($scope) {
    $scope.TestAngularMethod = function () {
        alert('Hello you are calling angular js method.');
    }
}]);

i have seen some people use [] to inject dependency like ["$scope" but some people do not use 3rd bracket to inject dependency.

see this ["$scope" does it carry any special meaning ?

because in function we always specify dependency name like this way function ($scope)

so tell me when 3rd bracket we need to use to inject dependency?

or is it any syntactic sugar or personal preference ?

code taken from http://dotnet-concept.com/Tips/2015/6/5798829/How-to-call-angularJS-function-from-javascript-jquery

learning angular. so encounter various different code and that is why trying to understand. help would be appreciated. thanks

EDIT

i saw this post on the same topic https://stackoverflow.com/a/17954031/508127

they are saying if we declare controller like below one and if we minify then problem may occur but do not discuss why problem will occur.

function MyCtrl($scope) {
    angular.element(document).ready(function () {
        document.getElementById('msg').innerHTML = 'Hello';
    });
}

anyone can shade some light on it. thanks

Zaslam · Accepted Answer · 2016-04-05 19:35:32Z

3

See this detailed style guide that explains best practices and different patterns. It will clear out the confusions.

See this dependency inject section, which is relevant to your question

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#manual-annotating-for-dependency-injection

answered Apr 5, 2016 at 19:35

Zaslam

3541 gold badge3 silver badges9 bronze badges

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

Comments

Aman Gupta · Accepted Answer · 2016-04-05 19:27:13Z

1

QS1 : Yes, you need to subscribe the controller like this,

app.controller('SomeName', MyCtrl);

QS2: On minifying(Minification Engine reduces variable names to short hand notation but does not change strings), the minification engine reduces variable name to a short name. For example, $scope will be shortened to s etc. If you keep $scope in ["$scope", as $scope is now placed inside "" which make it as a string instead of a variable name and hence is not converted to short name like above and angular knows what "s" means when file is minified.

answered Apr 5, 2016 at 19:27

Aman Gupta

3,8174 gold badges47 silver badges67 bronze badges

Comments

Renan Ferreira · Accepted Answer · 2016-04-05 19:36:17Z

1

I always recommend John Papa Style Guide. It says that you should use the controller as syntax:

<div ng-controller="UserController as userVm">
    {{userVm.***}}
</div>

and declare it as:

angular.module('app', [])
    .controller('UserController', userController);

userController.$inject = [**DEPENDENCIES**];
function userController(**DEPENDENCIES**){
    var vm = this;
}

Note that it is using a ViewModel pattern. You should really read the guide.

The userController.$inject = [**DEPENDENCIES**] is similar to the ['**DEPENDENCIES**'... syntax, and it is used to prevent error after minification (as stated by Aman).

answered Apr 5, 2016 at 19:36

Renan Ferreira

2,1603 gold badges21 silver badges31 bronze badges

Comments

Coding Duchess · Accepted Answer · 2016-04-05 19:28:46Z

0

For Q1 you should do something like this:

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

app.controller("MyBaseCtrl", [MyCtrl]);

function MyCtrl($scope) {
    angular.element(document).ready(function () {
    document.getElementById('msg').innerHTML = 'Hello';
 });

}

or

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

angular.module('MyApp').controller('MyCtrl', function (){
    angular.element(document).ready(function () {
        document.getElementById('msg').innerHTML = 'Hello';

});

As for Q2, there is an ending bracket:

app.controller('TestController', ["$scope", function ($scope) {
$scope.TestAngularMethod = function () {
    alert('Hello you are calling angular js method.');
}
}**]**);

I wrapped it in ** and ** to emphasize

answered Apr 5, 2016 at 19:28

Coding Duchess

7,01927 gold badges146 silver badges244 bronze badges

5 Comments

Thomas Over a year ago

Q2 when follow this approach where we need to use 3rd bracket?

Coding Duchess Over a year ago

3-rd bracket?? There is an opening bracket and a closing bracket. Where do you get a 3rd one?

Thomas Over a year ago

i am saying when we need to pass dependencies name in array like this way ["$scope"] ? because i have this is not mandatory but when and why we should follow this pattern? share it if u know.

Coding Duchess Over a year ago

If I understand correctly, you are asking when to pass in $scope variable?

Thomas Over a year ago

i said i can write below way where no this bracket [] exist

app.controller('TestController', function ($scope) { $scope.TestAngularMethod = function () {     alert('Hello you are calling angular js method.'); } });

so when why should i work with [] when declare controller ?

Collectives™ on Stack Overflow

AngularJS: Different approach to declare controller with injection

QS 1

QS 2

EDIT

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

QS 1

QS 2

EDIT

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related