$ routeProvider - 根據URL

Question

注入控制器的依賴考慮代碼：

var app = angular.module("app", [], function($routeProvider) { 
    $routeProvider 
    .when("/page1", { controller: "MyController" }) 
    .when("/page2", { controller: "MyController" }) 
    .when("/page3", { controller: "MyController" }); 
}); 

app.factory("StrategyOne", function() {...}); 
app.factory("StrategyTwo", function() {...}); 
app.factory("StrategyThree", function() {...}); 

app.controller("MyController", function(Strategy, $scope) {...}); 

根據URL，我想無論是StrategyOne，或StrategyTwo，或StrategyThree被注入，構造MyController時。一個僞代碼來說明這個想法：

var app = angular.module("app", [], function($routeProvider) { 
    $routeProvider 
    .when("/page1", { controller: "MyController", Strategy: "StrategyOne" }) 
    .when("/page2", { controller: "MyController", Strategy: "StrategyTwo" }) 
    .when("/page3", { controller: "MyController", Strategy: "StrategyThree" }); 
}); 

任何更改我可以用AngularJS實現這樣的事情嗎？

Answer 1

是的！ AngularJS可以很容易地處理路由定義的resolve屬性（更多信息here）。

所以，基本上你可以寫這樣的：

var app = angular.module("app", [], function($routeProvider) { 
    $routeProvider 
    .when("/page1", { controller: "MyController", resolve: {Strategy: "StrategyOne"}}) 
    .when("/page2", { controller: "MyController", resolve: {Strategy: "StrategyTwo"}}) 
    .when("/page3", { controller: "MyController", resolve: {Strategy: "StrategyThree"}}); 
}); 

有適當的戰略注入到你的控制器！ AngularJS DI處於最佳狀態！

有一個很好的視頻教程對付resolve主題，你會覺得很有趣：http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp