Question

如何在angularJs中使用按需加载控制器/服务。现在我有一个由Index.html引用的mainApp。我使用$ routeprovider进行路由，但所有必需的控制器/服务都在相应的视图中引用，例如：

<section id="pageLevelScripts">
    <!--location of page level scripts-->

 <script src="/Area/Sotaria/Controllers/UserController.js"></script>
</section>
<div class="row" >
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-12">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#/users">Usermanagement</a></li>
                    <li class="active"><span>Users</span></li>
                </ol>
                <h6>{{name}}</h6>
            </div>
        </div>

这是我的要求我不想加载我的Index.html中的所有控制器。但是当我导航到childView时，我收到一个错误＆＃34; Usercontroller未定义＆＃34;，那么我如何在angualrjs中启用ondemanidng / lazy加载控制器，.Ie。 加载子页面时，只应加载其相关控制器。

Answer 1

您未定义的原因是因为加载JS文件并不能让Angular知道它。您必须将它附加到Angular的$ controllerProvider。

您可以创建一个自定义服务，为您执行延迟加载或使用其他人已经构建的许多服务之一。以下是可以与requirejs一起使用的自定义示例。

如果以下示例不够详细，您可以在此处阅读此博文：Strange Milk - Front End Development

自定义提供商

function LoaderProvider(){
    this.controller = null;
    this.directive = null;
    this.filter = null;
    this.factory = null;
    this.service = null;

    //service factory definition
    this.$get = ['$q', '$rootScope', function($q, $rootScope){
        return {
            load: function (path) {
                var q = $q.defer();
                require([path], function () {
                    $rootScope.$apply(function () {
                        q.resolve();
                    });
                });
                return q.promise;
             }
         };
    }];
}

var container = new LoaderProvider();
module.provider('Loader', function(){
    return container;
});

您的应用配置：

.config(function (LoaderProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

        // save references to the providers
        LoaderProvider.controller = $controllerProvider.register;
        LoaderProvider.directive = $compileProvider.directive;
        LoaderProvider.filter = $filterProvider.register;
        LoaderProvider.factory = $provide.factory;
        LoaderProvider.service = $provide.service;
    })

在App的路线中如何使用它的示例。详细了解Resolve

resolve : {
    load : ['Loader', function(Loader){
        return Loader.load('../app/global/controllers/headerCtrl');
    }]
}

其他一些资源/解决方案：

ocLazyLoad

angularAMD

如何在angularjs中使用延迟加载

1 个答案: