Angularjs minify best practice

Question

I'm reading http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html and it turned out that angularjs dependency injection has problems if you minify your javascript so I'm wondering if instead of

var MyController = function($scope, $http) {
    $http.get('https://api.github.com/repos/angular/angular.js/commits')
      .then(function(response) {
        $scope.commits = response.data
      })
  }

you should use

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

all in all I thought the second snippet was for the old version of angularjs but ....

Should I always use the inject way (the second one) ?

score 105 · Accepted Answer · edited Nov 11 '16 at 07:51

105

Yes, always! So this way even if your minifer converts $scope to variable a and $http to variable b, their identity is still preserved in the strings.

See this page of AngularJS docs, scroll down to A Note on Minification.

UPDATE

Alternatively, you can use ng-annotate npm package in your build process to avoid this verbosity.

edited Nov 11 '16 at 07:51

Jiri Tousek

12,211
5
29
43

answered Sep 13 '13 at 09:05

Selvam Palanimalai

1,550
1
10
13

This, and some other issues are very good explained at egghead.io. JFYI – Wottensprels Sep 13 '13 at 09:06
@Sprottenwels: Yup! Lot of useful resources there. – Selvam Palanimalai Sep 13 '13 at 09:09
8

Instead of using this more verbose syntax you can use ngmin and a build tool (like Grunt) before you run minification. That way you can minify properly but also use either dependency injection syntax. – jkjustjoshing Apr 17 '14 at 17:49
4

A note on minification have been moved here https://docs.angularjs.org/tutorial/step_07 – Razvan.432 Jul 26 '16 at 18:24
See also [AngularJS Developer Guide - Implicit Annotation](https://docs.angularjs.org/guide/di#implicit-annotation). – georgeawg Jul 05 '18 at 02:31

score 37 · Answer 2 · edited Sep 23 '14 at 19:17

37

It is safer to use the second variant but it is also possible to use the first variant safely with ngmin.

UPDATE:
Now ng-annotate becomes a new default tool to solve this issue.

edited Sep 23 '14 at 19:17

DDA

991
10
28

answered Sep 13 '13 at 09:13

OZ_

12,492
7
50
68

dizel3d · Answer 3 · 2014-11-04T12:26:05.773

Yes, you need to use explicit dependency injection (second variant). But since Angular 1.3.1 you can turn off implicit dependency injection, it's really helpful to solve potential problems with renaming at once (before minification).

Turning off implicit DI, using strictDi config property:

angular.bootstrap(document, ['myApp'], {
    strictDi: true
});

Turning off implicit DI, using ng-strict-di directive:

<html ng-app="myApp" ng-strict-di>

score 7 · Answer 4 · edited Oct 31 '19 at 14:34

7

Just to point out that if you use

Yeoman

there is no need to do like

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

because grunt during minify take into account how to manage DI.

edited Oct 31 '19 at 14:34

georgeawg

48,608
13
72
95

answered Sep 19 '13 at 13:18

Whisher

31,320
32
120
201

score 1 · Answer 5 · answered Oct 11 '13 at 18:44

1

Like OZ_ said, Use ngmin to minify all angular js file, like directive.js service.js. After that you can use Closure compiler to optimize it.

ref:

How to minify angularjs scripts

Build with YO

answered Oct 11 '13 at 18:44

fxp

6,792
5
34
45

score 0 · Answer 6 · edited Oct 31 '19 at 14:33

0

You might want to use $inject as it mentioned here:

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

function MyController($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}

edited Oct 31 '19 at 14:33

georgeawg

48,608
13
72
95

answered Aug 23 '17 at 06:57

no id

1,642
3
24
36

score 0 · Answer 7 · edited Jun 20 '20 at 09:12

Use Strict Dependency Injection to Diagnose Problems

With Implicit Annotation, code will break when minified.

From the Docs:

Implicit Annotation

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

You can add an ng-strict-di directive on the same element as ng-app to opt into strict DI mode.

<body ng-app="myApp" ng-strict-di>

Strict mode throws an error whenever a service tries to use implicit annotations.

This can be useful to determining finding problems.

For more information, see

Angularjs minify best practice

7 Answers7

Use Strict Dependency Injection to Diagnose Problems

Implicit Annotation

Linked

Related