angularjs – AngularAMD ui-router动态控制器名称？

解

我们需要UI-Router的两个功能：

>解决(加载缺少的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.js
define(['app'],function (app) {
    app.controller('DefaultCtrl',function ($scope) {
        $scope.title = "from default"; 
    });
}); 

// Controller_Other.js
define(['app'],function (app) {
    app.controller('OtherCtrl',function ($scope) {
        $scope.title = "from other";
    });
});

app.js

首先,我们需要一些将param(例如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;
}

.州()

这最终将是我们的州定义

$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;
        },}));

在这里查看,在working example

文件

如此处所述：$stateProvider,对于状态(name,stateConfig),我们可以使用controller和controllerProvider.一些摘自文档：

controllerProvider

…

controller(可选)stringfunction

Controller fn that should be associated with newly related scope or the name of a registered controller if passed as a string. Optionally,the ControllerAs may be declared here.

controller: "MyRegisteredController"

controller:
"MyRegisteredController as fooCtrl"}

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

controllerProvider(可选)功能

Injectable provider function that returns the actual controller or string.

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

…

解决

解析(可选)对象

An optional map<string,function> of dependencies which should be injected into the controller. If any of these dependencies are promises,the router will wait for them ALL to be resolved before the controller is instantiated…

即让我们使用controllerProvider：

… to resolve the controller name dynamically…

如果你设法到达这里,也许你想用RequireJS – angular-ui-router with requirejs,lazy loading of controller检查另一个类似的解决方案