2.Angular框架-$watch，建立控制器的方式，依賴注入原理，ng-repeat,ng-class

1.1. 在Angular中使用"jQuery"

• 語法：angular.element
• Angular中操做的功能稱爲：jqLite（輕量級jQuery）

1.1.1. 示例

// 獲取 jqLite 對象
var $ = angular.element;
$(document).ready(function() { });

1.1.2. 注意點

• 1 jqLite 中只實現了jQuery的部分功能
• 2 jqLite中選擇器只能是DOM對象
• 3 儘可能使用ng中提供的功能

1.2. AngularJS的通常開發流程

• 1 引入 angular.js 文件
• 2 建立模塊：angular.module('模塊名', [])
• 3 在頁面中指定ng-app="模塊名"，告訴NG管理指定的頁面部分
• 4 建立控制器：模塊名.controller('控制器名', function() {})
• 5 在頁面中指定ng-controller="控制器名"，指定管理內容的控制器
• 6 建模（根據頁面原型抽象出數據模型），最終獲得視圖模型（ViewModel）
• 7 將抽象好的數據，添加到 $scope中，即：暴露數據和行爲給視圖
• 8 在頁面中使用 ng-model 或者 {{}} 拿到並綁定數據

1.3. 模塊的劃分

• 1 按照模塊劃分（推薦）
• 2 按照文件類型劃分

1.3.1. 按照模塊劃分

• 根據項目中具體的功能模塊進行劃分
• 好比：登陸模塊、註冊模塊、編寫博客 等等不一樣的功能模塊
• 每一個功能模塊都有本身的 Model View Controller 對應的文件
• 開發過程當中，每一個人完成一個獨立的模塊

1.3.2. 按照文件劃分

• 根據文件的功能進行劃分
• 將全部的文件放到3個文件夾中：M、V、C

1.4. 控制器（controller） -建立方式

1.4.1. 低版本（1.2.29以前）

• 使用全局函數建立控制器，會形成：全局污染

1.4.2. 推斷式

angular
    .module('testApp', [])
    .controller('DemoController', function($scope) {

    });

1.4.3. 安全方式建立

• 問題：項目上線的時候，會進行代碼壓縮，$scope會被修改
• 解決：代碼會被壓縮和混淆，可是 字符串 是不會被壓縮的

1.4.3.1. 建立控制器

• 優點：根據指定的參數名直接獲取到想要的參數，而非根據參數的順序

// 第一個參數：控制器的名稱
// 第二個參數：數組，最後一項表示回調函數，除此以外其餘的參數表示依賴的參數列表
app.controller("DemoController", ["$scope", "$log", function($scope, $log) {
    $log.log("打印日誌了");
}]);

1.4.4. 面向對象方式

• 特色：將回調函數看成構造函數來使用，直接使用this添加數據
• 也能夠經過 $scope.age 添加數據
• 注意：在html中使用指令的時候，格式變爲：DemoController as demo

<div ng-app="testApp" ng-controller="DemoController as demo">
    <p>{{demo.name}}</p>
</div>

<script>
angular.module('testApp', [])
    .controller('DemoController', ['$scope', function($scope) {
        // 添加模型屬性
        this.name = 'Jack';
    }]);
</script>

1.5. 依賴注入（DI -Dependency injection）

• 目的: 簡化傳入參數的操做，防止代碼壓縮致使參數沒法使用的問題

1.5.1. 原理分析

• 1 獲取到依賴項(參數)列表
• 2 查找依賴項所對應的對象
• 3 代碼執行時，將其注入

/**
 * [提取參數]
 * @param  {Function} fn [回調函數]
 * @return {[type]}      [參數列表數組]
 */
function extractArgs(fn) {
    var r = /^[^\(]*\(\s*([^\)]*)\)/;
    var args = r.exec( fn.toString() );
    return args[1].split(',');
}

extractArgs(function($scope, $log) {});
// 方法的返回值：["$scope", "$log"]

• 參考文章：Angular依賴注入分析

1.6. 解決頁面閃爍問題

• 方式一： 將引用angularjs文件放到head中
• 方式二： 使用 ng-bind 指令
• 方式三： 使用 ng-cloak 指令

1.6.1. ng-bind 指令

• 做用：設置元素的 textContent，功能相似於：{{}}
• 注意：只能在雙標籤中使用（由於只有雙標籤纔有 textContent 屬性）
• 注意： ng-bind指令沒法輸出 html 內容（即：實現innerHTML的功能）

<p ng-bind="name"></p>

