AngularAMD + UI路由器+動態控制器名稱？

Question

我試圖在我的應用程序中編寫通用路由，並根據路由參數動態解析視圖和控制器名稱。

我有以下有效的代碼：

$stateProvider.state('default', angularAMD.route({
    url: '/:module/:action?id',

    templateUrl: function (params) {
        var module = params.module;
        var action = module + params.action.charAt(0).toUpperCase() 
                            + params.action.substr(1);

        return 'app/views/' + module + '/' + action + 'View.html';
    },

    controller: 'userController',
}));

但是，我無法找到一種動態解析控制器名稱的方法。 我嘗試使用此處所述的resolve方法，但是ui-router似乎與angular-route方法不同。

有指針嗎？

編輯 ：我已經嘗試過使用controllerProvider但它對我不起作用（例如，以下代碼僅返回硬編碼的控制器名稱以測試其是否真正起作用）：

controllerProvider: function () {
    return 'userController';
}

給我以下錯誤：

錯誤：[ng：areq]參數'userController'不是一個函數，未定義http://errors.angularjs.org/1.3.3/ng/areq?p0=userController&p1=not%20aNaNunction%2C%20got%20undefined

Answer 1

這是一個到工作的矮人的鏈接。

解

我們需要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.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

首先，我們需要一些將參數（例如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 ，對於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，控制器的延遲加載