Angular：如何拆分（划分）控制器的脚本？ [复制]
Posted
技术标签:
【中文标题】Angular：如何拆分（划分）控制器的脚本？ [复制]【英文标题】：Angular: How to split (divide) controller's script? [duplicate] 【发布时间】：2015-08-24 06:21:23 【问题描述】：我最近刚刚使用 Angular 构建了一个基于 Web 的应用程序。我真的很喜欢角度处理模型-视图-控制器的方式，所以我构建了我的控制器来处理按钮单击事件、日期选择器更改事件等，同时业务逻辑由模型控制。问题是：我放入视图中的按钮或控件越多，我的控制器脚本就越大。
例如：如果我有 2 个按钮，我的控制器将如下所示：
$scope.onBtn1Clicked = function()
$scope.onBtn2Clicked = function()
那么，如果我还有 10 个按钮呢？ 10 更多功能 ? 我很清楚 Angular 的指令，但如果我只使用一次，我不想编写指令。 所以我认为最好将我的控制器拆分/划分为几个“子控制器”文件并将它们加入我的“主控制器”中。
可以吗？或者有人有其他解决方案吗？ 谢谢
PS：我知道How to create separate AngularJS controller files?。但这是不同的：我已经将我的控制器分成了几个文件，所以我的应用程序中的一个页面有一个控制器。我遇到的问题是那些控制器变得如此庞大且无法维护
【问题讨论】：
【参考方案1】：这取决于：
如果函数控制某些元素的行为，它应该在directive内
如果函数包含一些独立的逻辑，它应该在service（或工厂或提供者）内
如果函数包含业务逻辑，它应该controller
另外：如果某些逻辑可以分离，则需要将其放入子controller（指令或服务）
【讨论】：
我猜你是说我应该写指令。假设我有一个包含一些面板/部分的页面，每个都有自己的指令。那么，如果这些指令变得如此之大怎么办。我应该将它们再次拆分为许多较小的指令吗？我只想知道处理我遇到的这个大项目问题的最佳 Angular 实践是什么 也感谢您提供上面有关服务的文章链接。伟大而清晰的教程！ @denny yap 你理解正确，你应该使用指令并将它们拆分然后需要它 好吧..那我需要写很多指令和控制器，所以我想我的问题已经在这里回答了***.com/questions/20087627/…谢谢！【参考方案2】：是的，当然，您可以嵌套控制器
控制器
myApp.controller('MainController', ['$scope', function($scope)
$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';
]);
myApp.controller('ChildController', ['$scope', function($scope)
$scope.name = 'Mattie';
]);
myApp.controller('GrandChildController', ['$scope', function($scope)
$scope.timeOfDay = 'evening';
$scope.name = 'Gingerbread Baby';
]);
和标记
<body ng-app="app">
<div ng-controller="MainController">
<p>Good timeOfDay, name!</p>
<div ng-controller="ChildController">
<p>Good timeOfDay, name!</p>
<div ng-controller="GrandChildController">
<p>Good timeOfDay, name!</p>
</div>
</div>
</div>
</body>
Plunker demoExplanation
【讨论】：
您的演示不起作用，它只是一个通用的“编辑”链接 @CharlyDelta 谢谢，更新了:) @evc：如果我想共享可通过所有“子”控制器访问的变量和函数怎么办？以及 Dependency 怎么样，比如 MainController 必须依赖 GrandchildController ？ @denny 很好，然后所有控制器都分开了。如果您通过服务thinkster.io/a-better-way-to-learn-angularjs/services在控制器之间共享数据，那很好 @denny 看ChildController控制器，它没有$scope.timeOfDay，所以它会从MainController继承它以上是关于Angular：如何拆分（划分）控制器的脚本？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 Angular、Karma 和 Webpack 的单独文件拆分代码覆盖率？
如何在 Angular 2 应用程序上使用 webpack 进行代码拆分？