AngularJS 基于路由动态加载控制器和模板

Posted 2023-02-27

【中文标题】AngularJS 基于路由动态加载控制器和模板

【英文标题】：AngularJS Dynamically Load Controller and Template based on Route

【发布时间】：2018-07-17 02:44:23

【问题描述】：

我正在尝试根据路由（在 Angular 1.6 中）动态加载模板和控制器，从当前目录架构中提取。

应用程序 |__login.module.js |__home.controller.js |__login.factory.js |__home.view.html |__404.view.html |__index.html

目前，以下代码可以提取正确的模板，但控制器不会加载：

angular.module('common.auto-loading-routes', []).config(function($routeProvider) 函数getTemplate（路由参数） var route = (routeParams.current) ？ routeParams.current.params.route : routeParams.route; var directory = route.split('/'); 目录 = directory.filter(function(entry) return entry.trim() != ''; ); var page = 目录[directory.length - 1]; 目录.splice(-1,1); 目录 = directory.join('/'); 返回目录+'/'+页面+'.view.html'; 函数获取控制器（路由参数） //我觉得这里需要promise，但是不知道怎么写 routeParams = routeParams.route.split('/').join('.'); 返回 routeParams + '控制器'; $routeProvider.when('/:route*', 控制器：函数（$routeParams） //不起作用 返回 getController($routeParams); , templateUrl: function($routeParams) //有效 返回 getTemplate($routeParams); , 解决： 检查：函数（$route，$http，$location） return $http.get(getTemplate($route)).then(function(response) 如果（响应状态！== 404） 返回真； 别的 $location.path('404'); ); ).otherwise('/404'); );

我知道控制器需要出现在应用程序的开头，但我无法用promise 语句编写正确的resolve。

有人可以通过一个简单的承诺来帮助我解决问题，该承诺会根据路由返回控制器名称的字符串吗？

【问题讨论】：

控制器实际上必须向模块注册，而不仅仅是加载。有项目尝试这样做，例如oclazyload。

感谢@Claies，通过将控制器标记属性添加到 html 视图，我能够自己解决。但我仍然会研究其他项目和ui-route 以及真正的延迟加载。

【参考方案1】：

我能够通过在路由中完全不包含控制器来使其工作。相反，我将 ng-controller 属性放在正在加载的视图中。

成功了！

angular.module('common.auto-loading-routes', []).config(function($routeProvider) 函数getTemplate（路由参数） var route = (routeParams.current) ？ routeParams.current.params.route : routeParams.route; var directory = route.split('/'); 目录 = directory.filter(function(entry) return entry.trim() != ''; ); var page = 目录[directory.length - 1]; 目录.splice(-1,1); 目录 = directory.join('/'); 返回目录+'/'+页面+'.view.html'; $routeProvider.when('/:route*', templateUrl: function($routeParams) //有效 返回 getTemplate($routeParams); , 解决： 检查：函数（$route，$http，$location） return $http.get(getTemplate($route)).then(function(response) 如果（响应状态！== 404） 返回真； 别的 $location.path('404'); ); ).otherwise('/404'); );

在那个视图的 HTML 中，我只是把

ng-controller="home.controller"

（或任何合适的控制器）