[英]Load angular module at runtime with/without ocLazyLoad
我有一些模塊要根據某些條件在運行時加載。 目前,我正在使用ocLazyLoad模塊,但是我所加載的模塊根本無法工作。 一切正常,沒有拋出任何錯誤。
我首先聲明我的主模塊
var app = angular.module('myApp',['oc.lazyLoad'])
app.config(['$ocLazyLoadProvider',function(){
modules : [{
name : 'mod1',
files : [CDN-Path]
}]
}]);
然后在我控制器的某個地方
app.controller('c',function($ocLazyLoad){
$ocLazyLoad.load('mod1').then(function(){
console.log('module loaded!');
});
})
我在已解決的承諾中真正做到的是,我在ui-router中注冊了一個新狀態,並且在該狀態下,我使用了mod1
定義的一些指令,但是它們根本不起作用。 加載模塊后是否必須執行進一步的初始化?
您可以在查看之前延遲加載任何模塊/指令/控制器/ javascript( 以及jquery ),如下所示:
angular.module('app', ['ui.router', 'oc.lazyLoad']).config(['$stateProvider', '$ocLazyLoadProvider', function ($stateProvider, $ocLazyLoadProvider) {
$ocLazyLoadProvider.config({
modules : [{
name : 'TestModule',
files : ['js/TestModule.js', 'js/AppCtrl.js']
}
]
});
$stateProvider.state('index', {
url : "/", // root route
views : {
"lazyLoadView" : {
controller : 'AppCtrl', // This view will use AppCtrl loaded below in the resolve
templateUrl : 'partials/main.html'
}
},
resolve : { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl : ['$ocLazyLoad', function ($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('TestModule');
}
]
}
});
}
]);
https://oclazyload.readme.io/docs/with-your-router
編輯帶有controller
和ui-bootstrap
延遲加載的Plunker示例: https ://plnkr.co/edit/pUq3b1TDkwdGQOftcWDL?p=preview
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.