factory, service与provider的区别

最新推荐文章于 2023-09-13 17:31:46 发布

最新推荐文章于 2023-09-13 17:31:46 发布 · 583 阅读

文章标签：

#javascript

angularJS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Angular中三种创建服务的方式：Factory、Service和Provider，包括它们的特点、使用方法及在控制器中的应用。

Angular为我们提供了三种创建服务的方式：

1、Factory

2、Service

3、Provider

一、当使用 factory 来创建服务的时候，相当于新创建了一个对象，然后在这个对象上新添属性，最后返回这个对象。当把这个服务注入控制器的时候，控制器就可以访问在那个对象上的属性了。

app.factory('MyFactory', function () {
        var _artist = '',
            service = {};

        service.getArtist = function () {
            return _artist;
        };

        return service;
    })
    .controller('myFactoryCtrl', [
        '$scope', 'MyFactory',
        function ( $scope, MyFactory ) {
            $scope.artist = MyFactory.getArtist();
        }]);

二、当使用 service 创建服务的时候，相当于使用 new 关键词进行了实例化。因此，你只需要在 this 上添加属性和方法，然后，服务就会自动的返回 this 。当把这个服务注入控制器的时候，控制器就可以访问在那个对象上的属性了。

app.service('MyService', function () {
        var _artist = '';
    
        this.getArtist = function () {
            return _artist;
        };
    })
    .controller('myServiceCtrl', [
        '$scope', 'MyService',
        function ( $scope, MyService ) {
            $scope.artist = MyService.getArtist();
        }]);

三、 provider 是唯一一种可以创建用来注入到 config() 函数的服务的方式。想在你的服务启动之前，进行一些模块化的配置的话，就使用 provider 。

app.provider('MyProvider', function () {

        // 只有直接添加在this上的属性才能被config函数访问
        this._artist = '';
        this.thingFromConfig = '';

        // 只有$get函数返回的属性才能被控制器访问
        this.$get = function () {
            var that = this;

            return {
                getArtist: function () {
                    return that._artist;
                },
                thingFromConfig: that.thingFromConfig
            };
        };
    })
    .config(['MyProvider', function ( MyProvider ) {
        MyProvider.thingFormConfig = 'this is set in config()';
    }])
    .controller('myProviderCtrl', [
        '$scope', 'MyProvider',
        function ( $scope, MyProvider ) {
            $scope.artist = MyProvider.getArtist();
        }]);