基于路由组动态负载控制器 [英] Load controller dynamically based on route group
问题描述
是否可以根据路由组动态加载控制器、js 文件和模板?无效的伪代码:
$routeProvider.when('/:plugin', function(plugin) {templateUrl: 'plugins/' + 插件 + '/index.html',控制器:插件+'Ctrl',resolve: {/* 从 'plugins/' + plugin + '/controller.js' 加载 JS 文件 */}});
我见过很多这样的问题,但没有一个是基于路由组加载 js 文件/控制器的.
我在@calebboyd 的启发下设法解决了它,http://ify.io/lazy-loading-in-angularjs/ 和 http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx
使用http://dustindiaz.com/scriptjs
app.js
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {app.register = {控制器:$controllerProvider.register,指令:$compileProvider.directive,过滤器:$filterProvider.register,工厂:$provide.factory,服务:$provide.service};});
然后我注册按组加载控制器"路由.
$routeProvider.when('/:plugin', {模板网址:函数(rd){返回 'plugin/' + rd.plugin + '/index.html';},解决: {负载:函数($q,$route,$rootScope){var deferred = $q.defer();var 依赖项 = ['插件/' + $route.current.params.plugin + '/controller.js'];$script(依赖项,函数(){$rootScope.$apply(function() {deferred.resolve();});});返回 deferred.promise;}}});
controller.js
app.register.controller('MyPluginCtrl', function ($scope) {...});
index.html
...
Is it possible to load a controller, it's js file, and a template dynamically based on a route group? Psuedo code which doesn't work:
$routeProvider.when('/:plugin', function(plugin) {
templateUrl: 'plugins/' + plugin + '/index.html',
controller: plugin + 'Ctrl',
resolve: { /* Load the JS file, from 'plugins/' + plugin + '/controller.js' */ }
});
I've seen a lot of questions like this one but none that loads the js file/controller based on a route group.
I managed to solve it inspired by @calebboyd, http://ify.io/lazy-loading-in-angularjs/ and http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx
Using http://dustindiaz.com/scriptjs
app.js
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
});
Then i register the "load controller by group" route.
$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolve: {
load: function($q, $route, $rootScope) {
var deferred = $q.defer();
var dependencies = [
'plugin/' + $route.current.params.plugin + '/controller.js'
];
$script(dependencies, function () {
$rootScope.$apply(function() {
deferred.resolve();
});
});
return deferred.promise;
}
}
});
controller.js
app.register.controller('MyPluginCtrl', function ($scope) {
...
});
index.html
<div ng-controller="MyPluginCtrl">
...
</div>
这篇关于基于路由组动态负载控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!