AngularJS是什么?
既然能找到這篇日志,證明大家已經了解AngularJS了我這里也就不長篇大論的說了。
其實AngularJS就是,使用javaScript編寫的客戶端技術。和Web技術( HTML、 CSS 和Javascript)配合使用,使Web應用開發比以往更簡單、更快捷。
剛開始學習,咱們得有學的工具,這里建議推薦使用vs,版本無所謂 后面的demo ,我這里基本上都會使用vs2013來進行開發。
說了這么多,一起來寫一個小demo,開始咱們神奇的AngularJS之旅吧。
1.先下載包:http://files.VEVb.com/files/xiaowei0705/angular.min.js
2新建一個頁面,寫入以下代碼:
<!doctype html>
<html ng-app>
<head>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
姓名: <input type="text" ng-model="yourname" placeholder="請輸入姓名">
<hr>
你好: {{yourname || '小偉'}}!
</body>
</html>
運行結果: 咱們頁面沒有做任何的js處理,居然能自動改變!
該示例有一下幾點重要的注意事項:
<input ng-model="yourname" />
綁定到一個叫yourname
的模型變量。yourname
模型變量添加到問候語文本。現在試著在輸入框中鍵入您的名稱,您鍵入的名稱將立即更新顯示在問候語中。 這就是AngularJS雙向數據綁定的概念。 輸入框的任何更改會立即反映到模型變量(一個方向),模型變量的任何更改都會立即反映到問候語文本中(另一方向)。
本節描述AngularJS應用程序的三個組成部分,并解釋它們如何映射到模型-視圖-控制器設計模式:
模板是您用HTML和CSS編寫的文件,展現應用的視圖。 您可給HTML添加新的元素、屬性標記,作為AngularJS編譯器的指令。 AngularJS編譯器是完全可擴展的,這意味著通過AngularJS您可以在HTML中構建您自己的HTML標記!
應用程序邏輯和行為是您用JavaScript定義的控制器。AngularJS與標準Ajax應用程序不同,您不需要另外編寫偵聽器或DOM控制器,因為它們已經內置到AngularJS中了。這些功能使您的應用程序邏輯很容易編寫、測試、維護和理解。
模型是從AngularJS作用域對象的屬性引申的。模型中的數據可能是Javascript對象、數組或基本類型,這都不重要,重要的是,他們都屬于AngularJS作用域對象。
AngularJS通過作用域來保持數據模型與視圖界面UI的雙向同步。一旦模型狀態發生改變,AngularJS會立即刷新反映在視圖界面中,反之亦然。
ng-app
指令:<html lang="en" ng-app>
ng-app
指令標記了AngularJS腳本的作用域,在<html>
中添加ng-app
屬性即說明整個<html>
都是AngularJS腳本作用域。開發者也可以在局部使用ng-app
指令,如<div ng-app>
,則AngularJS腳本僅在該<div>
中運行。
<script src="lib/angular/angular.js"></script>
這行代碼載入angular.js腳本,當瀏覽器將整個HTML頁面載入完畢后將會執行該angular.js腳本,angular.js腳本運行后將會尋找含有ng-app
指令的HTML標簽,該標簽即定義了AngularJS應用的作用域。
<p>Nothing here {{'yet' + '!'}}</p>
這行代碼演示了AngularJS模板的核心功能——綁定,這個綁定由雙大括號{{}}
和表達式'yet' + '!'
組成。
這個綁定告訴AngularJS需要運算其中的表達式并將結果插入DOM中,接下來的步驟我們將看到,DOM可以隨著表達式運算結果的改變而實時更新。
AngularJS表達式Angular exPRession是一種類似于JavaScript的代碼片段,AngularJS表達式僅在AngularJS的作用域中運行,而不是在整個DOM中運行。
源碼:http://files.VEVb.com/files/xiaowei0705/Web_Demo_001.rar
新聞熱點
疑難解答