1

受到 Jason Watmore 的 AngularJS 示例项目的启发，决定在其中试用 stateproviders。它变得成功了。下一次尝试是尝试 ocLazyLoad，它在 app.config 中提供配置时也很有效。然后尝试从 json 文件加载状态配置。以下教程有助于理解这些概念。

AngularJS - UI-router - 如何配置动态视图

具有 ocLazyLoad 的动态 ui-router 在解析中使用多个模块

但找不到成功。请检查下面的 plunker 链接并帮助了解我可能犯的错误。

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