angular.js - angularjs 依赖注入的写法问题

【字号: 日期:2023-01-24浏览:27作者:雯心

问题描述

书中关于注入写法有两种app.controller(’PhoneListCtrl’, [’$scope’, ’$http’, function($scope,$http)];app.controller(’PhoneListCtrl’, function($scope,$http)];不懂这两种有什么区别呢!!??请教了

问题解答

回答1:

首先格式化一下你的代码:

显示注入,代码过长,不容易阅读,代码压缩不出错

app.controller(’PhoneListCtrl’, [’$scope’, ’$http’, function($scope, $http){ //do something}]);

隐示注入,书写简单,但是在js进行压缩时候会出错,因为变量名变短,而依赖注入是基于其服务的名称的

app.controller(’PhoneListCtrl’, function($scope, $http){ //do something});

大家推荐$inject的方式,你可以参考JohnPapa的 Angular Style Guide

app.controller(’PhoneListCtrl’, PhoneListCtrl);PhoneListCtrl.$inject = [’$scope’, ’$http’];function PhoneListCtrl($scope, $http){}

另外多说一句,无论你采用那一种,在代码压缩时,其实是不用担心的,因为有插件会帮我们进行依赖注入,无论你使用的是gulp还是grunt,会有一个插件 ng-annotate 帮助你进行依赖注入的添加。

举个例子

app.controller(’PhoneListCtrl’, PhoneListCtrl);/* @ngInject */function PhoneListCtrl($scope, $http){}回答2:

直接引用一篇文章的答案给你好了原文地址依赖注入是AngularJS最棒的模式之一。它使测试变得更加方便,也让它所依赖的对象变的更加清楚明白。AngularJS 对于注入是非常灵活的。一个最简单的方式只需要为模块将依赖的名字传入函数中:

var app = angular.module(’app’,[]);app.controller(’MainCtrl’, function($scope, $timeout){ $timeout(function(){console.log($scope); }, 1000);});

这里,很清楚的是MainCtrl依赖于$scope和$timeout。直到你准备投入生产并压缩你的代码。使用UglifyJS,上面的例子会变成:

var app=angular.module('app',[]);app.controller('MainCtrl',function(e,t){t(function(){console.log(e)},1e3)})

现在AngularJS怎么知道MainCtrl依赖什么?AngularJS提供了一个非常简单的解决方案:把依赖作为一个字符串数组传递,而数组的最后一个元素是一个把所有依赖作为参数的函数。

app.controller(’MainCtrl’, [’$scope’, ’$timeout’, function($scope, $timeout){ $timeout(function(){console.log($scope); }, 1000);}]);

接下来在压缩的代码中AngularJS也可以知道如何找到依赖:

app.controller('MainCtrl',['$scope','$timeout',function(e,t){t(function(){console.log(e)},1e3)}])回答3:

前一种是显示的注入,后一种是自动注入。没区别。不过大家最推荐的是inject函数注入。另外你第一中写法,注意显示注入后,顺序要跟函数参数顺序对应住。

回答4:

谢谢两位了!受教 了

相关文章: