AngularJs入門教程之環(huán)境搭建+創(chuàng)建應用示例
本文簡單講述了AngularJs環(huán)境搭建+創(chuàng)建應用的方法。分享給大家供大家參考，具體如下：
概述
AngularJS是Google工程師研發(fā)的一款JS框架，官方文檔中對它的描述是，它是完全使用JavaScript編寫的客戶端技術，同其他歷史悠久的Web技術（HTML，CSS等）配合使用，使得Web開發(fā)變得更簡單、更高效。它是筆者用過的比較有特色的一款框架，以HTML作為模版語言并擴展HTML屬性，使得應用組件開發(fā)保持高度的清晰和一致。本系列文章將以實際的案例簡單的介紹AngularJs的特性和用法。
開發(fā)環(huán)境搭建
俗話說"巧婦難為無米之炊"，我們要使用AngularJs開發(fā)Web應用首先要做的就是獲取AngularJs開發(fā)庫，AngularJs官網（ https://angularjs.org/）有提供下載。或者點擊此處本站下載。
獲取到AngularJs庫文件我們就可以開始了，但是為了提高工作效率，一款好的集成開發(fā)工具是必備可少的，這里筆者使用的是WebStorm。Chrome和Firefox提供的開發(fā)人員工具非常方便代碼調試，筆者使用的是Chrome，這里也推薦大家使用。下圖是WebStorm的工作界面，讀者也可以根據(jù)喜好自行選擇。
創(chuàng)建第一個應用
新建一個工程，將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指令可以出現(xiàn)在頁面中的任何標簽的屬性中，例如我們可以把它放在第二個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>
再次運行會發(fā)現(xiàn)，{{"First Angular App!"}}原樣輸出，這是因為只有ng-app指令之后的元素才會由AngularJs管理，所以我們通常把該指令放在html標簽中，讓AngularJs管理整個頁面。
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
這幾天升級公司的一個Angular項目遇到了一些問題,下面這篇文章主要給大家介紹了關于Angular8升級至Angular13遇到的問題解決,文中介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了SeaJS 與 RequireJS 的差異對比,本文主要對CMD規(guī)范和AMD規(guī)范的弊端做了對比,并做出了一個總結,需要的朋友可以參考下2014-12-12
快速解決angularJS中用post方法時后臺拿不到值的問題
今天小編就為大家分享一篇快速解決angularJS中用post方法時后臺拿不到值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Angular.js ng-file-upload結合springMVC的使用教程
這篇文章主要給大家介紹了關于Angular.js文件上傳控件ng-file-upload結合springMVC的使用教程，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
Angular學習筆記之angular的$filter服務淺析
本文是小編記錄的angular學習筆記，通過本文首先給大家介紹了$filter服務，然后介紹下內置filter及filter的簡單使用，非常不錯具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了Angularjs中ng-repeat的簡單實例的相關資料,這里提供兩個實例方法幫助大家徹底掌握這部分內容，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了深入理解Angularjs 臟值檢測，詳細的介紹了臟值檢測的原理和實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
ios設備中angularjs無法改變頁面title的解決方法
今天小編就為大家分享一篇ios設備中angularjs無法改變頁面title的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
將angular.js項目整合到.net mvc中的方法詳解
這篇文章主要給大家介紹了將angular.js項目整合到.net mvc中的相關資料，文中通過示例代碼將實現(xiàn)的過程介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。2017-06-06
AngularJS基礎 ng-mousemove 指令簡單示例
本文主要介紹AngularJS ng-mousemove 指令,這里幫大家整理了ng-mousemove 指令的詳細資料,并附有示例代碼,有需要的朋友參考下2016-08-08