AngularJS 中的 Factory、Service以及 Provider的区别
AngularJS 的供应商($provide)
服务会被叫做供应商的东西来定义,可以使用 创建供应商的方法:
定义供应商的方法们
1. constant定义常量的,它定义的值不能被改变,它可以被注入到任何地方,但是不能被装饰器( DEMO: HTML 代码: <!DOCTYPE html> <html lang="en"> <head> <title>demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <div ng-app="myApp"> <div ng-controller="myController"> </div> </div> <script src="js/angular.js"> </script> <script src="js/service.js"></script> </body> </html> JS 代码: var myApp = angular.module('myApp',[]) myApp.config(function($provide) { $provide.constant('movieTitle','功夫瑜伽') }) myApp.controller('myController',function(movieTitle) { console.log('movieTitle: ',movieTitle); }) 语法糖: myApp.constant('movieTitle','功夫瑜伽') 2. value它可以是 HTML 代码: <!DOCTYPE html> <html lang="en"> <head> <title>demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,[]) myApp.config(function($provide) { $provide.value('movieTitle','功夫瑜伽') }) myApp.controller('myController',movieTitle); }) 语法糖: myApp.value('movieTitle','功夫瑜伽') 3. service它是一个可注入的构造器,在 var myApp = angular.module('myApp',[]) myApp.config(function($provide) { $provide.service('movie',function() { this.title = '功夫瑜伽' }) }) myApp.controller('myController',function(movie) { console.log('movieTitle: ',movie.title); }) 语法糖: myApp.service('movie',function () { this.title = '功夫瑜伽' }) 注意: 在 4. factory它是一个可注入的 var myApp = angular.module('myApp',[]) myApp.config(function($provide) { $provide.factory('movie',function() { return { title: '功夫瑜伽' } }) }) myApp.controller('myController',movie.title); }) 语法糖: $provide.factory('movie',function() { return { title: '功夫瑜伽' } }) 注意:
5. provider
JS 代码: var myApp = angular.module('myApp',[]) myApp.provider('movie',function() { var version return { setVersion: function(value) { version = value },$get: function() { return { title: '功夫瑜伽 ' + version } } } }) myApp.config(function(movieProvider) { movieProvider.setVersion('正在热播') }) myApp.controller('myController',movie.title); }) 注意:
6.decorator
JS 代码: var myApp = angular.module('myApp',[]) // myApp.value('movieTitle','功夫瑜伽6') myApp.config(function($provide) { $provide.value('movieTitle','功夫瑜伽7') $provide.decorator('movieTitle',function($delegate) { return $delegate + ' - 测试' }) }) myApp.controller('myController',movieTitle); }) 总结
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |