angularJS编码实践学习

AngularJS 是制做 SPA(单页面应用程序)和其它动态Web应用最普遍使用的框架之一。我认为程序员在使用AngularJS编码时有一个大的列表点应该记住，它会以这样或那样的方式帮助到你。下面是一些我遵照的最佳实践建议，同时也想推荐给大家。 我坚信有更多的功能也应该是这份列表的一部分，我邀请大家都来提建议或者在下面评论，从而使这个成为完整的最佳实践指南。

1、依赖注入

1. 依赖注入是AngularJS框架最好的特性之一，咱们应该常用它。当咱们须要对咱们的应用程序进行测试用例覆盖时，它将真正的起到帮助。

2. 为依赖提供别名，这样他们不会在（JS代码）压缩过程当中重命名，由于在AngularJS依赖是经过命名来实现的(注：AngularJS经过控制器构造函数的参数名字来推断依赖服务名称的)。

angular.module(‘myApp’).controller("MyController", ["$scope&",  "MyService",function($scope, MyService) {

    // controller logic

    }

   ]);

2、做用域

1. 在templates（模板）中scope（做用域）按只读对待。这就是说即便AngularJS容许咱们在templates中编写代码修改scope,咱们必须很是谨慎或者就不该该作。

2. 在controllers（控制器）中scope按只写对待。这就是说一个controllers负责使用另外一个组件,就像一个服务,获取template 将要显示的数据和把数据写到scope的一个对象中。

• 做为一个经验法则,咱们必须老是在绑定时使用”.“。这就是说咱们应该绑定到scope的对象,而不是直接的属性,不然可能会在子$scope致使意外的行为,由于$scope基于Java-script的原型继承机制。
• 下面的代码咱们能够看到，superhero是scope上一个经过Superhero服务返回的对象，同时相同的对象被用来绑定在view（视图）上。

XHTML

<div class="form-group">

    <label class="control-label" for="name">Super Power</label>

       <div class="controls">

      <input type="text" data-ng-model="superhero.superPower">

</div>

JavaScript

$scope. superhero = Superheros.get({

    superheroId: $stateParams.superheroId

)};

• 
  Scope 的目的是引用 model，而不是成为 model。
• Model是咱们的JavaScript对象

3、验证

1. 在form（表单）标签中使用“novalidate” 属性来使用 AngularJS验证同时关闭HTML5验证。

XHTML

<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate>

CSS2. 咱们可使用angular classes（css类）来改变可见性和验证控件的状态。

.ng-valid.ng-dirty{

    border-color: #FA787E;

}

.ng-invalid.ng-dirty{

    border-color: #FA787E;

}

4、内存 – 任务管理

• AngularJS在销毁一个scope和把一个scope从它的父级移除以前会广播一个$destroy事件。监听这个事件对清理任务和资源是相当重要的,不然可能会继续消耗内存或CPU。老是注册‘destroy‘事件来删除任何易于内存泄漏的代码。

做为一个例子,下面的控制器在1秒的间隔不断更新一个mode（模型）l值,这些更新将永远持续,即便在controller对应view消失了或者scope从父级上移除。若是用户来回导航到一个view来加载这个controller,每次导航将添加另外一个永远运行的计时器。

JavaScript

module.controller("MyController", function($scope, $timeout) {

    var onMyTimeout = function() {

        $scope.value += 1;

        $timeout(onMyTimeout, 100);

    };

    $timeout(onMyTimeout, 100);

    $scope.value = 0;

});

监听$destroy事件是中止计时器的一个机会。一种方法是取消由$timeout返回的promise（承诺）。

JavaScript

module.controller("TestController", function($scope, $timeout) {var onTimeout = function() {

    $scope.value += 1;

    timer = $timeout(onTimeout, 100);

};

    var timer = $timeout(onTimeout, 100);

    $scope.value = 0;

    $scope.$on("$destroy", function() {

        if (timer) {

            $timeout.cancel(timer);

        }
    });

});

5、事件 顶级做用域

1. 咱们应该只在当前屏幕的单页面应用程序的控制器中使用scope 事件进行通讯。若是咱们只须要共享数据,那么咱们应该考虑使用Services(服务)。

2. 当触发事件时,除非咱们须要把事件通知到咱们整个应用程序里的全部单个scope，不然咱们不须要在$rootScope触发事件。若是咱们只须要为子scope触发,则在当前的scope上$broadcast事件。父scope使用$emit获取当前scope事件。这也将缩短事件传播,而不是通过整个自上而下的流动。

3. Services 是在$rootScope监听事件获取通知的不二选择。这是由于services在咱们的应用程序中只初始化一次,并无获取它们本身的scope ,这将是很好。

4. 一般咱们不该该在$rootScope注册事件监听(除了service)。这是致使AngularJS应用程序产生bug的一个广泛缘由。这是由于当咱们在一个controller 的$scope上添加一个事件监听，而controller 被销毁(咱们导航离开页面,或关闭一个部分),监听一样被销毁。当咱们将它添加到$rootScope，同时导航离开一个controller,监听会保留并保持活动和触发。因此咱们必须从$rootScope手动取消监听,或者为了安全干脆就不在$rootScope上添加监听。可是若是咱们必须为$rootScope添加一个事件,不要忘记在controller的scope中将其清除。

var myEventHandler = $rootScope.$on("MyEvent", ‘My Data’);

      $scope.$on("$destroy", function() {

      myEventHandler();

});

5. 若是咱们知道只有一个监听器，并且你已经遇到了。咱们能够经过在传递给事件监听函数的事件对象上调用event.stopPropagation()来中止进一步的事件传播。

6、构建业务逻辑

1. Controllers 不该该引用DOM，而只是包含行为，使用Directives （指令）作DOM操做。

2. Services应该对view逻辑独立.

3. 不要与HTML打架，而是经过Directives扩展。

4. 最好是使用模块化的文件夹结构,这样咱们能够建立可重用的/可分发的组件。

7、通用规则

1. 对images使用ng-src 替代src。

2. 使用promise 来处理回调。AngularJS已经为它暴露了“$q”服务。许多AngularJS services返回promises:$http, $interval, $timeout。

3. 不要压缩angular.min.js 由于AngularJS团队已经经过预约义设置压缩了angular文件,若是咱们再压缩可能会产生破坏。因此直接使用。

4. 若是template (模板)缓存是必需的，使用$templateCache缓存html template。

5. 老是把第三方API的回调包裹到$apply，用来通知AngularJS关于环境的变化。

6. 若是咱们不想让用户在AngularJS加载以前显示HTML ，使用ng-cloak directive。

XHTML

<div class="session ng-cloak">..............content............</div>

.ng-cloak {

/* this will change to block when scope and angular is ready */

display:none;

}

7. 为了阻止任何冲突，不要在咱们本身的directives里使用“ng”前缀。建立你的自定义的。最好使用<my–component> ,由于 <my:component>在IE有时出错。

<my-component>

<my:component>

8. 在应用程序中为全局相关的事件使用$broadcast() , $emit() 和 $on()(好比用户身份验证或应用程序关闭)。若是咱们须要特定于模块,服务或小部件的事件，咱们应该选择Services,Directive Controllers等。

9. 不要使用自动关闭标签,由于有些浏览器不喜欢他们。使用“<product-title></product-title >”而不是“<product-title/>”。