javascript - 扩展一个服务提供者(provider)

Question

我正在尝试扩展一个服务提供者；更具体地说，来自 ngRoute 模块的 $routeProvider

我的扩展提供者看起来像这样:

angular
    .module('myapp')
    .provider('customRoute', customRoute)

function customRoute($routeProvider) {

    var extendedProvider = angular.extend({}, $routeProvider, {
        // Customization here
    });

    // These will print almost identical objects
    console.log(extendedProvider); 
    console.log($routeProvider);

    this.$get = function() {
        return extendedProvider;
    }
}

路由的配置看起来像这样:

angular
    .module('myapp')
    .config(Routes);

function Routes(customRouteProvider, $routeProvider) {

    /* This will print an object that looks the same as 
       the ones printed in the provider definition */
    console.log($routeProvider);

    /* This object does not look like the $routeProvider any more :( */
    console.log(customRouteProvider);

    customRouteProvider
        .when('/', {
             templateUrl: 'path/to/some/template.html',
            controller: 'SomeController',
        })
        .otherwise({
            redirectTo: '/'
        });
}

我读过这个帖子:

how can i extend a service

但他们只谈论扩展“工厂”服务

有人可以解释这里发生了什么吗？非常感谢您的帮助。

Answer 1

为了扩展 $routeProvider 你的 customRoute 函数必须返回扩展的提供者对象:

function customRoute($routeProvider) {

    var extendedProvider = angular.extend({}, $routeProvider, {
        // Customization here
        mergeRoutes: function() {}
    });

    return extendedProvider;
}

之后您可以使用新的自定义方法 customRouteProvider.mergeRoutes:

customRouteProvider
    .when('/', {
        templateUrl: 'path/to/some/template.html',
        controller: 'SomeController',
    })
    .otherwise({
        redirectTo: '/'
    })
    .mergeRoutes({ ... });

演示播放:http://plnkr.co/edit/mht94RFLScz2jHCwPcai?p=preview

为了您的目的，您不需要弄乱 this.$get，您只需要向 $routeProvider 添加一些新方法。 this.$get 返回相应提供者服务的服务对象实例/构造函数($route 在 $routeProvider 的情况下)。