简述在Augluar 写 controller逻辑时，需要注意什么？
参考回答
在AngularJS中编写controller逻辑时，需要注意以下几点：
- 保持控制器的职责单一
控制器应该专注于处理视图逻辑，避免过多的业务逻辑和数据操作，复杂逻辑可以放在服务中。 -
避免直接操作DOM
控制器不应该直接操作DOM，DOM操作应通过指令或服务完成。 -
使用
$scope或controller as语法
使用controller as语法可以提升代码可读性，避免$scope污染全局作用域。 -
避免在控制器中引入过多依赖
控制器只应注入必要的服务，避免引入过多不相关的依赖。 -
清理资源
在控制器销毁时（$scope.$on('$destroy')），清理事件监听器和其他资源以避免内存泄漏。
详细讲解与拓展
1. 职责单一原则
问题：如果控制器中混入大量的业务逻辑或数据操作，会导致代码难以维护。
解决方案：
– 将复杂逻辑提取到服务或工厂中。
– 控制器只负责协调视图和模型之间的交互。
示例：
将数据操作提取到服务中：
app.service('dataService', function(http) {
this.getData = function() {
returnhttp.get('/api/data');
};
});
app.controller('MainController', function(dataService) {
var vm = this;
dataService.getData().then(function(response) {
vm.data = response.data;
});
});
2. 避免直接操作DOM
问题：直接操作DOM会破坏Angular的双向绑定机制，降低代码的可测试性。
解决方案：
– 使用Angular的内置指令（如ng-show、ng-hide）。
– 如果需要复杂的DOM操作，创建自定义指令。
示例：
避免这样写：
document.getElementById('myDiv').style.display = 'none';
改为：
<div ng-show="isVisible">Content</div>
3. 使用controller as语法
问题：传统的$scope语法容易导致作用域污染，尤其是在嵌套控制器时。
解决方案：
– 使用controller as语法，可以直接绑定控制器到this，避免作用域冲突。
示例：
传统写法：
app.controller('MainController', function(scope) {scope.message = 'Hello';
});
推荐写法：
app.controller('MainController', function() {
var vm = this;
vm.message = 'Hello';
});
使用：
<div ng-controller="MainController as main">
{{ main.message }}
</div>
4. 避免过多依赖
问题：引入不必要的依赖会使控制器臃肿，增加维护难度。
解决方案：
– 只注入当前控制器所需的服务。
– 如果某个服务在多个控制器中使用，考虑将其拆分为单独的服务或工厂。
5. 清理资源
问题：如果控制器中添加了事件监听器或定时器，未在销毁时清理，可能导致内存泄漏。
解决方案：
– 通过$scope.$on('$destroy')清理事件监听器或其他资源。
示例：
app.controller('MainController', function(scope) {
var eventListener =scope.on('someEvent', function() {
console.log('Event triggered');
});scope.on('destroy', function() {
eventListener(); // 解除事件绑定
});
});
其他注意事项
6. 保持控制器轻量化
- 控制器只处理视图逻辑，避免同时处理数据获取、业务规则等操作。
- 配合服务（
service、factory）分担数据和业务逻辑。
7. 使用$timeout和$interval谨慎
- 如果需要使用定时器，确保在控制器销毁时清理它们。
8. 测试友好性
- 遵循Angular的依赖注入机制，使控制器更容易被单元测试。
9. 数据绑定优化
- 使用一次性绑定（
::）优化性能，避免不必要的双向绑定：<h1>{{ ::message }}</h1>
总结
编写Angular控制器逻辑时，应始终关注代码的职责分离、性能优化和资源管理。通过将复杂逻辑转移到服务中，使用controller as语法，以及避免直接操作DOM，可以提升代码的可维护性和可测试性。保持控制器的轻量化是编写高质量Angular应用的重要原则。