Angular 核心概念

module（模塊）

作用

• 通過模塊對頁面進行業務上的划分,根據不同的功能划分不同的模塊。
• 將重復使用的指令或者過濾器之類的代碼做成模塊，方便復用
• 注意必須指定第二個參數，否則變成找到已經定義的模塊
  • 請參照資料-備課代碼-20-module.html理解

語法

• 語法： angular.module('模塊名',[])
  • 第二個參數是個數組,這個數組里的每一個元素，是我們當前模塊依賴的其他模塊
  • 注意: 即便我們不依賴其他的模塊，也需要傳遞一個空數組
    因為如是不傳第二個參數的話，這個方法的作用就會變為獲取一個名為"模塊名"的模塊對象
  • angular.module('myApp'),是獲取一個名為myApp的模塊對象。
  • 我們需要給ng-app指令一個屬性值，這個值就是我們創建的模塊名:
  • 告訴anuglar,現在由我們自己創建的這個模塊來管理頁面。

controller（控制器）

作用

• 為應用中的模型設置初始狀態
• 通過$scope對象把數據模型或者函數行為暴露給視圖
• 監視模型的變化，做出相應的動作
  • 請參照資料-備課代碼-24-watch.html理解

語法

• 控制器是通過模塊對象來創建的:

  • 語法:

    var app = angular.module('模塊名',[])
    app.controller('控制器的名字',function($scope){
      // 在這個function里寫我們具體想要執行的代碼
      // $scope 就是用來存儲我們的數據模型.
    })
    

  • 我們需要在頁面上使用了數據模型的元素父級元素上加上ng-controller指令，並給這個指令一個屬性值，這個值就是我們創建的控制器名字。

控制器的注入方式

普通的定義控制器

var myModule = angular.module('myModule', []);
myModule.controller('DemoController', function($scope) {
  $scope.user = {
    name: 'world1111'
  };
});

安全的定義控制器（推薦）

• angular代碼在壓縮混淆的時候回被替換成特殊字符，這樣就會產生找不到對象的問題
• 請參照資料-備課代碼-07-controller2.html理解
• 代碼混淆工具

面向對象的方式定義控制器(擴展)

• 請參照資料-備課代碼-09-oo-controller.html理解

MVC 思想

什么是 MVC 思想

• 將應用程序的組成划分為三個部分：Model View Controller

  • 模型：數據處理
  • 視圖：以友好的方式向用戶展示數據
  • 控制器：業務邏輯處理

• 控制器的作用就是初始化模型用的；

• 模型就是用於存儲數據的,做一些業務邏輯的操作。

• 視圖用於展現數據

• 請參照資料-圖片-03-富士康MVC類比圖和04-MVC在代碼中的應用理解

• 請參照資料-備課代碼-22-register.html理解

用MVC構建應用的優勢

• 剝離開視圖和邏輯之間的關系，無論怎么修改dom操作都不用修改業務邏輯代碼
• 請參照資料-備課代碼-23-calc2.html理解

MVC思想總結

• 是一種設計思想，約定了程序的結構應該是怎樣的，
• 每一個組成原件都有一個明確的職責
• 提高代碼的結構和可維護性提高

雙向數據綁定

• 頁面文本框的值改變，導致數據模型的值發生改變，
• 數據模型的值的改變，反過來導致頁面文本框的值的改變，這種相互影響的關系，我們起了個名詞，叫作雙向數據綁定。
• ng-model = ""

$scope

• 視圖和控制器之間的數據橋梁
• 用於在視圖和控制器之間傳遞數據
• 用來暴露數據模型（數據，行為）

ViewModel

• $scope 實際上就是MVVM中所謂的VM（視圖模型）
• 正是因為$scope在Angular中大量使用甚至蓋過了C（控制器）的概念，所以很多人（包括我）把Angular稱之為MVVM框架，這一點倒是無所謂，具體看怎么用罷了
• 大家必須掌握的就是如何根據一個原型抽象出對應的視圖模型

表達式

類似於模版引擎的語法

作用：

使用表達式把數據綁定到 HTML。

語法：

• 表達式寫在雙大括號內：{{ expression }}。
• AngularJS 表達式很像 JavaScript 表達式
• 它們可以包含文字、運算符和變量
• 如 {{ 5 + 5 }} 或 {{ firstName + '-' + lastName }}
  • 請參照資料-備課代碼-10-expression.html理解

支持的類型

• 數字 {{ 100 + 100 }}
• 字符串 {{ 'hello' + 'angular' }}
• 對象 {{ zhangsan.name }}
• 數組 {{ students[10] }}

與JS的比較：

相同點：

• AngularJS 表達式可以包含字母，操作符，變量。

不同點：

• AngularJS 表達式可以寫在 HTML 中。
• AngularJS 表達式不支持條件判斷，循環及異常。
• AngularJS 表達式支持過濾器。

指令

• 在 AngularJS 中將前綴為 ng- 這種屬性稱之為指令，其作用就是為 DOM 元素調用方法、定義行為綁定數據等
• 簡單說：當一個 Angular 應用啟動，Angular 就會遍歷 DOM 樹來解析 HTML，根據指令不同，完成不同操作

指令標准屬性的問題

• ng-xxx 的屬性本身並不是HTML標准中定義的屬性

• 很多情況下語法校驗是無法通過的,但是瀏覽器有容錯性。

• HTML5 允許擴展的（自制的）屬性，以 data- 或者x- 開頭。

• 在 AngularJS 中可以使用 data-ng- 來讓網頁對 HTML5 有效。

• ng-和data-ng-二者效果相同。

