AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用示例
本文簡單講述了AngularJs環(huán)境搭建+創(chuàng)建應(yīng)用的方法。分享給大家供大家參考,具體如下:
概述
AngularJS是Google工程師研發(fā)的一款JS框架,官方文檔中對它的描述是,它是完全使用JavaScript編寫的客戶端技術(shù),同其他歷史悠久的Web技術(shù)(HTML,CSS等)配合使用,使得Web開發(fā)變得更簡單、更高效。它是筆者用過的比較有特色的一款框架,以HTML作為模版語言并擴(kuò)展HTML屬性,使得應(yīng)用組件開發(fā)保持高度的清晰和一致。本系列文章將以實(shí)際的案例簡單的介紹AngularJs的特性和用法。
開發(fā)環(huán)境搭建
俗話說"巧婦難為無米之炊",我們要使用AngularJs開發(fā)Web應(yīng)用首先要做的就是獲取AngularJs開發(fā)庫,AngularJs官網(wǎng)( https://angularjs.org/)有提供下載?;蛘唿c(diǎn)擊此處本站下載。
獲取到AngularJs庫文件我們就可以開始了,但是為了提高工作效率,一款好的集成開發(fā)工具是必備可少的,這里筆者使用的是WebStorm。Chrome和Firefox提供的開發(fā)人員工具非常方便代碼調(diào)試,筆者使用的是Chrome,這里也推薦大家使用。下圖是WebStorm的工作界面,讀者也可以根據(jù)喜好自行選擇。
創(chuàng)建第一個(gè)應(yīng)用
新建一個(gè)工程,將AngularJs庫文件夾拷貝的工程中。
接下來我們編寫第一個(gè)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>標(biāo)簽引入angular.js文件,用編輯器打開angular.js可以看到最后有這樣幾行代碼:
jqLite(document).ready(function() { angularInit(document, bootstrap); });
在頁面加載時(shí)調(diào)用angularInit方法,也就是說我們引入angular.js文件后頁面加載時(shí)也就啟動了AngularJs。
<html>標(biāo)簽中定義了一個(gè)屬性ng-app,它是AngularJs的內(nèi)置指令,用來告訴AngularJs該標(biāo)簽之后的所有DOM元素都由AngularJs來管理。
"{{內(nèi)容}}"這種形式為AngularJs的表達(dá)式,用來向HTML頁面中輸出內(nèi)容。
在瀏覽器中運(yùn)行該HTML頁面,可以看到我們通過表達(dá)式輸出的文字。
上面提到的ng-app指令可以出現(xiàn)在頁面中的任何標(biāo)簽的屬性中,例如我們可以把它放在第二個(gè)div標(biāo)簽中:
<!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>
再次運(yùn)行會發(fā)現(xiàn),{{"First Angular App!"}}原樣輸出,這是因?yàn)橹挥衝g-app指令之后的元素才會由AngularJs管理,所以我們通常把該指令放在html標(biāo)簽中,讓AngularJs管理整個(gè)頁面。
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
詳解AngularJS controller調(diào)用factory
本篇文章主要介紹了詳解AngularJS controller調(diào)用factory,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05AngularJS+Bootstrap3多級導(dǎo)航菜單的實(shí)現(xiàn)代碼
將介紹如何用AngularJS構(gòu)建一個(gè)強(qiáng)大的web前端系統(tǒng)。文章介紹如何實(shí)現(xiàn)多限級導(dǎo)航菜單。本文圖文并茂給大家介紹的非常詳細(xì),感興趣的朋友參考下吧2017-08-08AngularJS模仿Form表單提交的實(shí)現(xiàn)代碼
本文通過一段實(shí)例代碼給大家簡單介紹了angularjs模仿form表單提交的方法,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-12-12AngularJS實(shí)現(xiàn)進(jìn)度條功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)進(jìn)度條功能,結(jié)合具體完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)進(jìn)度條功能的原理、相關(guān)知識點(diǎn)與注意事項(xiàng),需要的朋友可以參考下2017-07-07AngularJS入門教程之AngularJS表達(dá)式
AngularJS應(yīng)用表達(dá)式是純javascript表達(dá)式,并輸出它們被使用的數(shù)據(jù)在那里。本文給大家介紹AngularJS入門教程之AngularJS表達(dá)式,對angularjs表達(dá)式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-04-04Angular2實(shí)現(xiàn)自定義雙向綁定屬性
本篇文章主要介紹了Angular 2實(shí)現(xiàn)自定義 雙向綁定 屬性,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03Angular使用動態(tài)加載組件方法實(shí)現(xiàn)Dialog的示例
這篇文章主要介紹了Angular使用動態(tài)加載組件方法實(shí)現(xiàn)Dialog的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05