AngularJS中serivce,factory,provider的区别

From:  http://blog.csdn.net/spy19881201/article/details/17070855

AngularJS实现注入服务的方法有5种方式：

1. decorator
2. constant 
3. value
4. service
5. factory
6. provider

其中provider是一切方法的基础，有点类似于XMLHttpObject，在这个基础之上建立起来的，像jquery的$.ajax等等。

• 第一种方式：decorator

 "appCtrl">{{ content }}

  

  

"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;  

    }]);  

  

• 第二种方式：constant 

 "UsingConstantServiceCtrl">{{ magicNumber }},{{ bookTitle }}

  

"UsingValueServiceCtrl">{{ magicNumberFromService }}

  

  

"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();  

    }  

  

• 第三种方式：value

 "92094" snippet_file_name="blog_20131202_3_1841481" name="code" class="javascript">"appCtrl">{{ title }}

  

  

"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;  

    }]);  

  

  

  

  

  

• 第四种方式：service

 "92094" snippet_file_name="blog_20131202_4_2538810" name="code" class="javascript">"UsingValueServiceCtrl">{{ magicNumberFromService }}

  

  

"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();  

    }  

  

  

  

  

  

• 第五种方式：factory

 "UsingValueServiceCtrl">{{ magicNumberFromService }}

  

  

  

"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();  

    }