AngularJS 是制作 SPA(单页面应用程序)和其它动态Web应用最广泛使用的框架之一。我认为程序员在使用AngularJS编码时有一个大的列表点应该记住，它会以这样或那样的方式帮助到你。下面是一些我遵守的最佳实践建议，同时也想推荐给你们。我坚信有更多的功能也应该是这份列表的一部分，我邀请你们都来提建议或者在下面评论，从而使这个成为完整的最佳实践指南。
一、依赖注入:
1. 依赖注入是AngularJS框架最好的特性之一，我们应该经常使用它。当我们需要对我们的应用程序进行测试用例覆盖时，它将真正的起到帮助。
2. 为依赖提供别名，这样他们不会在（JS代码）压缩过程中重命名，因为在AngularJS依赖是通过命名来实现的(注：AngularJS通过控制器构造函数的参数名字来推断依赖服务名称的)。
|
1
2
3
4
5
6
|
angular.module(‘myApp’).controller('MyController',['$scope','MyService',function($scope,MyService) {
// controller logic
}
]);
|
|
1
2
3
4
5
|
<divclass="form-group">
<labelclass="control-label"for="name">Super Power</label>
<divclass="controls">
<inputtype="text"data-ng-model="superhero.superPower">
</div>
|
|
1
2
3
|
$scope. superhero = Superheros.get({
superheroId: $stateParams.superheroId
)};
|
|
1
|
<formname="reviewForm"ng-controller="ReviewController as reviewCtrl"ng-submit="reviewCtrl.addReview(product)"novalidate>
|
|
.ng-valid.ng-dirty{
border-color:#FA787E;
}
.ng-invalid.ng-dirty{
border-color:#FA787E;
}
|
|
1
2
3
4
5
6
7
8
9
|
module.controller("MyController",$timeout) {
varonMyTimeout =function() {
$scope.value += 1;
$timeout(onMyTimeout,100);
};
$timeout(onMyTimeout,100);
$scope.value = 0;
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
module.controller("TestController",$timeout) {varonTimeout =function() {
$scope.value += 1;
timer = $timeout(onTimeout,100);
};
vartimer = $timeout(onTimeout,100);
$scope.value = 0;
$scope.$on("$destroy",function() {
if(timer) {
$timeout.cancel(timer);
}
});
});
|
|
<strong> </strong>
varmyEventHandler = $rootScope.$on('MyEvent',‘My Data’);
$scope.$on('$destroy',function() {
myEventHandler();
});
|
|
<divclass="session ng-cloak">..............content............</div>
.ng-cloak {
/* this will change to block when scope and angular is ready */
display:none;
}
|
|
1
2
|
<my-component>
<my:component>
|