CODEWITHSUNDEEP
angularjs
Thomas
Thomas

Reputation: 34188

AngularJS: Different approach to declare controller with injection

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

Upvotes: 1

Views: 102

Answers (4)

Renan Ferreira
Renan Ferreira

Reputation: 2150

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).

Upvotes: 1

Zaslam
Zaslam

Reputation: 354

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

Upvotes: 3

Coding Duchess
Coding Duchess

Reputation: 6909

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

Upvotes: 0

Aman Gupta
Aman Gupta

Reputation: 3797

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.

Upvotes: 1

Related Questions