快捷導(dǎo)航

AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用示例

更新時(shí)間：2016年11月01日 14:24:23 作者：Rongbo_J

這篇文章主要介紹了AngularJs入門教程之環(huán)境搭建+創(chuàng)建應(yīng)用的方法,較為詳細(xì)的分析了AngularJS的功能、下載及應(yīng)用創(chuàng)建方法,需要的朋友可以參考下

本文簡單講述了AngularJs環(huán)境搭建+創(chuàng)建應(yīng)用的方法。分享給大家供大家參考，具體如下：

概述

AngularJS是Google工程師研發(fā)的一款JS框架，官方文檔中對(duì)它的描述是，它是完全使用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í)也就啟動(dòng)了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)行會(huì)發(fā)現(xiàn)，{{"First Angular App!"}}原樣輸出，這是因?yàn)橹挥衝g-app指令之后的元素才會(huì)由AngularJs管理，所以我們通常把該指令放在html標(biāo)簽中，讓AngularJs管理整個(gè)頁面。