AngularJs Javascript MVC 框架

更新時(shí)間：2016年06月20日 10:44:41 作者：破狼

這篇文章主要介紹了AngularJs Javascript MVC 框架的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

在6月google發(fā)布了AngularJs 1.0穩(wěn)定版，

并宣稱：AngularJS可以讓你擴(kuò)展HTML的語(yǔ)法，以便清晰、簡(jiǎn)潔地表示應(yīng)用程序中的組件，并允許將標(biāo)準(zhǔn)的HTML作為你的模板語(yǔ)言，AngularJS可以通過(guò)雙向數(shù)據(jù)綁定自動(dòng)從擁有JavaScript對(duì) 象（模型）的UI（視圖）中同步數(shù)據(jù)。

開(kāi)始接觸AngularJs是在4月份來(lái)到新項(xiàng)目組，這時(shí)AngularJs還處于0.8未穩(wěn)定版，項(xiàng)目中已經(jīng)開(kāi)始使用了，并且這套框架應(yīng)用到了項(xiàng)目整個(gè)UI端，服務(wù)端也是未穩(wěn)定的web api，真心佩服團(tuán)隊(duì)的勇氣，對(duì)于新技術(shù)的熱情，幸好大家都能很好的駕馭，這是第一次嘗試一個(gè)充滿未穩(wěn)定技術(shù)的項(xiàng)目。

回到正題，先看一個(gè)官方實(shí)例：

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-...min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>

Demo:

Your name:

--------------------------------------------------------------------------------

Hello World!

注:在輸入框中輸入任何字符都會(huì)立即綁定更新到頁(yè)面.

1.這里采用ng-model指令（directive）綁定是模型scope屬性yourname。

2.并采用表達(dá)式將yourname綁定到文本信息中。

3.這里只需要任何的dom時(shí)間監(jiān)聽(tīng)，因?yàn)锳ngularJs內(nèi)置了。

AngularJs程序分為3部分：模板，表現(xiàn)層邏輯，數(shù)據(jù)（model）。

模板：我們用html，css寫(xiě)的ui視圖代碼，其中包含AngularJs的指令，表達(dá)式，并最終會(huì)被AngularJs編譯機(jī)制編譯為附加在dom樹(shù)上。AngularJs的指令（directive）可以由我們自由擴(kuò)展。

表現(xiàn)層邏輯：包括應(yīng)用程序邏輯和行為。用javascript定義作為視圖控制器邏輯。在AngularJs作為MVC框架，在控制器中我們無(wú)需添加對(duì)于dom級(jí)的事件監(jiān)聽(tīng)，這些在AngularJs中已經(jīng)內(nèi)置了。在ui節(jié)點(diǎn)dom事件發(fā)生后AngularJs會(huì)自動(dòng)轉(zhuǎn)到scope上的某個(gè)行為（Action）邏輯。

數(shù)據(jù)：視圖對(duì)象（viewobject）需要被AngularJs Scope（1.0中作為service出現(xiàn)）引用，可以使任何類型的javascript對(duì)象，數(shù)組，基本類型，對(duì)象。并且AngularJs會(huì)自動(dòng)異步更新模型，即在ui發(fā)生改變的時(shí)他會(huì)自動(dòng)刷新模型（mode），反之在模型發(fā)生改變的時(shí)候也會(huì)自動(dòng)刷新ui。在這里我們不需要定義形如getter，setter的一些列方法。

下面是一幅來(lái)自官方的視圖：

同時(shí)AngularJs為我們提供了一些列的有用的service，并允許我們添加自己特定業(yè)務(wù)的服務(wù)service，提供了底層的ajax, 緩存, URL 路由, 瀏覽器抽象服務(wù)，以及這些服務(wù)我們可以采用AngularJs的注入機(jī)制任意組合。同時(shí)AngularJs也是一個(gè)高度可測(cè)試性的javascript框架，你可以看見(jiàn)在官方的例子中都有帶上測(cè)試程序，給予BDD（行為驅(qū)動(dòng)）開(kāi)發(fā)框架。

以上所述是小編給大家介紹的AngularJs Javascript MVC 框架，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: