本文簡單講述了AngularJs環境搭建+建立應用的方法。分享給大家供大家參考，具體如下：
概述
AngularJS是Google工程師研發的一款JS架構，官方文檔中對它的描述是，它是完全使用JavaScript編寫的用戶端技術，同其他曆史悠久的Web技術（HTML，CSS等）配合使用，使得Web開發變得更簡單、更高效。它是筆者用過的比較有特色的一款架構，以HTML作為模版語言並擴充HTML 屬性，使得應用組件開發保持高度的清晰和一致。本系列文章將以實際的案例簡單的介紹AngularJs的特性和用法。
開發環境搭建
俗話說"巧婦難為無米之炊"，我們要使用AngularJs開發Web應用首先要做的就是擷取AngularJs開發庫，AngularJs官網（ https://angularjs.org/）有提供下載。或者點擊此處本站下載。
擷取到AngularJs庫檔案我們就可以開始了，但是為了提高工作效率，一款好的整合開發工具是必備可少的，這裡筆者使用的是WebStorm。Chrome和Firefox提供的開發人員工具非常方便代碼調試，筆者使用的是Chrome，這裡也推薦大家使用。下圖是WebStorm的工作介面，讀者也可以根據喜好自行選擇。
建立第一個應用
建立一個工程，將AngularJs庫檔案夾拷貝的工程中。
接下來我們編寫第一個HTML5頁面。
<!DOCTYPE html><html ng-app><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script> <title>tutorial01_1</title></head><body><div> {{"First Angular App!"}}</div><div>{{"Anguar"}} </div></body></html>
我們通過<script>標籤引入angular.js檔案,用編輯器開啟angular.js可以看到最後有這樣幾行代碼：
jqLite(document).ready(function() { angularInit(document, bootstrap);});
在頁面載入時調用angularInit方法，也就是說我們引入angular.js檔案後頁面載入時也就啟動了AngularJs。
<html>標籤中定義了一個屬性ng-app，它是AngularJs的內建指令，用來告訴AngularJs該標籤之後的所有DOM元素都由AngularJs來管理。
"{{內容}}"這種形式為AngularJs的運算式，用來向HTML頁面中輸出內容。
在瀏覽器中運行該HTML頁面，可以看到我們通過運算式輸出的文字。
上面提到的ng-app指令可以出現在頁面中的任何標籤的屬性中，例如我們可以把它放在第二個div標籤中：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script> <title>tutorial01_2</title></head><body><div> {{"First Angular App!"}}</div><div ng-app>{{"Anguar"}} </div></body></html>
再次運行會發現，{{"First Angular App!"}}原樣輸出，這是因為只有ng-app指令之後的元素才會由AngularJs管理，所以我們通常把該指令放在html標籤中，讓AngularJs管理整個頁面。
希望本文所述對大家AngularJS程式設計有所協助。
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
