AngularJS是什么?
AngularJS是目前很火的前端JS框架之一, AngularJS的開發團隊將其描述為一種構建動態Web應用的結構化框架。它是完全使用JavaScript編寫的客戶端技術,其設計初衷是為了解決html構建web應用不足的缺陷,通過擴展html的語法,允許用戶更容易清楚的構建單頁面的應用。它主要包含四個核心思想:依賴注入、模塊化、雙向綁定、和語義化標簽。其中依賴注入和雙向綁定是其最大的創新點,相比於JQuery等其他框架, 用戶不必寫大量的代碼了。
AngularJS遵循MVC的設計的框架(也有人說是model-view-whatever框架),在Angular中扮演mode的角色被稱為作用域(scope),Html構建的視圖腳本則被稱為view,JavaScript函數定義自然充當控制器的角色。利用它,開發者可以將頁面的一部分封裝為一個應用,不強迫整個頁面使用AngularJs進行開發,這樣使得AngularJs可以和許多其他的web技術結合使用。
AngularJS HelloWorld
Angular JS入門和容易,到達中級水准需要對背后的原理有翻了解,到達專家級別需要大量的工程實踐經驗。作為初學者,我們先從一個Helloworld說起。代碼如下,代碼中包含入門的注釋:
<!DOCTYPE html>
<!--ng-app用於標識AngularJS的應用范圍,置於html標簽上表明整個單頁面應用在Ags的影響范圍內-->
<html ng-app>
<head>
<title>HelloWorld APP</title>
<!--引入AngularJS-->
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<!--ng-model指令將內部數據模型對象($scope)中的name屬性綁定到了文本輸入字段上, 這意味着無論在文本輸入字段中輸入了什么,都會同步到數據模型中。-->
<input ng-model="name" type="text" placeholder="Your name">
<!--使用{{}}將name包起來,以顯示¥scope中的name值-->
<h1>Hello {{ name }}</h1>
</body>
</html>
當我們在輸入框中輸入World, 在Hello之后會自動填充輸入框輸入的內容World.
本例中我們僅僅使用了十幾行的代碼就寫出了一個Helloworld應用,而且沒有使用java script代碼就創建出了實時視圖應用,自動數據綁定是實現這一功能的關鍵。自動數據綁定可以理解view是數據模型的映射,當客戶端的數據發生變化時,視圖實時反映出這種變化。
AngularJs通過臟檢查($digist)來實現數據變化更新機制,相比於通過在數據模型上綁定事件監聽的機制,這種方案更加高效。
Conclusion
今天學習了AngularJS的基本概念,通過一個helloworld實例來學習如何使用AngularJS構建一個簡單的AngularJS應用。快樂每一天。