angularjs介紹

官網(wǎng)https://angularjs.org/

-是什么？

--為動態(tài)Web應(yīng)用設(shè)計的結(jié)構(gòu)框架
---AngularJS 是一個為動態(tài)WEB應(yīng)用設(shè)計的結(jié)構(gòu)框架，提供給大家一種新的開發(fā)應(yīng)用方式，這種方式可以讓你擴(kuò)展HTML的語法，以彌補(bǔ)在構(gòu)建動態(tài)WEB應(yīng)用時靜態(tài)文本的不足，從而在web應(yīng)用程序中使用HTML聲明動態(tài)內(nèi)容。

核心功能

-雙向數(shù)據(jù)綁定

實(shí)現(xiàn)了model與view完全綁定在一起，model變化，view也變化，反之亦然

-模板

模板相當(dāng)于HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，AngularJS把模板當(dāng)做DOM來操作，去生成一些指令來完成對View的數(shù)據(jù)綁定

-MVVM

吸收了傳統(tǒng)的MVC設(shè)計模式，但又不是傳統(tǒng)意義上的MVC，更接近于MVVM（Model-View-ViewModel）

-依賴注入

擁有內(nèi)建的依賴注入子系統(tǒng)，可以幫助開發(fā)人員更容易的開發(fā)，理解和測試應(yīng)用

-指令

可以用來創(chuàng)建自定義的標(biāo)簽，也可以用來裝飾元素，或者操作DOM屬性

為什么要使用

前后端分離，后端只提供數(shù)據(jù)接口，路由，模板渲染等在前端完成
HTML和JS分離，展示和邏輯分離
減少JS代碼，減少DOM元素查找，事件綁定等代碼
適合API開發(fā)

使用前準(zhǔn)備

1.官網(wǎng)下載文件，拷貝到工程中
2.使用CDN

https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js

常用指令

1.介紹

AngularJS有一套 完整的、可擴(kuò)展的、用來幫助web應(yīng)用開發(fā)的指令集

使得HTML可以轉(zhuǎn)變成“特定領(lǐng)域語言（DSL）”，用來擴(kuò)展瀏覽器能力的技術(shù)之一，在DOM編譯期間，和HTML關(guān)聯(lián)著的指令會被檢測到，并且被執(zhí)行，這使指令可以為DOM指定行為，或者改變它

指令就是HTML的新屬性，來擴(kuò)展HTML，帶有前綴”ng-“

綁定在DOM元素上的函數(shù)，可以調(diào)用方法、定義行為、綁定controller以及$scope對象、操作DOM等等

當(dāng)關(guān)聯(lián)的HTML結(jié)構(gòu)進(jìn)入編譯階段時應(yīng)該執(zhí)行的操作

本質(zhì)上只是一個當(dāng)編譯器編譯到相關(guān)DOM時需要執(zhí)行的函數(shù)，可以卸載元素的名稱里，屬性里，CSS類名里，注釋里

AngularJS的動態(tài)性和響應(yīng)能力，都要?dú)w功于指令屬性，常用的有: ng-app / ng-init / ng-model / ng-bind / ng-repeat

2.ng-app

<div ng-app="">
            
</div>

一個AngularJS應(yīng)用程序初始化完成了標(biāo)記作用域，
也就是div元素就是AngularJS應(yīng)用程序的所有者，
在它里面的指令也就會被AngularJS編譯器所編譯、解析了

表明一個AngularJS應(yīng)用程序
初始化AngularJS程序
擁有該指令的標(biāo)簽為根節(jié)點(diǎn)，開始編譯其中的DOM

3.ng-init

初始化作用

//變量
<div ng-app="" ng-init="name = 'lidaze'; age = 18">
 {{ name + " " + age }}
</div>
//對象
<div ng-app="" ng-init="person = {name: 'lidaze', age: 18}">
 {{ person.name }}
</div>
//數(shù)組
<div ng-app="" ng-init="arr = [12, 23, 56, 34]">
 {{ arr[0] }}
