AngularJS、ocLazyLoad 和 ui-router：如何在不将“状态”集中在 app.js 主类上的情况下按需加载

Posted 2023-03-07

【中文标题】AngularJS、ocLazyLoad 和 ui-router：如何在不将“状态”集中在 app.js 主类上的情况下按需加载

【英文标题】：AngularJS, ocLazyLoad and ui-router: How to load on demand without centralize 'state' on the main app.js class

【发布时间】：2017-01-04 18:19:31

【问题描述】：

我是 ui-router 和 ocLazyLoad 的新手，可能这个问题很容易解决，但我之所以写在这里是因为我没有运气在博客上搜索。我的应用现在使用 ocLazyLoad 运行良好。

这是我在 app.js 主类上的配置：

angular.module('me', [
'ui.router',
'oc.lazyLoad',
'me.partials.footer',
'me.partials.header'
])

.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) 

    $urlRouterProvider.otherwise('/ini')

    $stateProvider
        .state('ini',  // Login
            url: '/ini',
            templateUrl: 'views/ini/ini.html'
        )
        .state('signin', 
            url: '/signin',
            templateUrl: 'views/signin/signin.html'
        )
        .state('home', 
            url: '/home',
            templateUrl: 'views/home/home.html',
            resolve: 
                home: function($ocLazyLoad) 
                    return $ocLazyLoad.load(
                        
                            name: "views.home",
                            files: [
                                "views/home/home.js",
                            ]
                        
                    );
                
            
        )
        .state('home.profile', 
            url: '/profile',
            templateUrl: 'views/profile/profile.html'
        )
        .state('home.board', 
            url: '/board',
            templateUrl: 'views/board/board.html'
        );

]);

现在我希望停止在同一个类上放置更多状态，否则我的 app.js 将在几个月后变得庞大。所以我已经从这里删除了一些状态到我的另一个模块，称为'home-module'：

home.js

angular
.module('views.home', [
        name: "views.home.controller",
        files: ["views/home/home-controller.js"]
    
])
.config(['$stateProvider', '$urlRouterProvider', 
    function ($stateProvider, $urlRouterProvider) 

        $stateProvider
            .state('home', 
                url: '/home',
                templateUrl: 'views/home/home.html',
                resolve: 
                    home: function($ocLazyLoad) 
                        return $ocLazyLoad.load(
                            
                                name: "views.home",
                                files: [
                                    "views/home/home.js",
                                ]
                            
                        );
                    
                
            )
            .state('home.profile', 
                url: '/profile',
                templateUrl: 'views/profile/profile.html'
            )
            .state('home.board', 
                url: '/board',
                templateUrl: 'views/board/board.html'
            );

]);

但是我收到了这个错误：Could not resolve 'home.board' from state 'ini'，这完全有道理，因为文件 home.js 之前没有被加载。我该如何解决这个问题？。

在我独特的主 app.js 类上写入我所有的应用程序状态，这是唯一的方法吗？

【问题讨论】：

您是否在 Chrome 开发者工具中看到 GET 请求 home.js？

nope @MuliYulzary :( 这是完全有效的，因为在出​​现错误之前，我的应用程序只是在“app.js”上识别出它自己的“状态”，如您所见

【参考方案1】：

这是状态错误。不解决。 我更喜欢从我的控制器中使用 ocLazyLoad。在那里我们有更多的控制权

.controller("MyCtrl", function($ocLazyLoad) 
    $ocLazyLoad.load('views/home/home.js');
);

【讨论】：

绝对与问题无关。