AngularJS中serivce,factory,provider的区别
来源:互联网 发布:linux 进程查看 编辑:程序博客网 时间:2024/06/05 08:41
From: http://blog.csdn.net/spy19881201/article/details/17070855
AngularJS实现注入服务的方法有5种方式:
- decorator
- constant
- value
- service
- factory
- provider
其中provider是一切方法的基础,有点类似于XMLHttpObject,在这个基础之上建立起来的,像jquery的$.ajax等等。
- 第一种方式:decorator
- <div ng-controller="appCtrl">{{ content }}</div>
- <script type="text/javascript">
- var app = angular.module('myApp', []);
- app.value('profile', 'I\'am a angular developer.');
- app.config(function ($provide) {
- $provide.decorator('profile', function ($delegate) {
- return $delegate + ' I like angularJS. So sorry, you are hacked!';
- });
- });
- app.controller('appCtrl', ['$scope', 'profile', function ($scope, profile) {
- $scope.content = profile;
- }]);
- </script>
- 第二种方式:constant
- <div ng-controller="UsingConstantServiceCtrl">{{ magicNumber }},{{ bookTitle }}</div>
- <div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>
- <script type="text/javascript">
- var app = angular.module('myApp', []);
- app.constant('magicNumber', 42);//常量直接接作为服务
- app.constant('magicNumber', 422);//TODO 重新赋值是无效的
- app.constant('bookTitle', "Hitchhiker's Guide");
- function UsingConstantServiceCtrl($scope, magicNumber, bookTitle) {
- $scope.magicNumber = magicNumber;
- $scope.bookTitle = bookTitle;
- }
- (function () {
- var existingServiceInstance = {
- getMagicNumber: function () {
- return 42; // Note that we are using an "hard-coded" magic number
- }
- };
- app.value('magicNumberService', existingServiceInstance);
- }());
- function UsingValueServiceCtrl($scope, magicNumberService) {
- $scope.magicNumberFromService = magicNumberService.getMagicNumber();
- }
- </script>
- 第三种方式:value
- <pre code_snippet_id="92094" snippet_file_name="blog_20131202_3_1841481" name="code" class="javascript"><div ng-controller="appCtrl">{{ title }}</div>
- <script type="text/javascript">
- var app = angular.module('myApp', []);
- app.config(function ($provide) {
- $provide.value('title', 'my Title')
- });
- app.controller('appCtrl', ['$scope', 'title', function ($scope, title) {
- $scope.title = title;
- }]);
- </script></pre><br>
- <br>
- <pre></pre>
- <br>
- <br>
- 第四种方式:service
- <pre code_snippet_id="92094" snippet_file_name="blog_20131202_4_2538810" name="code" class="javascript"><div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>
- <script type="text/javascript">
- var app = angular.module('myApp', []);
- app.constant('magicNumber', 42);//常量直接接作为服务
- (function() {
- var MyService = function(magicNumber) { // "magicNumber" is injected
- this.getMagicNumber = function() {
- return magicNumber;
- };
- };
- app.service('magicNumberService', MyService);
- }());
- function UsingValueServiceCtrl($scope, magicNumberService) {
- $scope.magicNumberFromService = magicNumberService.getMagicNumber();
- }
- </script></pre><br>
- <br>
- <pre></pre>
- <br>
- <br>
- 第五种方式:factory
- <div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>
- <script type="text/javascript">
- var app = angular.module('myApp', []);
- app.constant('magicNumber', 42);//常量直接接作为服务
- (function () {
- // registers a service factory with "magicNumber" injected
- app.factory('magicNumberService', function (magicNumber) {
- return {
- getMagicNumber: function () {
- return magicNumber;
- }
- };
- });
- }());
- function UsingValueServiceCtrl($scope, magicNumberService) {
- $scope.magicNumberFromService = magicNumberService.getMagicNumber();
- }
- </script>
- 第六种方式:provider
- <div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>
- <script type="text/javascript">
- var app = angular.module('myApp', []);
- app.constant('magicNumber', 42);//常量直接接作为服务
- (function() {
- var MyService = function(magicNumber) { // "magicNumber" is injected
- this.getMagicNumber = function() {
- return magicNumber;
- };
- };
- app.service('magicNumberService', MyService);
- }());
- function UsingValueServiceCtrl($scope, magicNumberService) {
- $scope.magicNumberFromService = magicNumberService.getMagicNumber();
- }
- </script>
http://blog.csdn.net/spy19881201/article/details/17070855
0 0
- AngularJS中serivce,factory,provider的区别
- AngularJS中serivce,factory,provider的区别
- AngularJS中serivce,factory,provider的区别
- AngularJS中serivce,factory,provider的区别
- AngularJS中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- angularjs中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- AngularJS中service,factory,provider的区别
- angularjs中service、factory和provider的区别
- angularJs中factory,service,provider
- angularJS中service、factory、provider使用和区别
- angularjs中provider、factory和service三者的写法与区别
- AngularJS中的Provider们:Service和Factory等的区别
- AngularJS中的Provider们:Service和Factory等的区别
- AngularJS中的Provider们:Service和Factory等的区别
- mysql应用减号的问题
- HTC官解后刷机步骤
- 台湾3人大陆被判刑后返台服刑:以为会死在大陆
- 使用CocoaPods之后的头文件包含问题
- 密码 hdu
- AngularJS中serivce,factory,provider的区别
- c语言学习笔记_数据格式_int与char的存储方式小节
- 代理二:深入研究InvocationHandler、动态代理类工作原理、实现AOP框架
- Android之手势滑动360旋转
- gl 绘制多边形的函数解析 .
- NYOJ 202 红黑树
- MsgBox vbYesNo
- JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误
- ANDROID 中UID与PID的作用与区别