首頁 > 開發者 > JavaScript
AngularJS-入門篇
AngularJS是什麼? 既然能找到這篇日誌，證明大家已經瞭解AngularJS了我這裡也就不長篇大論的說了。 其實AngularJS就是，使用JavaScript編寫的用戶端技術。和Web技術（ HTML、 CSS 和JavaScript）配合使用，使Web應用開發比以往更簡單、更快捷。 剛開始學習，咱們得有學的工具，這裡建議推薦使用vs，版本無所謂 後面的demo ，我這裡基本上都會使用vs2013來進行開發。 說了這麼多，一起來寫一個小demo，開始咱們神奇的AngularJS之旅吧。1.先下載包： 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應用的解析 本節描述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應用。代碼在做什麼呢？ ng-app指令： <html lang="en" ng-app>ng-app指令標記了AngularJS指令碼的範圍，在<html>中添加ng-app屬性即說明整個<html>都是AngularJS指令碼範圍。開發人員也可以在局部使用ng-app指令，如<div ng-app>，則AngularJS指令碼僅在該<div>中運行。 AngularJS指令碼標籤： <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中運行。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
