angular使用總結

一．是否有必要加入模塊化框架

1.Reqruiejs seajs的主要做用

（1）模塊化，讓代碼易於維護。

1. angular自己就是mvc，模塊化很清晰，因此這點用不到requirejs

（2）能夠按需、並行、延時載入js庫

1. 當js文件比較多時，angular會一次請求全部的js文件，浪費流量，此時模塊化框架就頗有必要了。

2.http://www.cnblogs.com/kenkofox/p/4643760.html（淺談HTML5單頁面架構（一）——requirejs + angular + angular-route

二．是否有必要加入jquery

1.dom操做：angular推薦dom操做在自定義指令裏面，在controller裏面操做dom對性能有影響，angular自帶jqlite對通常的dom操做足夠用。

2.Bootstrap依賴jquery：能夠用Bootstrap的css功能加angular-ui的js組件。

3.http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background（介紹爲何angular不須要引入jquery）

三．性能優化

1.dom操做，儘可能不要在controller裏操做都沒，有dom操做的儘可能在自定義指令的link函數中。

2.$scope.$apply()vs$scope.$apply(function(){})

 DOM事件、setTimeout、XHR時必須須要調用。

 

function$apply(expr) {
　　try {
　　　　return$eval(expr);
　　} catch(e) {
　　　　$exceptionHandler(e);
　　} finally {
　　　　$root.$digest();
　　}
}

　　

複製代碼它會捕獲全部的異常而且不會再拋出來，最後都會調用$digest()方法。

總之儘可能使用$scope.$apply(function(){})

3.ng-show vs ng-if

 Ng-show 單純的隱藏dom元素 ng-if清楚dom元素，ng-if性能要好一些。

4.ng-repeat

Error: [ngRepeat:dupes]

.當數組中有兩個以上數字重複時會報這個錯，能夠經過item in items track by $index解決

當數組部分數據發生變化時，若是沒有track by，angular會刷新和此數據有關的全部dom元素，而加了track by後angular只會刷新數據有變化的dom元素，減小沒必要要渲染。

5.減小沒必要要的雙向綁定，最好不要超過2000個數據雙向綁定。{{:: mes}}

6.減小事件廣播，使用雙向數據綁定或共享service等方法來代替。 

7.http://ourjs.com/detail/54a0b5cd71caa3b40a000001（angular在AngularJS在大型單頁面應用中的性能優化）

四．遇到的坑

1.路由

 虛擬路由a下子路由b的變化不能控制和a一級的ui-view中的內容。

2.點擊某個標籤控制路由跳轉有兩種方式以下

（1）經過a標籤的href屬性跳轉  <a href="#cart">購物車</a>

（2）經過ui-router的方式跳轉  <a ui-sref="cart">購物車</a>

 兩種在router.js作以下編碼均可以跳轉

 

$stateProvider
        .state("cart", {
            url: "/cart",
            templateUrl: "template/cart.html",
        
        })；

 

　　可是當改變router.js中url爲「/cart1」時第一種跳轉方式失效，第二種依然能夠跳轉。緣由是第一種只能對應固定的url。第二種是對象cart這個狀態。因此在實際應用中不要使用第一種跳轉方式。

3.controller中的代碼執行兩遍，緣由是在模板和路由中同時設定了controller，以下。

//cart.html
<div ng-controller="cartCtr">我是購物車模板文件</div>

//router.js
$stateProvider

        .state("cart", {
            url: "/cart",
            templateUrl: "template/cart.html",
　　　　　　　controller:"cartCtr"
        
        })；

　　

 

4.開發環境vs生產環境

   （1）.開發環境下若是使用壓縮版的angular若是某個js文件報錯很難找到，全部開發環境下務必使用未壓縮版本。

  （2）.上線應該用gulp對代碼進行壓縮混淆合併等處理，減少文件體積，減小跟服務器請求資源的次數。

未完待續

 自定義鼠標右鍵指令

 

//指令裏面
angular.directive('myRightClick', function($parse) {
    return function(scope, element, attrs) {
        element.bind('mousedown', function(event) {
            if(event.button==2){
                scope.$eval(attrs.myRightClick);
            }

        });
    };
});
//html 
 <div  my-right-click="fn()"></div>
//controller 
$scope.fn=function(){
console.log(111);
}

　　5.$state 傳參

//路由配置時加上params參數

$stateProvider.state('login', {

            url: '/login',
            params:{'isScanning':false},
            views: {
                'webIndexView': {
                    templateUrl: 'pages/login.view.html',
                    controller: 'loginController'
                }
            }
 })//跳轉路由時$state.go('login',{'isScanning':true});//controller中注入$stateParamsconsole.log($stateParams.isScanning);