发表新帖
发表新帖

Angularjs minify best practice

前端 未结
关注
7 1497
孤独总比滥情好
孤独总比滥情好 2020-11-22 03:12

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 problem

相关标签:
7条回答
  • 死守一世寂寞
    2020-11-22 03:41

    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 Developer Guide - Using Strict Dependency Injection
    • AngularJS ng-app Directive API Reference
    • AngularJS Error Reference - Error: $injector:unpr Unknown Provider
    0 讨论(0)
  • 自闭症患者
    2020-11-22 03:44

    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
    })
}
    0 讨论(0)
  • 遥遥无期
    2020-11-22 03:50

    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.

    0 讨论(0)
  • 耶瑟儿～
    2020-11-22 03:56

    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.

    0 讨论(0)
  • 挽巷
    2020-11-22 03:58

    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>
    0 讨论(0)
  • 暗喜
    2020-11-22 03:58

    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

    0 讨论(0)
 看不清?
提交回复
热议问题