當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時間：2025/3/21 javascript 16 豆豆

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

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

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

什么是AngularJS？

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

以你想要的方式使用

帶你回到HTML

聲明方法

簡單

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

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

AngularJS的主要組件是：

控制器：視圖背后的代碼

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

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

指令：允許你通過定義自己項目特定的HTML指令來擴展HTML，學習HTML的新花樣

為什么我會在意AngularJS？

對我而言有兩個主要原因：

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

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

前提準備

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

安裝AngularJS

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

$ bower install angular $ bower install bootstrap

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

開始使用AngularJS

現(xiàn)在創(chuàng)建一個名為 index.html 的html文件，它將會是一個基于AngularJS的網(wǎng)上書店應(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>

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

上邊這段代碼有一些需要注意的點：

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

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

最后一個有趣的部分，是用于遍歷集合中的所有元素的ng-repeat指令。Angular將為每個元素增加 li 元素。所以，如果我們在Web瀏覽器中打開它，將會看到在一個列表中有四本書。

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

<!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)建了一個書籍數(shù)組對象，其中每本書對象都有名字和作者。最后，我們在列表中同時列出作者姓名和書籍名稱。

使用過濾器

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

<!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>

正如你所看到的，我們在 ng-repeat 指令中使用了按順序排列的過濾器，在顯示作者姓名時用一個大寫過濾器。

為了添加一個搜索過濾器，添加搜索輸入的文本框，然后使用一個過濾器以搜索限制結(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的主要組件之一，它們是給視圖提供動力和數(shù)據(jù)的代碼。在我們的例子中，我們可以將測試數(shù)據(jù)初始化代碼移到一個控制器，創(chuàng)建一個名為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 控制器和視圖之間的粘合劑，而且會注入到BookCtrl。現(xiàn)在我們添加書籍數(shù)組的對象到 $scope 對象，這個對象對視圖是可見的。

現(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)容，這也只是冰山一角。我將會用很多天來學習AngularJS的特性，它真的是一個神奇又強大的庫。

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

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

總結(jié)

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

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

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