前端开发框架总结之Angular实用技巧(五)
上文讲了Angular中网络请求相关的知识,掌握了这些,我们就可以在前端与后台进行通讯了,这样可以实现复杂的业务功能了。今天我们再来介绍下angular 依赖注入相关的知识。
- angular 依赖注入
依赖注入的写法一共有三种
第一种
app.add.controller('manageCtrl', ['$scope','$rootScope', '$state','$http',function ($scope, $rootScope,$state,$http) {
}]);
第二种
app.add.controller('manageCtrl',function ($scope, $rootScope,$state,$http) {
});
第三种
app.add.controller('manageCtrl',manageCtrl) {
}]);
function manageCtrl($scope, $rootScope,$state,$http){
}
manageCtrl.$inject = [$scope, $rootScope,$state,$http];
其中第二种写法在代码混淆时会出错。
-
加载顺序
constant---->provider---->config---->value---->factory---->service----->run---->directive---->controller;
其中factory,service,directive是有使用的时候才会加载。
-
自定义服务
自定义服务的方法有三种,factory、service、provider。每种定义的语法不同,但是作用一样。其中provider比较特殊,他可以注入到config函数。这个从上边的加载顺序就可以看出来。
具体每种的写法如下:
<script>
var app = angular.module('ExampleApp', []);
app.config(['myConstants',function (myConstants) {
console.log('enter config function1');
console.log("myConstants.aaa:" + myConstants.aaa);
}]);
app.run(['myValues','myFactory','myService','myProvider','$rootScope',function (myValues,myFactory,myService,myProvider,$rootScope) {
console.log('enter run function');
console.log("myValues.bbb:" + myValues.bbb);
console.log("myFactory.fff:" + myFactory.fff);
console.log("myService.ddd:" + myService.ddd);
console.log("myProvider.eee:" + myProvider.eee);
$rootScope.globalVar = 'rootScope的全局变量';
}]);
app.config(['myProviderProvider',function (myProviderProvider) {
console.log('enter config function2');
console.log("myProviderProvider.eee:" + myProviderProvider.eee);
myProviderProvider.eee = 'eee变化';
}]);
app.constant('myConstants',{
aaa:'aaa初值'
});
app.value('myValues',{
bbb:'bbb初值'
});
app.controller('testCtrl',['$scope','myProvider', function ($scope,myProvider) {
console.log('enter control function');
$scope.inputValue = '初值';
console.log("myProvider.eee:" + myProvider.eee);
console.log("rootScope.globalVar:" + $scope.globalVar);
}]);
app.factory('myFactory',function () {
console.log('enter myFactory');
var myFactory = {};
myFactory.fff = 'myFactory fff初始值';
return myFactory;
});
app.service('myService',function () {
console.log('enter myService');
this.ddd = 'ddd初值';
});
app.provider('myProvider',function (myConstants) {
console.log('enter myProvider');
this.eee = 'eee初值';
console.log("myProvider,myConstants.aaa:" + myConstants.aaa);
this.$get = function () {
var that = this;
return {
eee: that.eee
}
}
});
app.directive('myDirective',function () {
console.log('enter myDirective');
return {
restrict: 'A',
require: '?^ngModel',
}
})
</script>
-
全局变量
实现全局变量的方式有如下几种:constant、value、$rootScope、通过var定义全局变量(原生js语法)、通过service共享变量。
其中constant可以在config中注入,value不可以,$rootScope也不可以。他们都可以在run及以后使用。