1

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"
                 ]
    }

}
]
4

0 に答える 0