2014-12-02 209 views
2

我试图扩展服务提供商;更具体地说$ routeProvider从ngRoute模块扩展服务提供商(提供商)

我伸出提供商是这样的:

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

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

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

回答

1

为了延长$routeProvidercustomRoute函数必须返回扩展提供者对象:

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,你只需要添加一些新的方法$routeProviderthis.$get返回相应提供者服务的服务对象实例/构造函数(如果是$routeProvider,则返回$route)。