AngularAMD + UI路由器+动态控制器名称？

这是一个到工作的plnkr的链接。

解

我们需要UI路由器的两个功能：

• 解决 （加载缺少的JS代码）
• controllerProvider（请参阅下面文档中的引用）

angularAMD-main.js定义

这将是我们的main.js，其中包含智能转换controllerName-controllerPath：

require.config({    //baseUrl: "js/scripts",    baseUrl: "",    // alias libraries paths    paths: {        "angular": "angular",        "ui-router": "angular-ui-router",        "angularAMD": "angularAMD",        "DefaultCtrl": "Controller_Default",        "OtherCtrl": "Controller_Other",    },    shim: {        "angularAMD": ["angular"],        "ui-router": ["angular"],    },    deps: ['app']});

控制器：

// Controller_Default.jsdefine(['app'], function (app) {    app.controller('DefaultCtrl', function ($scope) {        $scope.title = "from default";     });});// Controller_Other.jsdefine(['app'], function (app) {    app.controller('OtherCtrl', function ($scope) {        $scope.title = "from other";    });});

app.js

首先，我们需要一些将参数（例如id）转换为控制器名称的方法。出于测试目的，让我们使用这个简单的实现：

var controllerNameByParams = function($stateParams){    // naive example of dynamic controller name mining    // from incoming state params    var controller = "OtherCtrl";    if ($stateParams.id === 1) {        controller = "DefaultCtrl";    }    return controller;}

.state()

这最终将是我们的州定义

$stateProvider    .state("default", angularAMD.route({        url: "/{id:int}",        templateProvider: function($stateParams)        { if ($stateParams.id === 1) {     return "<div>ONE - Hallo {{title}}</div>"; } return "<div>TWO - Hallo {{title}}</div>";        },        resolve: { loadController: ['$q', '$stateParams',     function ($q, $stateParams)     {         // get the controller name === here as a path to Controller_Name.js         // which is set in main.js path {}         var controllerName = controllerNameByParams($stateParams);         var deferred = $q.defer();         require([controllerName], function () { deferred.resolve(); });         return deferred.promise;     }]        },        controllerProvider: function ($stateParams)        { // get the controller name === here as a dynamic controller Name var controllerName = controllerNameByParams($stateParams); return controllerName;        },    }));

在此工作示例中，请在此处检查

文件资料

如此处所述：$ stateProvider，对于a

state(name,stateConfig)

controller

controllerProvider

controllerProvider

…

controller

如果作为字符串传递，则控制器fn应该与新相关的作用域或已注册控制器的名称相关联。可选地，可以在此处声明ControllerA。

controller: "MyRegisteredController"controller:"MyRegisteredController as fooCtrl"}controller: function($scope, MyService) {$scope.data = MyService.getData(); }

controllerProvider

返回实际控制器或字符串的可注入提供程序函数。

controllerProvider:  function(MyResolveData) {    if (MyResolveData.foo)      return "FooCtrl"    else if (MyResolveData.bar)      return "BarCtrl";    else return function($scope) {      $scope.baz = "Qux";    }  }

…

解决

resolve

可选

map<string, function>

的依赖项，应将其注入到控制器中。 如果这些依赖项中的任何一个是promise ，则
路由器将 在实例化控制器之前 等待 它们 全部解决 。

即让我们使用

controllerProvider

…动态地解析控制器名称…

_如果您设法到达这里，也许您想使用RequireJS检查另一个类似的解决方案- 带有requirejs的angular-ui-router，延迟加载控制器