簡(jiǎn)介
在學(xué)習(xí) ionic 的路上遇到 angularjs 的一些指令什么的用法喷市，不熟悉所以還要回來(lái)查很麻煩工育，所以先來(lái)系統(tǒng)的學(xué)一遍 angularjs 好了灾而。
什么是angularjs
AngularJS 是一個(gè) JavaScript 框架冯痢。它是一個(gè)以 JavaScript 編寫(xiě)的庫(kù)。Angular通過(guò)指令擴(kuò)展HTML的語(yǔ)法蓄愁。
整體介紹
| 概念 | 說(shuō)明 |
|---|---|
模板(Template)
|
帶有Angular擴(kuò)展標(biāo)記的HTML |
指令(Directive)
|
用于通過(guò)自定義屬性和元素?cái)U(kuò)展HTML的行為 |
模型(Model)
|
用于顯示給用戶并且與用戶互動(dòng)的數(shù)據(jù) |
作用域(Scope)
|
用來(lái)存儲(chǔ)模型(Model)的語(yǔ)境(context)。模型放在這個(gè)語(yǔ)境中才能被控制器狞悲、指令和表達(dá)式等訪問(wèn)到 |
表達(dá)式(Expression)
|
模板中可以通過(guò)它來(lái)訪問(wèn)作用域（Scope）中的變量和函數(shù) |
編譯器(Compiler)
|
用來(lái)編譯模板(Template)撮抓，并且對(duì)其中包含的指令(Directive)和表達(dá)式(Expression)進(jìn)行實(shí)例化 |
過(guò)濾器(Filter)
|
負(fù)責(zé)格式化表達(dá)式(Expression)的值，以便呈現(xiàn)給用戶 |
視圖(View)
|
用戶看到的內(nèi)容（即DOM）
|
數(shù)據(jù)綁定(Data Binding)
|
自動(dòng)同步模型(Model)中的數(shù)據(jù)和視圖(View)表現(xiàn) |
控制器(Controller)
|
視圖(View)背后的業(yè)務(wù)邏輯 |
依賴(lài)注入(Dependency Injection)
|
負(fù)責(zé)創(chuàng)建和自動(dòng)裝載對(duì)象或函數(shù) |
注入器(Injector)
|
用來(lái)實(shí)現(xiàn)依賴(lài)注入(Injection)的容器 |
模塊(Module)
|
用來(lái)配置注入器 |
服務(wù)(Service)
|
獨(dú)立于視圖(View)的摇锋、可復(fù)用的業(yè)務(wù)邏輯 |
Angular <script> 標(biāo)簽
在HTML頁(yè)面底部放置 script 標(biāo)簽丹拯。這樣可以優(yōu)化應(yīng)用的加載時(shí)間，因?yàn)楸苊饬薍TML加載時(shí)被 angular.js 腳步的加載阻滯荸恕。
- 選擇
angular-[version].js這樣一個(gè)可讀的版本乖酬，用來(lái)作為開(kāi)發(fā)和調(diào)試用 - 選擇
angular-[version].min.js這樣一個(gè)壓縮版本，用來(lái)作為產(chǎn)品發(fā)布時(shí)用
一般會(huì)像這樣<html ng-app="test">把 ng-app 放在應(yīng)用的根節(jié)點(diǎn)中融求，是因?yàn)檫@樣應(yīng)用就可以自動(dòng)啟動(dòng) angular 了咬像。
AngularJS 表達(dá)式(Expressions)
AngularJS 表達(dá)式寫(xiě)在雙大括號(hào)內(nèi)：{{ expression }}。
可能會(huì)有人認(rèn)為Angular視圖表達(dá)式就是JavaScript表達(dá)式生宛，但這不完全正確县昂，因?yàn)锳ngular并沒(méi)有使用JavaScript中的'eval()'來(lái)解析表達(dá)式。你可以認(rèn)為Angular表達(dá)式與JavaScript表達(dá)式有如下的區(qū)別：
- 屬性解析： 所有的屬性的解析都是相對(duì)于作用域(scope)的陷舅，而不像JavaScript中的表達(dá)式解析那樣是相對(duì)于全局'window'對(duì)象的倒彰。
-
容錯(cuò)性： 表達(dá)式的解析對(duì)'undefined'和'null'具有容錯(cuò)性，這不像在JavaScript中莱睁，試圖解析未定義的屬性時(shí)會(huì)拋出
ReferenceError或TypeError錯(cuò)誤. - 禁止控制流語(yǔ)句： 表達(dá)式中不允許包括下列語(yǔ)句：條件判斷(if)狸驳，循環(huán)(for/while)预明，拋出異常(throw)。
另一方面耙箍，如果你想執(zhí)行特定的JavaScript代碼撰糠，你應(yīng)該在一個(gè)控制器里導(dǎo)出一個(gè)方法，然后在模板中調(diào)用這個(gè)方法辩昆。如果你想在JavaScript中解析一個(gè)Angular表達(dá)式阅酪，使用$eval()方法。Angular表達(dá)式必須使用$window來(lái)指向全局的'window'對(duì)象汁针。
舉幾個(gè)例子吧
<div ng-app>
<p>我的第一個(gè)表達(dá)式: {{ 5 + 5 }}</p>
</div>
輸出結(jié)果：我的第一個(gè)表達(dá)式: 10
<div ng-app="" ng-init="a=1;b=5">
<p>c={{ a * b }}</p>
</div>
輸出結(jié)果：c=5
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
輸出結(jié)果：姓名: John Doe
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓名 {{ person.lastName }}</p>
</div>
輸出結(jié)果：姓名 Doe
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個(gè)值為 {{ points[2] }}</p>
</div>
輸出結(jié)果：第三個(gè)值為 19
以上的代碼术辐，稍作改動(dòng)，都可以變?yōu)?code>ng-bind的寫(xiě)法施无，舉其中一個(gè)例子
<div ng-app="" ng-init="a=1;b=5">
<p>c= <span ng-bind="a * b"></span></p>
</div>