1.6.2. ng-cloak 指令

• 做用：用來解決表達式閃爍問題
• 原理：angular在加載完成後會移除全部帶有"ng-cloak"的樣式
• 使用場景：頁面中存在大量表達式

<style>
    .ng-cloak {
        display: none;
    }
</style>

<p class="ng-clock">{{name}}</p>

1.7. 經常使用指令介紹

• 指令：就是一個命令，讓 Angular 按照咱們預先設置好的規則辦事

1.7.1. ngSanitize 模塊

• 語法： ng-bind-html="<div></div>"
• 做用： 在頁面中輸出 html內容
• 注意： 這個模塊是一個獨立的模塊（須要單獨下載，並在頁面中引用）
• 安裝： npm install angular-sanitize

<div ng-bind-html="name"></div>
<script src="angular-sanitize.js"></script>
<script>
    // 引入 ngSanitize 模塊
    var app = angular.module("testApp", ["ngSanitize"]);
    app.controller("testController", ["$scope", function($scope) {
        $scope.name = "<h1>雨啊雨</h1>";
    }]);
</script>

1.7.2. ng-repeat 指令

• 做用：遍歷集合中的數據，爲集合中的每條數據建立一個當前元素（即，帶有指令的元素）
• 說明：功能相似於 for-in 循環

<ul>
    <li ng-repeat="item in datas"></li>
</ul>

<script>
app.controller('TestController', ['$scope', function($scope) {
    $scope.datas = [
        {name: 'jack', age: 19},
        {name: 'tom', age: 21},
        {name: 'rose', age: 22}
    ];
}]);
</script>

• 使用 track by $index 解決，數據重複的問題

<ul>
    <li ng-repeat="item in datas track by $index"></li>
</ul>

1.7.2.1. ng-repeat 的循環項屬性

• $odd/$even，用來表示當前項的奇偶性，類型爲：布爾值
• $first/$last/$middle，用來表示當前項的位置，類型爲：布爾值
• $index，用來表示當前項的索引號，從0開始計算

<ul>
    <!-- 隔行變色效果的實現 -->
    <li ng-repeat="item in datas" class="{{$odd?'red':'green'}}"></li>
</ul>

1.8. ng-class指令

• 語法：ng-class="expression"，expression是model中的一個數據或表達式
• 做用：根據 expression 的值，給當前元素添加指定的類

1.8.1. 對象值

• 示例：ng-class="{red: $odd, green: $even}"
• 解釋：ng-class經過指定一個對象（對象字面量），鍵爲：類名，值爲：布爾值
• 做用：判斷對象中屬性的值，若是爲true則添加與該屬性名相同的類，不然不添加

1.8.2. 模型中的變量

• 示例：ng-class="type"

<div ng-class="type"></div>
<script>
    app.controller("demoController", ["$scope", function($scope) {
        $scope.type = "red";
    }]);
</script>

1.9. 其餘指令

1.9.1. ng-hide/ng-show 顯示和隱藏（知道）

• 做用：控制當前元素的展現和隱藏，類型爲：布爾值
• 語法： ng-show="布爾值"

<div ng-show="isShow"></div>

1.9.2. ng-if

• 做用：控當前元素的顯示或隱藏狀態，這裏的隱藏指的是：頁面中不存在當前元素
• 語法：ng-if="布爾值"

<div ng-hide="false"></div>

1.9.3. ng-switch (瞭解)

• 做用：相似於js中的switch-case，但通常配合ng-switch-when來使用

<div ng-switch="name">
    <div ng-switch-when="jack">我是jack</div>
    <div ng-switch-when="tom">我是tom</div>
    <div ng-switch-when="rose">我是rose</div>
</div>
<script>
    $scope.name = "jack";
</script>

1.9.4. 表單元素的指令

• ng-checked: 複選框是否選中
• ng-selected: 下拉框是否選中
• ng-disabled: 是否禁用

• ng-readonly: 是否只讀

• 特色：都是單向數據綁定，只能實現從數據到視圖的綁定

ng-checked / ng-selected 能夠使用 ng-model 代替, 可是要注意ng-model是雙向綁定

1.9.5. 事件指令

• 做用：Angular中用來綁定事件的

ng-click / ng-submit / ng-dblclick / ng-blur / ng-focus / ng-change

1.10. 兼容HTML5標準的指令

• 說明：HTML5中的自定義屬性規定使用 data- 做爲屬性的開頭，

  angluar中的全部指令徹底支持HTML5中的語法