• 請隨便把example中的ng-app替換為data-ng-app理解

內置指令

ng-app

• ng-app 指令用來標明一個 AngularJS 應用程序
• 標記在一個 AngularJS 的作用范圍的根對象上
• 系統執行時會自動的執行根對象范圍內的其他指令
• 可以在同一個頁面創建多個 ng-app 節點（不推薦）
• 創建多個ng-app時，默認只能執行第一個，后面的需要手動引導：angular.bootstrap()
• 標記的范圍盡可能小，這樣可以減少遍歷的dom元素，主要為了性能

自動引導

• 在angular中一個頁面中只能有一個ng-app指令，這是單頁面應用程序的入口,這屬於自動引導
  • 請參照資料-備課代碼-02-module.html理解

手動引導

• 如果想在一個頁面中使用多個ng-app指令，需要進行手動引導
• 請參照資料-備課代碼-03-mulit-module.html理解

多模塊使用標准寫法

• 請參照資料-備課代碼-04--module2.html理解
• 請參照資料-圖片-01--angular應用結構圖理解

ng-model

• 用於建立界面上的元素到數據模型屬性的雙向數據綁定
• 一般情況綁定到元素的value屬性上
• 但是在checkbox之類的表單元素會有不同

ng-bind

• ng-bind和表達式效果相同,不過能防止閃動一下頁面
• ng-bind上來是沒有東西的，需要通過viewmodel或者ng-init初始化綁定的值
  • 請參照資料-備課代碼-11-directive.html理解

ng-bind-html

• 可以把字符串中的html在頁面中直接展示
• 不過在使用的時候會報不安全問題，缺少引用的文件，需要引用第三方的包才能實
  • 請參照資料-備課代碼-11-directive.html理解
• 現安全輸出瀏覽器自動也會幫你處理一些安全問題的,不會執行或者輸出不安全的代碼，
  你在開發的過程中要有意識的考慮攻擊問題，想一下輸出的會不會是可執行的代碼，需要編碼后再呈現。
  • 請參照資料-備課代碼-12-html-safe.html理解安全問題

ng-repeat

• 循環輸出頁面內容
  • 請參照資料-備課代碼-13-userful-directive.html理解
• 數據源是數組

     var data = [
       /* beautify ignore:start */
       { id: 1, name: '詹三1', age: 118, gender: true },
       { id: 2, name: '詹三2', age: 128, gender: true },
       { id: 3, name: '詹三3', age: 138, gender: true },
       { id: 4, name: '詹三4', age: 148, gender: true },
       { id: 5, name: '詹三5', age: 158, gender: true },
       /* beautify ignore:end */
     ];

  <ul ng-controller="MainController">
    <li ng-repeat="item in data">
      <p>
        <span>{{item.id}}</span>
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
      </p>
    </li>
  </ul>

• 數據源是對象

   var data = {
      /* beautify ignore:start */
      1: { name: '詹三1', age: 11, gender: true },
      2: { name: '詹三2', age: 12, gender: true },
      3: { name: '詹三3', age: 13, gender: true },
      4: { name: '詹三4', age: 14, gender: true },
      5: { name: '詹三5', age: 15, gender: true },
      /* beautify ignore:end */
    };

  <ul ng-controller="MainController">
    <li ng-repeat="(id, item) in ps track by $index">
      <p>
        <span>{{id}}</span>
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
      </p>
    </li>
  </ul>

• $index
  • ng-repeat中的索引

ng-class

• 決定某個樣式是否添加
• ng-class={classname1:是否添加,classname2:是否添加}
  • 請參照資料-備課代碼-14-ng-class.html理解

$apply

• 異步操作中的數據綁定不能及時監聽到，讓頁面渲染，所以需要手動調用一下
  • 請參照資料-備課代碼-15-loading.html理解

ng-cloak

• 自動給頁面元素添加dispaly：none屬性，當頁面渲染完畢自動刪除
• 最后你會發現直接把angularjs引用到最上面就不會有閃屏現象了，因為angularjs在頁面渲染的時候已經執行了
  • 請參照資料-備課代碼-16-ng-cloak.html理解

ng-show/ng-hide/ng-if

• ng-show和ng-hide是控制頁面是否顯示
• ng-if的作用是控制是否存在這個dom元素，如果值等於false會把頁面中的元素注釋
  • 請參照資料-備課代碼-17-if-show-hide.html理解

ng-switch

• 根據value值決定頁面中的哪部分顯示
  • 請參照資料-備課代碼-17-if-show-hide.html理解

ng-src

• 用於解決當鏈接類型數據綁定時候造成的加載問題
• ng-src指令會自動幫你把屬性值賦值給src屬性，類似於懶加載中的效果一樣
  • 請參照資料-備課代碼-18-ng-src-ng-href.html理解

其他常用指令

• ng-checked：
  • 單選/復選是否選中，只是單向綁定數據
  • 請參照資料-備課代碼-19-ng-checked.html理解
• ng-selected：
  • 是否選中，只是單向綁定數據
• ng-disabled：
  • 是否禁用
• ng-readonly：
  • 是否只讀

常用事件指令

不同於以上的功能性指令，Angular還定義了一些用於和事件綁定的指令：

• ng-blur：
  • 失去焦點
• ng-change：
  • 發生改變
• ng-copy：
  • 拷貝完成
• ng-click：
  • 單擊
• ng-dblclick：
  • 雙擊
• ng-focus：
  • 得到焦點
• ng-blur：
  • 失去焦點
• ng-submit：
  • 表單提交

第三方指令

• 網址：angular-ui.github.io