[英]AngularJS 1.2.0: Lazy load controllers and templates
我是AngularJS的新手。 我正在使用以下代碼來實現延遲加載依賴性。
https://github.com/matys84pl/angularjs-requirejs-lazy-controllers/
1.0.7可以很好地工作,但是延遲承諾無法在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;
任何幫助表示贊賞。 提前致謝。
目前尚不清楚您的html
的加載方式,但是如果問題與“ visualforce頁面不支持html擴展名”有關,則可以在現有html文件中使用<script>
標記實現模板,如下所示:
<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
角度文檔:
http://docs.angularjs.org/api/ng.directive:script
這是一個模板在index.html
編碼的插件:
http://plnkr.co/edit/TaTl5rtpxuq67roDcOss?p=preview
上面的Plunker使用angularAMD
簡化了RequireJS的使用。 有關更多信息,請訪問:
http://marcoslin.github.io/angularAMD/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.