2014-12-02 325 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)。