我的任务是为大型 Angular 应用程序设置初始应用程序结构,我遇到了一些博客文章,基本上说一切都应该是指令(我大多同意),但我有一种感觉我已经采取了这个想法太远了..
我所得到的基本上是 - 当您导航到 portal
时ui-router 将从模板文件夹加载门户模板,实际模板中的所有内容是 <portal-view></portal-view
.. portalView
指令基本上整个 View 都包含在指令中。
路线
angular.module('portal').config([
'$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('portal', {
url: "/",
templateUrl: "templates/portal.tpl.html"
});
}]);
portal.tpl.html
<div class="container">
<portal-view></portal-view>
</div>
portalView指令
angular.module('portal').directive('portalView', function() {
return {
controller: 'portalController',
controllerAs: 'vm',
templateUrl: "/directives/portalView/portalView.tpl.html"
}});
portalView文件夹
- 门户 View
- portalView.controller.js
- portalView.js
- portalView.less
- portalView.tpl.html
在我看来,这似乎是一个好主意,但当我们开始向应用程序添加更多 View 时,我可能会觉得它变成了一件苦差事,但我希望一些有 Angular 的专业人士会告诉我这是最好的方法:)
任何帮助、建议和链接将不胜感激!
最佳答案
对我来说,组件化 View 并将其放入指令中似乎是一个聪明的主意。如果发生的话,这也将简化向另一个路由器的迁移。
portal.tpl.html
如果您打算遵循这种做法,则没有必要,template: '<portal-view></portal-view>'
就足够了。但如果您计划使用模板来加载 css 和 js 资源(在模板中使用脚本并不直接,但这是可能的),请不要拒绝它,它会非常适合该方案。
关于angularjs - 这是指令的正确用法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29815512/