angularjs-factory,provider,service,constant,value,decorator,route

2024-12-03 技术教程

1、factory

用Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 使用了。

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="angular.min.js"></script><script>angular.module('mod',[])//定义工厂模块-factory.factory('fact',[function(){return{str:"testfactory",sum:function(n1,n2){returnn1+n2}};}])//添加依赖注入模块fact.controller('testCtrl',['$scope','fact',function($scope,fact){alert(fact.str)}])</script></head><bodyng-app='mod'ng-controller='testCtrl'></body></html>

2、provide

Providers是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用 provider。

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="angular.min.js"></script><script>angular.module('mod',[]).controller('modCtrl',['$scope','prod',function($scope,prod){alert(prod.a+prod.b)}]).provider('prod',[function(){this.$get=[function(){return{a:12,b:15};}];}])</script></head><bodyng-app='mod'ng-controller='modCtrl'></body></html>

3、service

Service是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后 service 返回"this"。你把 service 传进 controller 之后，在controller里 "this" 上的属性就可以通过 service 来使用了。

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="angular.min.js"></script><script>angular.module('mod',[]).service('serv',[function(){this.a=12}]).controller('modCtrl',['$scope','serv',function($scope,serv){alert(serv.a)}])</script></head><bodyng-app='mod'ng-controller='modCtrl'></body></html>

4、constant与value

constant不可修饰

5、decorator

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="angular.min.js"></script><script>angular.module('mod',[]).constant('VERSION','5.0.3').value('name','cisco').controller('modCtrl',['$scope','VERSION','name','prod',function($scope,VERSION,name,prod){alert(name+''+prod.nxos+''+prod.type+''+prod.date+''+VERSION)}]).provider('prod',[function(){this.$get=[function(){return{nxos:'nxos',type:'5548'};}];}]).decorator('prod',function($delegate){$delegate.date='2007.1.10'return$delegate})</script></head><bodyng-app='mod'ng-controller='modCtrl'></body></html>

6、route

需要http服务器

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="angular.min.js"></script><scriptsrc="angular-route.min.js"></script><script>//引入ngRoute模块angular.module('mod',['ngRoute']).controller('routeCtrl',['$scope','$route',function($scope,$route){}]).controller('gameCtrl',['$scope',function($scope){$scope.name='cxiong'$scope.scope='9999'}])//配置route的$routeProvider.config(['$routeProvider',function($routeProvider){$routeProvider.when('/game',{templateUrl:'game.html',controller:'gameCtrl'}).when('/sport',{templateUrl:'../index.html'}).when('/news',{templateUrl:'../style.html'})}])</script></head><bodyng-app='mod'ng-controller='routeCtrl'><ahref="#/game">游戏竞技</a><ahref="#/sport">劲爆体育</a><ahref="#/news">全球新闻</a><ng-view></ng-view></body></html>