Angular

Angular簡介

• 一款非常優秀的前端高階 JS 框架
• 最早由 Misko Hevery 等人建立
• 2009 年被 Google 公式收購，用於其多款產品
• 目前有一個全職的開發團隊繼續開發和維護這個庫
• 有了這一類框架就可以輕鬆構建 SPA 應用程式
• 其核心就是通過指令擴充套件了 HTML，通過表示式繫結資料到 HTML。

Angular 與 jQuery

• jQuery: 庫

  • 提供了一些已有的方法，我們主動呼叫它。
  • $(‘.test’).val()

• Angular: 框架

  • 框架提供了一種結構或者模式
  • 我們按照它提供這種結構或者模式去書寫程式碼
  • 框架會幫助我們去剩下的事情

• jQuery提高了dom操作的效率

• Angular不推崇dom操作

• angular.element方法, 使用方式和jquery非常像,最終得到一個jqLite物件

  • 可以把angular.element當作jQuery的$來用，
  • 注意angular.element 要求傳入的引數是一個原生的dom物件，而不是選擇器

指令

• 在angular中以ng-開頭的html標籤屬性，稱之為指令
• ng-app: 選擇angular去管理哪一部分的html程式碼, 管理的是ng-app所在
  元素的子元素及其本身
• ng-click: 也是用來註冊點選事件
• ng-model: 可以指定一個屬性值，這個屬性就表示當前文字框的value值
• ng-init: 可以對資料進行初始化操作，給一個預設值。

模組

• 建立模組:var app = angular.module('模組名',[])
• 注意 如果不依賴其他模組，也需要提供一個空的陣列
• 需要在ng-app指令的屬性值上寫我們的模組名

控制器

• 建立控制器:app.controller('控制器的名字',function($scope){})
• 如果要改變頁面{{testName}}的值，就改變$scope.testName值就可以
• 注意 要顯示資料模型的值,就要在它所在標籤或者父標籤上加上ng-controller指令
  ng-controller的值就是我們想要顯示的資料模型所在控制器的名字
  :ng-controller=”window”

雙向資料繫結

• 資料模型($scope.屬性)的改變，會影響內容的顯示(文字框的值)
• 我們改變了文字框的值，對應的資料模型發生了改變.
• 這種相互影響的關係就稱之為雙向資料繫結.

MVC 思想

• M : Model: 儲存，獲取資料
• V : View 檢視，把資料呈現給使用者
• C : Controller 做一些控制和排程的操作

Angular開發流程

• 1.在html中引入angular.js檔案
• 2.在html中加上ng-app指令，告訴angular要管理頁面哪一部分程式碼
• 3.在js中建立模組angular.module('myApp',[]),給ng-app指令一個值，
• 這個值就是這個模組的模組名:myApp
• 4.在js中建立控制器xxx.controller('控制器名字',function($scope){}),我們需要在頁面上加上ng-controller指令，指令的值為控制器的名字
  ng-controller="控制器名字"
• 5.建模:根據頁面結構，抽象出具體的js物件.
• 6.通過$scope做一些初始化操作$scope.username="小明"
• 7.通過ng-model , ng-click , {{}} 把$scope的屬性在頁面展示出來
• 8.在js寫一些具體的邏輯

安全的方式建立控制器

• 就是為了避免壓縮後代碼無法執行

    // 把第二個引數改為一個數組,在陣列把我們需要的引數的名字寫上
    // 回撥函式就寫在陣列的最後一個元素上
    // *注意*：資料中傳入的元素的順序,要和function的中順序一一對應
    app.controller('demoController',['$scope','$log',function($scope,$log){
      $scope.msg = 'hello World!'
      $log.log('哈哈哈哈！')
    }])

指令

ng-bind

• 可以解決表示式閃爍問題:
• <p ng-bind="msg"> </p> 瀏覽器不會把標籤的屬性顯示出來!
• 效果：angular會把ng-bind對應的資料顯示到所在標籤中間

ng-cloak

