What is the benefit of AngularJS Strict DI mode?

2019-02-11 17:50发布

站内问答 / JavaScript
1847 4 4

Recently I come across with AngularJS Strict DI mode. What is the purpose & benefit of using it? Will we gain significant performance improvement by using it especially on mobile devices?

I try to apply it to my code and I did not do any annotation when writing the code. However, I have my code to be minify, and ng-annotate during build. But why is that after I add Strict DI mode to my code I still get the error saying "Explicit annotation required"?

4条回答
对你真心纯属浪费
2楼-- · 2019-02-11 18:07

Good practice is using strict-di. App must fail to run when invoke functions that don’t use explicit function annotation. This means that the methods used must be declared. Using the ng-strict-di will ensure that app is confirming with dependency injection guideline and will fail to run if not.

You can achieve that by using ng-strict-di: 

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

See developer guide: https://docs.angularjs.org/guide/di

查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
3楼-- · 2019-02-11 18:14

Strict DI Mode basically throws errors when, at run time, it is found a piece of code that is not compliant to minification; but note that the code may be right and without logical-syntactical errors.

Citing the documentation:

if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs.

For example this code triggers an error because ($scope, $http, $filter) are not explicitly injected using $inject or giving to the .controller(A,B) method an array as second field.

angular.module("myApp", [])
// BadController cannot be invoked, because
// the dependencies to be injected are not
// explicitly listed.
.controller("BadController", function($scope, $http, $filter) {
  // ...
});

Right snippet:

angular.module("myApp", [])
  .controller("GoodController1", GoodController1);

GoodController1.$inject = ["$scope", "$http", "$filter"];

function GoodController1($scope, $http, $filter){}

or:

angular.module("myApp", [])
  .controller("GoodController1", 
              ["$scope", "$http", "$filter", function ($scope, $http, $filter){
     //...
}]);

In order to answer at your question there is no significant performance improvement by using it. It only grant to you the minifiability error safeness. This because minification changes variables names breaking your code when for example you use $scope without explicit annotation.

查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
4楼-- · 2019-02-11 18:20

You can also add strict-di like this:

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

when using angular meteor es6 type applications.

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
5楼-- · 2019-02-11 18:25

Angular strict DI enforces code minifyability.

When your code is minified the names of the parameters are shortened, which breaks angular's DI. To counter that problem angular has added two(maybe more now) alternative ways to add dependency's.

Perhaps the most common way and the one used by ng-annotate is placing an array instead of an function as the second parameter. The dependency's are the string's before the last element in the array, the string's are the dependency names.

controller.$inject(['$scope']);

angular.module('app', ['dependency']).controller('myCtrl', ['myFirstDep',
function(willBeInjectedHere){}])

Your ng-annotate is probably not running before angular does it's checks. Make sure you are NOT running uglify together with annotate, do it explicitly BEFORE. If your code is throwing error, then most likely there is somewhere that the annotation was not made.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)