$ 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路由定义的属性(这里有更多信息).

所以,基本上你可以这样写:

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