• 可以解決表達閃爍問題:
• <div class="ng-cloak"><p>{{msg}}</p></div> 先隱藏後顯示
• angular在解析表示式之後會把頁面上的ng-cloak樣式移除,
  這樣ng-cloak對應的樣式就不生效了,我們就先給ng-cloak設定display:none;

ng-repeat

• 能夠把一組資料直接渲染到頁面上，不需要我們拼接字串
• 我們希望重複的是哪個元素就把ng-repeat指令加在哪個元素上，不一定是li上
• ng-repeat=”item in data” , item對應的是遍歷data時的每一一條資料，data是我們 要遍歷的資料(是一個數組)

<!-- ng-repeat 遍歷生成資料，類似for in 迴圈的語法 -->
      <li ng-repeat="item in users" >
        {{item.name}} , {{item.age}}
      </li>

ng-repeat補充

• 資料中有完全相等的項時會報錯，這時候要用ng-repeat="item in data track by $index"
• ng-repeat 在遍歷時會提供以下值:
  
  • $odd : 為true時，表明當前資料是第[奇]數條
  • $even: 為true時，表明當前資料是第[偶]數條
  • $first: 為true時，表明當前資料是第1條
  • $last: 為true時，表明當前資料是最後一條
  • $middle: 為true時，表明當前資料是否是中間(非第一和最後)的資料

ng-class

• ng-class 可以幫助我們控制元素的class樣式，
• ng-class 可以獨立在其他元素上使用，並非一定要和ng-repeat結合

    <!--  ng-class,動態的新增class樣式,
      以物件的形式書寫，angular會把屬性值為true的屬性名當作樣式新增到class
      class="green" -->
    <li ng-class="{
        red   : item.age>=20,
        green : item.age>=10&&item.age<20,
        blue  : item.age<10
     }" ng-repeat="item in data">
      {{item.name}},{{item.age}}
    </li>

ng-show/ng-hide

• 控制元素的顯示與否,ng-show與ng-hide作用是相反的(只是設定display:none來隱藏元素)

    <!-- ng-show,控制元素的顯示或隱藏,值為true時顯示，為false隱藏-->
    <p ng-show="isShowing">ng-show值為true時顯示</p>
    <!-- ng-hide 值為true時，隱藏當前元素 -->
    <p ng-hide="true">ng-hide值為true時隱藏</p>

ng-if

• 控制元素的顯示與否:值為false時，元素會從dom移除

    <!-- ng-if，也能控制元素的顯示或隱藏,為true時顯示,為false時【會將當前dom元素移除】 -->
    <p ng-if="true">這個標籤不會被移除</p>
    <h1>ng-if="false"</h1>
    <p ng-if="false">這個標籤會被移除</p>

ng-switch

• 當ng-switch-when 對應的值等於ng-switch對應值時，當前dom元素就顯示

    <div ng-switch="name">
      <div ng-switch-when="小明">
        我是小明，我在這裡！
      </div>
      <div ng-switch-when="小紅">
        我是小紅!
      </div>
    </div>

其他常用指令

• ng-checked：
  
  • 單選/複選是否選中,（單向資料繫結:介面操作不會影響資料模型的值） ng-model:雙向資料繫結
• ng-selected：
  
  • 是否選中
• ng-disabled：
  
  • 是否禁用
• ng-readonly：
  
  • 是否只讀

常用事件指令

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

• ng-blur：失去焦點
• ng-focus： 獲得焦點
• ng-change：內容改變
• ng-copy：複製
• ng-click: 點選
• ng-dblclick：雙擊
• ng-submit： form表單提單

指令的其他使用方式

data-xxx,在使用angular指令時，只需要在原先的指令前加上data-字首。
如: data-ng-app,data-ng-click
x-ng-app,x-ng-click

自定義指令

• 自定義指令無外乎增強了HTML,提供了額外的功能。
• 內部指令基本能滿足我們的需求。
• 少數情況下我們有一些特殊的需要，可以通過自定義指令的方式實現

建立自定義指令

