當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

Day 2: AngularJS —— 对AngularJS的初步认识

發(fā)布時(shí)間：2025/3/21 javascript 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 Day 2: AngularJS —— 对AngularJS的初步认识小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

昨晚我完爆了一天一技術(shù)的任務(wù)（完成的很好），談的是關(guān)于Bower的一些知識(shí)，你可以在這里看一下文章，也可以去 reddit 看看大家的討論。

今天我打算學(xué)習(xí)一下AngularJS的基本知識(shí)，并希望能用它做一個(gè)簡(jiǎn)單小應(yīng)用。我也會(huì)在這篇文章里用到Bower，我不可能在一天之內(nèi)學(xué)習(xí)完AngularJS，所以我打算用好幾天時(shí)間來(lái)學(xué)習(xí)，每天涉及其中不同的點(diǎn)。

什么是AngularJS？

擴(kuò)展HTML添加動(dòng)態(tài)特性，因此我們可以輕松地構(gòu)建現(xiàn)代web應(yīng)用程序

以你想要的方式使用

帶你回到HTML

聲明方法

簡(jiǎn)單

通過(guò)雙向數(shù)據(jù)綁定消除DOM操作，任何時(shí)候當(dāng)模型改變時(shí)視圖都會(huì)得到更新，反之亦然

你可以用它來(lái)構(gòu)建單頁(yè)Web應(yīng)用程序。當(dāng)你構(gòu)建如路由，Ajax調(diào)用，數(shù)據(jù)綁定，緩存，歷史記錄和DOM操作這類的SPA應(yīng)用時(shí)，會(huì)有很多的挑戰(zhàn)。

AngularJS的主要組件是：

控制器：視圖背后的代碼

作用域：包含模型數(shù)據(jù)，粘合控制器和視圖

模塊：定義新的服務(wù)，或使用現(xiàn)有的服務(wù)、指令、過(guò)濾器等，模塊可以依賴于另一個(gè)模塊

指令：允許你通過(guò)定義自己項(xiàng)目特定的HTML指令來(lái)擴(kuò)展HTML，學(xué)習(xí)HTML的新花樣

為什么我會(huì)在意AngularJS？

對(duì)我而言有兩個(gè)主要原因：

它是由谷歌支持，有很多開(kāi)發(fā)者的大社區(qū)

全棧框架：這意味著我不需要依靠其他數(shù)百萬(wàn)計(jì)的腳本，它們會(huì)很好地整合在一起

前提準(zhǔn)備

我們將使用Bower為示例應(yīng)用程序安裝AngularJS，如果你還沒(méi)有安裝bower，那么請(qǐng)看我前一篇博文。

安裝AngularJS

在系統(tǒng)的任何方便的位置創(chuàng)建一個(gè)叫 bookshop 的目錄，用下面命令來(lái)安裝AngularJS和Twitter bootstrap：

$ bower install angular $ bower install bootstrap

上面的命令會(huì)在bookshop目錄下創(chuàng)建一個(gè)叫bower_components的文件夾，里邊有已安裝的全部組件。

開(kāi)始使用AngularJS

現(xiàn)在創(chuàng)建一個(gè)名為 index.html 的html文件，它將會(huì)是一個(gè)基于AngularJS的網(wǎng)上書(shū)店應(yīng)用。

<!doctype html> <html> <head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body><div class="container"><h2>Your Online Bookshop</h2></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>

如果你在瀏覽器打開(kāi)這個(gè)文件，你會(huì)看到“你的網(wǎng)上書(shū)店”正在呈現(xiàn)，但這并不是AngularJS的厲害之處，所以接下來(lái)我們看看它真正有趣的地方：

上邊這段代碼有一些需要注意的點(diǎn)：

在HTML標(biāo)簽里邊，我們已經(jīng)定義了ng-app。這將初始化AngularJS應(yīng)用程序，并告訴AngularJS要在這一部分活躍。所以，它在應(yīng)用程序里是活躍整個(gè)html文件的。

我們所使用的第二個(gè)Angular指令是ng-init。這將初始化書(shū)籍?dāng)?shù)組中的一個(gè)，我們可以將它應(yīng)用在我們的應(yīng)用程序中。

