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

Jiri Tousek · Accepted Answer · 2016-11-11 07:51:31Z

106

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, 2016 at 7:51

Jiri Tousek

12.5k5 gold badges33 silver badges45 bronze badges

answered Sep 13, 2013 at 9:05

Selvam Palanimalai

1,5601 gold badge10 silver badges13 bronze badges

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

5 Comments

Wottensprels Over a year ago

This, and some other issues are very good explained at egghead.io. JFYI

Selvam Palanimalai Over a year ago

@Sprottenwels: Yup! Lot of useful resources there.

jkjustjoshing Over a year ago

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.

Razvan.432 Over a year ago

A note on minification have been moved here docs.angularjs.org/tutorial/step_07

georgeawg Over a year ago

See also AngularJS Developer Guide - Implicit Annotation.

DDA · Accepted Answer · 2014-09-23 19:17:38Z

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, 2014 at 19:17

DDA

98911 silver badges28 bronze badges

answered Sep 13, 2013 at 9:13

user680786

Comments

dizel3d · Accepted Answer · 2014-11-04 12:26:05Z

8

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>

edited Nov 4, 2014 at 12:26

answered Nov 4, 2014 at 12:04

dizel3d

3,6681 gold badge26 silver badges36 bronze badges

Comments

georgeawg · Accepted Answer · 2019-10-31 14:34:41Z

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, 2019 at 14:34

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Sep 19, 2013 at 13:18

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

Comments

fxp · Accepted Answer · 2013-10-11 18:44:53Z

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, 2013 at 18:44

fxp

7,1025 gold badges37 silver badges45 bronze badges

Comments

georgeawg · Accepted Answer · 2019-10-31 14:33:32Z

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, 2019 at 14:33

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Aug 23, 2017 at 6:57

no id

1,7223 gold badges25 silver badges37 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 31, 2019 at 14:36

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

Angularjs minify best practice

7 Answers 7

5 Comments

Comments

Comments

Comments

Comments

Comments

Use Strict Dependency Injection to Diagnose Problems

Implicit Annotation

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

Comments

Comments

Comments

Comments

Use Strict Dependency Injection to Diagnose Problems

Implicit Annotation

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related