70

I am totally confused about inject in Angular. I do not know where to use it and why. Is it only used with factory as described here?

myController.$inject = ['$scope','notify'];

Here notify is the name of the factory.

4 Answers 4

110

That is one approach to support Dependency Injection after your code is minified (if you choose to minify).

When you declare a controller, the function takes parameters:

function ($scope, notify)

When you minify the code, your function will look like this:

function (a, b)

Since AngularJS uses the function parameter names to infer DI, your code will break because AngularJS doesn't know about a or b.

To solve this problem, they provided additional ways to declare controllers (or other services/factories/etc) for that matter:

  1. For controllers, use the $inject method - here you pass an array of literals that map to the parameters of your controller function. So, if you provide

    ['$scope', 'notify']
    

    then the value of the first parameter to your function will be the a scope object associated with this controller and the second parameter will be the notify service.

  2. When declaring new controllers, services, etc, you can use the array literal syntax. Here, you do something like this:

    angular.module('myModule').controller('MyController', ['$scope', 'notify', function ($scope, notify) {
        ...
    }]);
    

    The array as a parameter to the controller function maps the DI objects to your function parameters.

I prefer Option #2 when declaring controllers etc as it is easier to read/understand/cross-check since it is all in the same place.

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

2 Comments

thanks for this answer.I also want to know where to use injection DI and why? only for one reason we should use it i.e.function (a, b). we can call it like function myController($scope, notify).
When using strict-di mode, it is kind of mandatory to use the above mentioned format, for the same reason given by @Mark.
23

To complement @mark answer, it is important to note that using the $inject method in the style of:

MyController.$inject = ['$scope', 'notify'];

allows you to add injection dependencies when building providers which are the only angular recipes that don't allow 'friendly' annotation style i.e.:

.controller('MyController', ['$scope', 'notify',... 

dependencies to be declared.

1 Comment

Would you have an example for this way?. Thanks.
5

The way you should use $inject is:

function ApplicationController($scope){
    $scope.greet = "Foo is Not Great!5";
}

ApplicationController.$inject = ['$scope','$ionic'];

app.controller('ApplicationController', ApplicationController);

We need to this as to protect the code from uglifying or minimization.

function(firstName,lastName) may get turned into function(n,m).

So for AngularJS it will break the code because $scope can be replaced by 's'. This is because without the $ sign the angularJS won't be able to recognize the code.

Comments

4

It's mandatory to use this format when we are having ng-strict-di attribute

1 Comment

See the docs for ng-strict-di. There are some good code examples at the bottom of the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.