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）。

扩展服务提供商（提供商）

1 个答案: