javascript - AngularJS 1.2.0 : Lazy load controllers and templates

Question

我是 AngularJS 的新手。我正在使用以下代码来实现延迟加载依赖项。

https://github.com/matys84pl/angularjs-requirejs-lazy-controllers/

这在 1.0.7 中运行得很好，但延迟 promise 无法在 1.2.0 版本中加载模板。

在js/lib/utils/route-config.js

routeDefinition.template = function () {
            /*
             *  Here is the problem, 'html' is undefined on page load. 
             *  But if we click the menu navigation, the 'html' is getting loaded. 
             *  I am not sure how to achieve promise for loading template in RequireJS.
             */
            return html;
        };
        routeDefinition.controller = controllerName;


routeDefinition.resolve = {
        delay:function ($q, $rootScope) {
            defer = $q.defer();
            if (!html) {
                var dependencies = [controllerName, "text!" + templateUrl];
                if (directives) {
                    dependencies = dependencies.concat(directives);
                }
                require(dependencies, function () {
                    var controller = arguments[0],
                        template = arguments[1];

                    for (var i = 2; i < arguments.length; i++) {
                        lazyDirectives.register(arguments[i]);
                    }

                    $controllerProvider.register(controllerName, controller);
                    html = template;
                    defer.resolve();
                    $rootScope.$apply()
                })

            } else {
                defer.resolve();
            }
            return defer.promise;
        }

我已经用下面的代码更改了代码，即我没有使用 template，而是将其更改为 templateUrl 并且它工作完美。由于我在 salesforce.com 中实现它，而 Visualforce 页面不支持 html 扩展，因此我不想使用 templateUrl。

routeDefinition.templateUrl = 'js/'+templateUrl;
        routeDefinition.controller = controllerName;
        routeDefinition.resolve = {
            delay:function ($q, $rootScope, $http) {
                defer = $q.defer();
                if (!html) {
                    //var dependencies = ["lib/text!" + templateUrl, controllerName];
                    var dependencies = [controllerName];
                    if (routeDependends) {
                        dependencies = dependencies.concat(routeDependends.directives);
                        dependencies = dependencies.concat(routeDependends.services);
                        dependencies = dependencies.concat(routeDependends.filters);
                    }

                    require(dependencies, function () {
                        var controller = arguments[0], 
                        //template = arguments[0],
                        incCnt = 1, 
                        directiveCnt = (routeDependends.directives.length+incCnt),
                        serviceCnt = (routeDependends.directives.length+routeDependends.services.length+incCnt),
                        filterCnt = (routeDependends.directives.length+routeDependends.services.length+routeDependends.filters.length+incCnt);

                        $controllerProvider.register(controllerName, controller);

                        if(routeDependends.directives.length > 0)
                            for (var i = incCnt; i < directiveCnt; i++) { onDemandDependencies.registerDirectives(arguments[i]); }
                        if(routeDependends.services.length > 0)
                            for (var i = directiveCnt; i < serviceCnt; i++) { onDemandDependencies.registerServices(arguments[i]); }
                        if(routeDependends.filters.length > 0)
                            for (var i = serviceCnt; i < filterCnt; i++) { onDemandDependencies.registerFilters(arguments[i]); }

                        //html = template;
                        defer.resolve();
                        $rootScope.$apply()
                    });
                } else {
                    defer.resolve();
                }
                return defer.promise;
            }
        }
        console.log(routeDefinition);
        return routeDefinition;

任何帮助表示赞赏。提前致谢。

Answer 1

目前尚不清楚您的html如何正在加载，但如果问题与“Visualforce 页面不支持 html 扩展”相关，您可以使用 <script> 实现模板在现有 html 文件中标记为:

<script id="views/view1.html" type="text/ng-template">
    <h1>View1</h1>
    <div>View Message: {{message}}</div>
    <a href="#/home">Home</a>
</script>

ng-template 的 Angular 文档:
http://docs.angularjs.org/api/ng.directive:script

这是一个 plunker，其中模板编码为 index.html :
http://plnkr.co/edit/TaTl5rtpxuq67roDcOss?p=preview

上面的 Plunker 使用 angularAMD简化 RequireJS 的使用。更多信息请访问:
http://marcoslin.github.io/angularAMD/