最后一個(gè)有趣的部分，是用于遍歷集合中的所有元素的ng-repeat指令。Angular將為每個(gè)元素增加 li 元素。所以，如果我們?cè)赪eb瀏覽器中打開(kāi)它，將會(huì)看到在一個(gè)列表中有四本書(shū)。

上邊是以字符串?dāng)?shù)組的形式使用數(shù)據(jù)，但也可以用存儲(chǔ)對(duì)象的方式，如下：

<!doctype html> <html ng-app> <head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body><div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"><h2>Your Online Bookshop</h2><ul class="unstyled"><li ng-repeat="book in books"><span>{{book.name}} written by {{book.author}}</span></li></ul></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>

在上面的代碼中，我們創(chuàng)建了一個(gè)書(shū)籍?dāng)?shù)組對(duì)象，其中每本書(shū)對(duì)象都有名字和作者。最后，我們?cè)诹斜碇型瑫r(shí)列出作者姓名和書(shū)籍名稱。

使用過(guò)濾器

Angular提供了過(guò)濾器，這有助于格式化數(shù)據(jù)。你可以使用過(guò)濾器來(lái)格式化日期、貨幣、大小寫(xiě)字符、排列順序和基于搜索的過(guò)濾。下面就是一個(gè)教你如何利用過(guò)濾器來(lái)大寫(xiě)的作者姓名和按書(shū)名來(lái)排序的例子：

<!doctype html> <html ng-app> <head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body><div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"><h2>Your Online Bookshop</h2><ul class="unstyled"><li ng-repeat="book in books | orderBy :'name'"><span>{{book.name}} written by {{book.author | uppercase}}</span></li></ul></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>

正如你所看到的，我們?cè)?ng-repeat 指令中使用了按順序排列的過(guò)濾器，在顯示作者姓名時(shí)用一個(gè)大寫(xiě)過(guò)濾器。

為了添加一個(gè)搜索過(guò)濾器，添加搜索輸入的文本框，然后使用一個(gè)過(guò)濾器以搜索限制結(jié)果，如下：

<!doctype html> <html ng-app> <head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body><div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"><h2>Your Online Bookshop</h2><input type="search" ng-model="criteria"><ul class="unstyled"><li ng-repeat="book in books | filter:criteria | orderBy :'name'"><span>{{book.name}} written by {{book.author | uppercase}}</span></li></ul></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>

使用控制器

控制器是AngularJS的主要組件之一，它們是給視圖提供動(dòng)力和數(shù)據(jù)的代碼。在我們的例子中，我們可以將測(cè)試數(shù)據(jù)初始化代碼移到一個(gè)控制器，創(chuàng)建一個(gè)名為app.js的JavaScript文件，它將容納我們應(yīng)用程序所有特定的JavaScript代碼。

function BookCtrl($scope){$scope.books = [{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}] }

$scope 控制器和視圖之間的粘合劑，而且會(huì)注入到BookCtrl。現(xiàn)在我們添加書(shū)籍?dāng)?shù)組的對(duì)象到 $scope 對(duì)象，這個(gè)對(duì)象對(duì)視圖是可見(jiàn)的。

現(xiàn)在改變index.html使用BookCtrl，如下：

<!DOCTYPE html> <html ng-app> <head><title>Bookshop - Your Online Bookshop</title><link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body><div class="container" ng-controller="BookCtrl"><h2>Your Online Bookshop</h2><input type="search" ng-model="criteria"><ul class="unstyled"><li ng-repeat="book in books | filter:criteria | orderBy :'name'"><span>{{book.name}} written by {{book.author | uppercase}}</span></li></ul></div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>

今天就這些內(nèi)容，這也只是冰山一角。我將會(huì)用很多天來(lái)學(xué)習(xí)AngularJS的特性，它真的是一個(gè)神奇又強(qiáng)大的庫(kù)。

原文 Day 2: AngularJS--Getting My Head Around AngularJS
翻譯 SegmentFault

from: http://segmentfault.com/a/1190000000350125

總結(jié)

以上是生活随笔為你收集整理的Day 2: AngularJS —— 对AngularJS的初步认识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Day 1: Bower —— 管理你的
下一篇： Day 3: Flask —— 使用Py