Angular 學習筆記（一）

時間 2019-12-11

標籤 angular 學習筆記欄目 AngularJS 简体版

原文原文鏈接

什麼是 Angular：html

Angular 是一個 JavaScript 框架，可經過 <script> 標籤添加到 HTML 頁面，而後經過指令擴展 HTML，且經過表達式綁定數據到 HTML 中前端

Angular 是爲了擴展 HTML 在構建應用時本應具有的能力而設計的。對於靜態文檔，HTML 是一門很好的聲明式的語言，express

但對於構建動態 WEB 應用，它無能爲力。因此，構建動態WEB應用每每須要一些技巧才能讓瀏覽器配合咱們的工做瀏覽器

注：粗淺地理解指令就是一些附加在 HTML 元素上的自定義標記（例如：ng-controller、ng-repeat 等這些原生的 HTML 所沒法識別的語句），app

表達式是一種相似 JavaScript 的代碼片斷，一般在視圖中以''的形式使用框架

Angular 與其餘一些模板比較：ide

One-Way Data Binding：絕大多數模板引擎系統採用的是把字符串模板和數據拼接，而後輸出一個新的字符串，函數

接着在前端將這個新的字符串做爲元素的 innerHTML 屬性的值spa

==》數據中的改變需從新和模板合併，而後再賦值給 DOM 元素的 innerHTML 屬性設計

Two-Way Data Binding：Angular 編譯器直接使用 DOM 爲模板，它的視圖和做用域數據模型的綁定是透明的

==》生成了穩定的 DOM 模板

注：DOM 元素實例和數據模型實例的綁定在綁按期間是不發生變化的，這意味着能夠在代碼中獲取這些 DOM 模板元素並註冊相應的

事件處理函數，而不用擔憂這個對 DOM 元素的引用會由於數據合併而產生變化

HTML 編譯的三個階段：

一、$compile 遍歷 DOM 節點，匹配指令：

　　　　發現某元素匹配一個指令，那麼指令就被添加到指令列表中（該列表與 DOM 元素對應），一個元素可能匹配到多個指令

注：當一個頁面加載時，瀏覽器自動將 HTML 解析爲 DOM 樹！Angular 的編譯是在 DOM 節點上發生而非字符串，當手動調用 $compile 時，

若給它傳遞一個字符串則會報錯，需用 angular.element 將字符串轉化爲 DOM

二、當全部指令都匹配到相應的元素時，編譯器按指令的 priority 屬性來排列指令編譯順序：

　　　　根據順序依次執行每一個指令的 compile 函數，每一個 compile 函數有一次更改該指令所對應的 DOM 模板的機會，接着，每一個 compile 函數

　　　　返回一個 link 函數，這些函數又構成一個「合併的」鏈接函數，它會調用每一個指令返回的 link 函數

三、$compile 調用第 2 步返回的鏈接函數，將模板和對應的做用域鏈接：

　　　　依次調用鏈接函數中包含的每一個指令對應的 link 函數，進而在各個 DOM 元素上註冊監聽器以及在相應的 scope（做用域）中設置 $watch

==》造成一個做用域和 DOM 綁定的實時視圖，任一發生在已通過編譯的做用域上的數據模型的變化都反映在 DOM 中

注：priority 設置指令的優先級，大的先執行（默認爲 0，而 ng-repeat 默認爲 1000），$watch 實現頁面隨 model（模型）變化而及時更新

　　DOM 即 Document Object Model（文檔對象模型）

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<!--設置應用名稱爲 myApp，控制器爲 myCtrl-->
<div ng-app="myApp" ng-controller="myCtrl">
<!--ng-model 即爲模型，與 scope 中的數據綁定在一塊兒-->
    單價：<input type="number" ng-model="price">
    <br/>數量：<input type="number" ng-model="nums">
    <!--{{expression}} 這個就是表達式，它會計算 expression 的值-->
    <br/>應付：<label>{{price * nums}}</label>
</div>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope){
        $scope.price = 1;
        $scope.nums = 1;
    });
</script>
</body>
</html>