Jason Watmore の AngularJS サンプル プロジェクトから着想を得て、stateproviders を試してみることにしました。そしてそれは成功した。次の試みは ocLazyLoad を試すことで、app.config で構成を提供している間も機能しました。次に、json ファイルから状態構成を読み込もうとしました。以下のチュートリアルは、概念を理解するのに役立ちました。
AngularJS - UI-router - 動的ビューを構成する方法
解決で複数のモジュールを使用する ocLazyLoad を使用した動的 ui-router
しかし、成功を収めることができませんでした。以下のプランカーのリンクを確認して、私が犯した可能性のある間違いを知るのに役立ててください。
http://plnkr.co/edit/eyantFVBs8e1L68gWzSi
(function () {
'use strict';
var $urlRouterProviderRef = null,
$stateProviderRef = null
angular
.module('app', ['ui.router', 'ngCookies', 'oc.lazyLoad'])
.config(config)
.run(run);
config.$inject = ['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', '$locationProvider'];
function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, $locationProvider) {
$urlRouterProviderRef = $urlRouterProvider;
$locationProvider.html5Mode(false);
$stateProviderRef = $stateProvider;
}
run.$inject = ['$state', '$rootScope', '$location', '$cookieStore', '$http', '$ocLazyLoad'];
function run($state, $rootScope, $location, $cookieStore, $http, $ocLazyLoad) {
$http.get("route-config.json")
.success(function (data) {
angular.forEach(data, function (value, key) {
var state = {
"url": value.url,
"parent": value.parent,
"abstract": value.abstract,
"controller":value.controller,
"templateUrl": value.templateUrl,
"resolve": {}
};
state.resolve[value.dependencies.module] = function ($ocLazyLoad) {
return $ocLazyLoad.load(result)
};
$stateProviderRef.state(value.name, state);
});
$state.go("login");
});
}
})();
以下は、ロードしようとしているJSONです
[
{
"name": "login",
"url": "/login",
"abstract": "",
"parent": "",
"controller": "LoginController as vm",
"templateUrl": "login/login.view.html",
"resolve": {},
"dependencies": {
"module": "login",
"files": [
"login/login.controller.js",
"app-services/authentication.service.js",
"app-services/flash.service.js",
"app-services/user.service.local-storage.js"
]
}
}
]