angularJS實踐過程當中出現的問題總結

同名服務

　　在一次項目裏，以前是同事寫的。我有一次在異步獲取服務器上的數據時，習慣把api地址寫在一個服務Store裏，可是程序老是返回Store.api.get()裏的get is undefined。知道確定是Store.api爲空形成的緣由；可是以爲應該是沒有問題的纔對，最後看到在頁面裏又從新定義了一次Store服務，因此形成了覆蓋。

myApp.factory('Store',function(){
    return{
        name:'zhang',
        age:25
    }
})
myApp.factory('Store',function(){
    return{
        name:'dong',
        age:27
    }
})　　//服務同名了，因此只有最後一次的Store服務有效

建議：在項目大的時候，將項目邏輯分紅多個模塊，在每一個模塊裏寫服務和邏輯。而後在注入到其餘模塊中，便於測試和邏輯清晰；

在查找錯誤上，使用先看看服務對象的輸出

對象複製

　　若是將一個對象賦值給其餘對象，不管賦值多少次，最後被賦值的對象都來自同一個對象的引用。

var a={}; 
var b=a; 
b.name='zhang'; 
a.name    //"zhang"

var a={};
var b={};
a==b    //false

在angularJS中，若是不想要引用的傳遞，可是又想得到對象裏的數據。可使用angular.copy()，使用forEach() 方法，把對象裏的屬性和值從新複製到一個新的對象上；可是又不等於被賦值的對象； var關鍵詞的做用就是在內存中新開一塊地址吧

ng-select

angularJS中的select不像HTML代碼裏本身手動添加option，畢竟使用了指令，擴展了select的功能。

select元素使用ng-options生成下拉選項，只須要提供一個數組給ng-options就好，若是須要提供默認值，須要給select的綁定模型變量賦值

使用ng-options的時候必須給select綁定模型變量ng-model，不然會出錯誤：[$compile:ctreq] http://errors.angularjs.org/1.5.2/$compile/ctreq?p0=ngModel&p1=ngOptions

<div ng-controller="myController">
    <select ng-model="glass" ng-options="o.op as o.type for o in operation">
    </select>
</myController>
<script>
myApp.controller('myController', function($scope){
    $scope.operation=[
        {type: '大於', op: '>'},
        {type: '大於等於', op: '>='},
        {type: '小於等於', op: '<='},
        {type: '等於', op: '='},
        {type: '小於', op: '<'},
        {type: '不等於', op: '<>'},
        {type: '包含', op: ',like'},
        {type: '不包含', op: 'notlike'}
    ];
})
</script>

可是你查看源代碼就會看到，angularJS自動在option的value屬性裏把value值前加了字段類型

<option label="大於等於" value="string:>=">大於等於</option>

也能夠本身手動添加option

<select ng-model="glass">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

Note：麻煩就是手動添加的option的value都是字符串，初始化的時候，$scope.glass="必須是引號引發來的字符串"; 可是ng-select就比較靈活了，使用ng-options就能夠給value傳基本類型（數字，字符串，布爾值）和對象類型，在初始化的時候賦對應類型的值，調用的時候也獲取的是對應類型的數據；

<select ng-model="glass" ng-options="o.id as o.name for o in num" class="ng-pristine ng-valid ng-not-empty ng-touched">
    <option value="?" selected="selected"></option>
    <option label="one" value="boolean:true">one</option>
    <option label="two" value="boolean:false">two</option>
</select>

<select ng-model="glass" ng-options="o.id as o.name for o in num" class="ng-pristine ng-untouched ng-valid ng-not-empty">
    <option value="?" selected="selected"></option>
    <option label="one" value="number:1">one</option>
    <option label="two" value="number:2">two</option>
</select>

添加同一個對象

在表格中，爲表格新建一行，並提供一個默認值屬性字段

<tr ng-repeat="user in users">
    ...
</tr>

直接push一個對象到users就好了，若是在行中使用$index，可是push到users裏的對象是同一個對象（同一個對象的引用）就會出錯

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys

能夠根據官方的解決方案，使用ng-repeat="user in users track by $index"；