• 注意: 名字要符合駝峰合法

    // 1.建立模組物件
    var app = angular.module('directiveApp', [])

    // 2.建立自定義指令
    // 第一個引數：是指令的名字,必須是駝峰命名法
    //             使用時把大寫改成小寫，在原來大寫前加上-
    // 第二個引數：和控制器的第二個引數類似!
    app.directive('myBtn', [function(){
      // 在這裡直接return 一個物件就可以了
      return {
        // template屬性，是封裝的ui
        template:'<div><button>我是按鈕</button></div>'
      }
    }])

自定義指令中回撥裡返回的物件的屬性

• template: 需要提供一個html字串,最終會被新增到當前頁面使用了自定義指令的位置

• templateUrl:需要提供一個html檔案路徑，angular會發請求，請求對應的檔案，
  把檔案內容作為模板插入到自定義指令中間
  : 也可以提供一個script標籤的id, angular會把script標籤中的內容作為
  模板插入到自定義指令中間,注意 要(必須)改變script標籤的type=”text/ng-template”

• restrict: 也是需要提供一個字串，限制自定義指令的使用形式

  • A : Attribute 表示只能以屬性的形式使用
  • C : Class 表示只能以類樣式名的形式使用
  • E : Element 表示只能以自定義標籤的形式使用
  • M : comments 表示只能以註釋的形式使用 <– directive:自定義指令名 –>
  • ACE : 如果希望多種方式合適，就把對應值組合在一起。

• replace：需要提供一個布林值，為true時，模板會被用來替換自定義指令所在標籤，
  * 否則是插入到自定義指令中間

• transclude: 需要一個布林值, 為true時會將自定義標籤中的內容插入到模板中，
  * 擁有ng-transclude 指令的標籤中間

• scope：需要一個物件: 可以用來獲取自定義指令的屬性值,

  • 給當前物件新增一個屬性(如:tmp),屬性值以@開頭，後面跟上自定義指令的屬性名
    然後就可以在模板中使用{{tmp}} 來得到對應的屬性值
    
    • scope: { tmp:'@mystyle'} {{tmp}}
    • scope: { mystyle:'@'} {{mystyle}}

• link: 需要一個function 這是function在angular解析到相應指令時就會執行一次,引數如下

  • scope ：類似於$scope,只不過scope的屬性只能在模板和自定義指令中使用
  • element : 自定義指令所在標籤對應的物件(jqLite)
  • attributes : 包含了自定義指令所在標籤的必有屬性

過濾器(filter)

• 格式化資料
• 過濾資料(filter)

    <ul>
        <!--  如果指定一個布林值，或者字串就是全文匹配 -->
      <!-- 會到對應的data中尋找，如果當前遍歷到的元素有completed屬性且值 為true就會被顯示出來。（只會到completed屬性中尋找） -->
      <li ng-repeat="item in data | filter : {completed:true} ">
        {{item.name}},{{item.completed}}
      </li>
    </ul>

  <!-- 在資料模型後加上|  再加上過濾器的名字
        也可以在過濾器名字後指定引數，引數是寫在冒號後面的-->
  <p>{{money | currency : '￥'}}</p>

  <p>{{myDate | date : 'yyyy年MM月dd日 HH:mm:ss'}}</p>

• limitTo

    <h1>limitTo</h1>
  <!-- 第一個引數，表明顯示多少個字，第二個引數表示，從第幾個字開始顯示(索引從0開始) -->
  <p>{{msg | limitTo : 5 : 2}}...</p>

• orderBy 及 json

<h1>json</h1>
 <!--  格式化顯示json資料，引數指定縮近的長度 -->
 <pre>{{myJson | json : 8}}</pre>
  <h1>orderBy</h1>
  <!-- 對資料進行排序，引數，給+號就按正序排，- 就按倒序排 -->
  <span ng-repeat="item in arr | orderBy:'-'">{{item }}，</span>

• 在js中使用過濾器

    <!-- $filter 需要在控制器的回撥中傳入 -->
    // 可以呼叫不同的過濾器得到相應的結果
      // 引數是一個過濾器的名字
      // 返回值是一個方法
      //        : 第一個引數是需要處理的資料
      //        : 後面的引數是當前過濾器本身需要的引數
     $scope.result =  $filter('currency')($scope.money,'￥')