angular入門2

AngularJS -入門2

在Angular中使用”jQuery”

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

示例

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

注意點

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

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 按照模塊劃分（推薦）
• 2 按照文件類型劃分

按照模塊劃分

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

按照文件劃分

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

控制器（controller） -創建方式

低版本（1.2.29之前）

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

推斷式

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

    });

安全方式創建

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

創建控制器

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

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

面向對象方式

• 特點：將回調函數當作構造函數來使用，直接使用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>

依賴注入（DI -Dependency injection）

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

原理分析

• 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依賴注入分析

解決頁面閃爍問題

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

ng-bind 指令

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

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

ng-cloak 指令

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

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

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

常用指令介紹

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

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>

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>

ng-repeat 的循環項屬性

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

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

ng-class指令

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

對象值

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

模型中的變量

• 示例：ng-class="type"

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

其他指令

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

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

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

ng-if

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

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

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>

表單元素的指令

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

• ng-readonly: 是否只讀

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

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

事件指令

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

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

兼容HTML5標準的指令

• 說明：HTML5中的自定義屬性規定使用 data- 作爲屬性的開頭，
  angluar中的所有指令完全支持HTML5中的語法