Angular

Angular vs jQuery

• 提高了dom操作的效率

• 不推崇dom操作

• angular.element, 使用方式和jquery非常像,jqLite對(duì)象

  • 可以把a(bǔ)ngular.element當(dāng)作jQuery的$來(lái)用髓需，
  • 注意angular.element 要求傳入的參數(shù)是一個(gè)原生的dom對(duì)象，而不是選擇器
  • angular.element(document,getElementById("box'))

回顧并總結(jié)Angular開(kāi)發(fā)流程

• 1.在html中引入angular.js文件
• 2.在html中加上ng-app指令汪茧，告訴angular要管理頁(yè)面哪一部分代碼
• 3.在js中創(chuàng)建模塊angular.module('myApp',[]),給ng-app指令一個(gè)值锄开，
• 這個(gè)值就是這個(gè)模塊的模塊名:myApp
• 4.在js中創(chuàng)建控制器xxx.controller('控制器名字',function($scope){}),我們需要在頁(yè)面上加上ng-controller指令忿危，指令的值為控制器的名字
  ng-controller="控制器名字"
• 5.建模:根據(jù)頁(yè)面結(jié)構(gòu)，抽象出具體的js對(duì)象.
• 6.通過(guò)scope.username="小明"`
• 7.通過(guò)ng-model , ng-click , {{}} 把$scope的屬性在頁(yè)面展示出來(lái)
• 8.在js寫(xiě)一些具體的邏輯

MVC

• MVC只是一種思想，只是約定了我們代碼應(yīng)該如何去組織
• 讓我們代碼的每一部分都有一個(gè)明確的職責(zé)
• 用利于后期的維護(hù)性(并不是提高了代碼的執(zhí)行性能,有可能10行代碼放到10個(gè)方法里,
• 10方法再放到10文件去.)

$scope

• 視圖和控制器之間的數(shù)據(jù)橋梁
• 用于在視圖和控制器之間傳遞數(shù)據(jù)
• 用來(lái)暴露數(shù)據(jù)模型（數(shù)據(jù)劳坑，行為）

[圖片上傳失敗...(image-280ac-1541335188420)]

ViewModel

• $scope 實(shí)際上就是MVVM中所謂的VM（視圖模型）
• 正是因?yàn)?scope在Angular中大量使用甚至蓋過(guò)了C（控制器）的概念，所以很多人（包括我）把Angular稱(chēng)之為MVVM框架
• 這一點(diǎn)倒是無(wú)所謂舞吭，具體看怎么用罷了

Angular 模塊

• angular.module('模塊名',[])

Angular中模塊的劃分方式

• 1.按照項(xiàng)目的功能去劃分模塊
• 2.按照項(xiàng)目中文件的類(lèi)型去劃分模塊

Angular 控制器

傳統(tǒng)的方式創(chuàng)建控制器

    // 創(chuàng)建控制器(1.2.x版本)
    // angular會(huì)把全局的函數(shù)當(dāng)作控制器
    function demoController($scope){
      $scope.name = '小明'
    }

    function xxx($scope){
      $scope.age = 18
    }

面向?qū)ο蟮姆绞絼?chuàng)建控制器

<!-- 這里的obj 代表控制器中回調(diào)函數(shù)new 出的對(duì)象 -->
<div ng-controller="demoController as obj">
  <p>{{myname}}</p>
  <p>{{obj.name}}</p>
</div>

    // 1.創(chuàng)建模塊
    var app = angular.module('myApp', [])

    // 2.創(chuàng)建控制器
    // angular會(huì)把這二個(gè)參數(shù)當(dāng)作構(gòu)造函數(shù)使用
    app.controller('demoController', function($scope){
      $scope.myname='小紅'
      this.name = '小明'
    })

安全的方式創(chuàng)建控制器

• 就是為了避免壓縮后代碼無(wú)法運(yùn)行

    // 把第二個(gè)參數(shù)改為一個(gè)數(shù)組,在數(shù)組把我們需要的參數(shù)的名字寫(xiě)上
    // 回調(diào)函數(shù)就寫(xiě)在數(shù)組的最后一個(gè)元素上
    // *注意*：數(shù)據(jù)中傳入的元素的順序,要和function的中順序一一對(duì)應(yīng)
    app.controller('demoController',['$scope','$log',function($scope,$log){
      $scope.msg = 'hello World!'
      $log.log('哈哈哈哈泡垃！')
    }])

指令

ng-bind

• 可以解決表達(dá)式閃爍問(wèn)題:
• 使用ng-bind指令析珊，作用與表達(dá)式類(lèi)似,是寫(xiě)在標(biāo)簽的屬性位置,
  angular會(huì)把ng-bind對(duì)應(yīng)的值放到所在標(biāo)簽中間
• <p ng-bind="msg"> </p> 瀏覽器不會(huì)把標(biāo)簽的屬性顯示出來(lái)!
• 效果：angular會(huì)把ng-bind對(duì)應(yīng)的數(shù)據(jù)顯示到所在標(biāo)簽中間

ng-cloak

• 可以解決表達(dá)閃爍問(wèn)題:
• <div class="ng-cloak"><p>{{msg}}</p></div> 先隱藏后顯示
• angular在解析表達(dá)式之后會(huì)把頁(yè)面上的ng-cloak樣式移除,
  這樣ng-cloak對(duì)應(yīng)的樣式就不生效了,我們就先給ng-cloak設(shè)置display:none;

ng-repeat

• 能夠把一組數(shù)據(jù)直接渲染到頁(yè)面上，不需要我們拼接字符串
• 我們希望重復(fù)的是哪個(gè)元素就把ng-repeat指令加在哪個(gè)元素上蔑穴，不一定是li上
• ng-repeat="item in users" , item對(duì)應(yīng)是遍歷users時(shí)的第一條數(shù)據(jù)忠寻，users是我們
• 要遍歷的數(shù)據(jù)(是一個(gè)數(shù)組)

    <!-- ng-repeat 遍歷生成數(shù)據(jù)，類(lèi)似for in 循環(huán)的語(yǔ)法 -->
      <li ng-repeat="item in users" >
        {{item.name}} , {{item.age}}
      </li>

       // 1.創(chuàng)建模塊
    var app = angular.module('myApp', [])

    // 2.創(chuàng)建控制器
    app.controller('demoController',['$scope',function($scope){
      // 初始化數(shù)據(jù)
      $scope.users = [
        {name:'小明',age:18},
        {name:'小紅',age:18},
        {name:'小朋',age:28},
        {name:'小月',age:19},
        {name:'小黑',age:18},
        {name:'小白',age:20}
      ]

      $scope.arr = [1,2,3,4,5,1]

      // 我們希望也能夠把這個(gè)對(duì)象時(shí)的數(shù)據(jù)遍歷出來(lái)存和。
      $scope.obj = {
        xm:{name:'小明',age:18},
        xh:{name:'小紅',age:28},
        xt:{name:'小天',age:10},
        xy:{name:'小月',age:38}
      }
    }])

ng-repeat補(bǔ)充

• ng-repeat 在遍歷時(shí)會(huì)提供以下值:
  • $odd : 為true時(shí)奕剃，表明當(dāng)前數(shù)據(jù)是否是第[奇]數(shù)條
  • $even: 為true時(shí)，表明當(dāng)前數(shù)據(jù)是否是第[偶]數(shù)條
  • $first: 為true時(shí)捐腿，表明當(dāng)前數(shù)據(jù)是否是第1條
  • $last: 為true時(shí)纵朋，表明當(dāng)前數(shù)據(jù)是否是最后一條
  • $middle: 為true時(shí)，表明當(dāng)前數(shù)據(jù)是否是中間的數(shù)據(jù)

    <!--  $odd, ng-repeat在每次遍歷時(shí)都提供這樣的值茄袖，為true表明當(dāng)前數(shù)據(jù)是否第奇數(shù)條,從索引為0開(kāi)始判斷的 -->
    <!--  $even, ng-repeat在每次遍歷時(shí)都提供這樣的值操软，為true表明當(dāng)前數(shù)據(jù)是否第偶數(shù)條,從索引為0開(kāi)始判斷的 -->
      <li class="{{ $odd ?'red':'green'}}" ng-repeat="item in data">
        {{item.name}},{{item.age}}
      </li>

ng-class

• ng-class 可以幫助我們控制元素的class樣式，
• ng-class 可以獨(dú)立在其他元素上使用宪祥，并非一定要和ng-repeat結(jié)合

    <!--  ng-class,動(dòng)態(tài)的添加class樣式,
      以對(duì)象的形式書(shū)寫(xiě)聂薪，angular會(huì)把屬性值為true的屬性名當(dāng)作樣式添加到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作用是相反的(只是設(shè)置display:none來(lái)隱藏元素)

    <!-- ng-show,控制元素的顯示或隱藏,值為true時(shí)顯示，為false隱藏-->
    <p ng-show="isShowing">我是中國(guó)人蝗羊，我愛(ài)自己的祖國(guó)!</p>
    <!-- ng-hide 值為true時(shí)藏澳，隱藏當(dāng)前元素 -->
    <p ng-hide="true">我是小明!</p>

ng-if

• 控制元素的顯示與否:值為false時(shí)，元素會(huì)從dom移除

    <!-- ng-if耀找，也能控制元素的顯示或隱藏,為true時(shí)顯示,為false時(shí)【會(huì)將當(dāng)前dom元素移除】 -->
    <p ng-if="true">我是中國(guó)人翔悠，我愛(ài)自己的祖國(guó)!</p>
    <h1>ng-if="false"</h1>
    <p ng-if="false">我是中國(guó)人，我愛(ài)自己的祖國(guó)!</p>

ng-switch

• 當(dāng)ng-switch-when 對(duì)應(yīng)的值等于ng-switch對(duì)應(yīng)值時(shí)野芒，當(dāng)前dom元素就顯示

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

其他常用指令

• ng-checked：
  • 單選/復(fù)選是否選中,（單向數(shù)據(jù)綁定:界面操作不會(huì)影響數(shù)據(jù)模型的值） ng-model:雙向數(shù)據(jù)綁定
• ng-selected：
  • 是否選中
• ng-disabled：
  • 是否禁用
• ng-readonly：
  • 是否只讀

常用事件指令

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

• ng-blur：失去焦點(diǎn)
• ng-focus： 獲得焦點(diǎn)
• ng-change：內(nèi)容改變
• ng-copy：復(fù)制
• ng-click: <div ng-click="aa()"></div>
• ng-dblclick：雙擊
• ng-submit： form表單提單

指令的其他使用方式

data-xxx,在使用angular指令時(shí)涝登，只需要在原先的指令前加上data-前綴。
如: data-ng-app,data-ng-click
x-ng-app,x-ng-click