Hello World!
開始學習AngularJS的一個好方法是建立經典應用程序「Hello World!」：html
- 使用您喜好的文本編輯器，建立一個HTML文件，例如：helloworld.html。
- 將下面的源代碼複製到您的HTML文件。
- 在web瀏覽器中打開這個HTML文件。
源代碼angularjs
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Hello {{'World'}}! </body> </html>
請在您的瀏覽器中運行以上代碼查看效果。web
如今讓咱們仔細看看代碼，看看到底怎麼回事。 當加載該頁時，標記ng-app告訴AngularJS處理整個HTML頁並引導應用：設計模式
<html ng-app>
這行載入AngularJS腳本：數組
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
（想了解AngularJS處理整個HTML頁的細節，請看Bootstrap。）瀏覽器
最後，標籤中的正文是應用的模板，在UI中顯示咱們的問候語：緩存
Hello {{'World'}}!
注意，使用雙大括號標記{{}}的內容是問候語中綁定的表達式，這個表達式是一個簡單的字符串‘World’。app
下面，讓咱們看一個更有趣的例子：使用AngularJS對咱們的問候語文本綁定一個動態表達式。編輯器
Hello AngularJS World!
本示例演示AngularJS的雙向數據綁定（bi-directional data binding）：學習
- 編輯前面建立的helloworld.html文檔。
- 將下面的源代碼複製到您的HTML文件。
- 刷新瀏覽器窗口。
源代碼
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! </body> </html>
請在您的瀏覽器中運行以上代碼查看效果。
該示例有一下幾點重要的注意事項：
- 文本輸入指令
<input ng-model="yourname" />綁定到一個叫yourname的模型變量。 - 雙大括號標記將
yourname模型變量添加到問候語文本。 - 你不須要爲該應用另外註冊一個事件偵聽器或添加事件處理程序！
如今試着在輸入框中鍵入您的名稱，您鍵入的名稱將當即更新顯示在問候語中。 這就是AngularJS雙向數據綁定的概念。 輸入框的任何更改會當即反映到模型變量（一個方向），模型變量的任何更改都會當即反映到問候語文本中（另外一方向）。
AngularJS應用的解析
本節描述AngularJS應用程序的三個組成部分，並解釋它們如何映射到模型-視圖-控制器設計模式：
模板（Templates）
模板是您用HTML和CSS編寫的文件，展示應用的視圖。 您可給HTML添加新的元素、屬性標記，做爲AngularJS編譯器的指令。 AngularJS編譯器是徹底可擴展的，這意味着經過AngularJS您能夠在HTML中構建您本身的HTML標記！
應用程序邏輯（Logic）和行爲（Behavior）
應用程序邏輯和行爲是您用JavaScript定義的控制器。AngularJS與標準AJAX應用程序不一樣，您不須要另外編寫偵聽器或DOM控制器，由於它們已經內置到AngularJS中了。這些功能使您的應用程序邏輯很容易編寫、測試、維護和理解。
模型數據（Data）
模型是從AngularJS做用域對象的屬性引伸的。模型中的數據多是Javascript對象、數組或基本類型，這都不重要，重要的是，他們都屬於AngularJS做用域對象。
AngularJS經過做用域來保持數據模型與視圖界面UI的雙向同步。一旦模型狀態發生改變，AngularJS會當即刷新反映在視圖界面中，反之亦然。
此外，AngularJS還提供了一些很是有用的服務特性：
- 底層服務包括依賴注入，XHR、緩存、URL路由和瀏覽器抽象服務。
- 您還能夠擴展和添加本身特定的應用服務。
- 這些服務可讓您很是方便的編寫WEB應用。