</div>
。。。

使用一個控制器或模塊來代替它

4.ng-model

使用ng-model指令可以把應(yīng)用程序數(shù)據(jù)綁定到HTML元素，實(shí)現(xiàn)model和view的雙向綁定

<div ng-app="">
 <input type="text" ng-model="name">
 <h1>{{ name }}</h1>
</div>

原理

a. angular加載完成之后會啟動，首先找ng-app
b. 找到后認(rèn)為ng-app里面的所有內(nèi)容都?xì)wangular來管
c. 找子層標(biāo)簽里所有指令，然后就可以找到ng-model
d. 找到會生成數(shù)據(jù)模型，然后掛在根作用域上
e. 然后下面的所有標(biāo)簽都可以讀取ng-model的值

5.表達(dá)式

在 {{ }} 里面可以寫我們想寫的東西
{{ 20 + 20 }}
{{ num1 + num2 }}
{{ firstName + " " + lastName }}

6.ng-bind

和 {{}} 類似

<div ng-app="" ng-init="firstName = '李'; lastName = '澤'">
     <input type="text" ng-model="firstName">
     <input type="text" ng-model="lastName">
     <!-- <h1>{{ firstName + " " + lastName }}</h1> -->
     <h1 ng-bind="firstName + ' ' + lastName"></h1>
</div>

和 {{}} 區(qū)別

ng-bind在angular解析渲染完畢后將數(shù)據(jù)顯示出來
在使用花括號語法時，因?yàn)闉g覽器需要首先加載頁面，渲染它，然后AngularJS才能把它解析成你期望被看到的內(nèi)容，所以對于首個頁面中的數(shù)據(jù)綁定操作，建議使用ng-bind，以避免其未被渲染的模板被用戶看到。

7.ng-click

定義一個AngularJS單機(jī)事件

<div ng-app="" ng-init="flag = true;">
      <button type="button" ng-click="flag = !flag">點(diǎn)擊修改</button>
      {{ flag }}
</div>

擴(kuò)展
ng-show
設(shè)置HTML元素可見

ng-hide
設(shè)置HTML元素隱藏

8.ng-repeat

遍歷數(shù)據(jù)集合中的每個數(shù)據(jù)元素
向HTML容器中添加多個類似DOM元素的時候，適合使用ng-repeat

遍歷數(shù)組
<div ng-app="" ng-init="names = ['李大澤', '李小澤', '老王', '小趙', '王五']">
    <ul>
        <li ng-repeat="name in names">{{ name }}</li>
    </ul>
</div>

遍歷對象
<div ng-app="" ng-init="person = {name: 'lidaze', age: 18, gender: 'man'}">
   <ul>
       <li ng-repeat="(key, value) in person">{{ key + " " + value }}</li>
   </ul>
</div>

遍歷數(shù)組套對象
<div ng-app="" ng-init="people = [{name: 'lidaze1', age: 18, gender: 'man'}, {name: 'lidaze2', age: 18, gender: 'man'}, {name: 'lidaze3', age: 18, gender: 'man'}]">
            <ul>
                <li ng-repeat="p in people">{{ p.name + " " + p.age + " " + p.gender }}</li>
            </ul>
        </div>

9.ng-class

預(yù)設(shè)指令，用來動態(tài)自定義dom元素的css className

示例
<div class="" ng-app="" ng-init="flag = false;">
    <button type="button" ng-click="flag = !flag;" name="button">修改顏色</button>
    <section ng-class="{true: 'active', false: 'inactive'}[flag]">

    </section>
</div>

10.ng-include

將多個頁面公共的提取出來

示例
<div class="" ng-app="" ng-init="flag = false;">
    <div class="" ng-include="'common.html'">

    </div>
</div>

注意：

必須用web容器打開站點(diǎn)才能成功，本地文件訪問模式會報錯

ng-include的值如果要寫文件名需要加單引號，否則會被當(dāng)做變量