資訊專欄INFORMATION COLUMN
摘要：開(kāi)始使用現(xiàn)在創(chuàng)建一個(gè)名為的文件，它將會(huì)是一個(gè)基于的網(wǎng)上書店應(yīng)用。這將初始化應(yīng)用程序，并告訴要在這一部分活躍。將為每個(gè)元素增加元素?？刂破骱鸵晥D之間的粘合劑，而且會(huì)注入到。現(xiàn)在我們添加書籍?dāng)?shù)組的對(duì)象到對(duì)象，這個(gè)對(duì)象對(duì)視圖是可見(jiàn)的。
編者注：我們發(fā)現(xiàn)了比較有趣的系列文章《30天學(xué)習(xí)30種新技術(shù)》，準(zhǔn)備翻譯，一天一篇更新，年終禮包。以下是第二天技術(shù)的譯文。
昨晚我完爆了一天一技術(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)。
擴(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的新花樣
對(duì)我而言有兩個(gè)主要原因：
它是由谷歌支持，有很多開(kāi)發(fā)者的大社區(qū)
全?？蚣埽哼@意味著我不需要依靠其他數(shù)百萬(wàn)計(jì)的腳本，它們會(huì)很好地整合在一起
我們將使用Bower為示例應(yīng)用程序安裝AngularJS，如果你還沒(méi)有安裝bower，那么請(qǐng)看我前一篇博文。
在系統(tǒng)的任何方便的位置創(chuàng)建一個(gè)叫 bookshop 的目錄，用下面命令來(lái)安裝AngularJS和Twitter bootstrap：
$ bower install angular $ bower install bootstrap
上面的命令會(huì)在bookshop目錄下創(chuàng)建一個(gè)叫bower_components的文件夾，里邊有已安裝的全部組件。
現(xiàn)在創(chuàng)建一個(gè)名為 index.html 的html文件，它將會(huì)是一個(gè)基于AngularJS的網(wǎng)上書店應(yīng)用。
Bookshop - Your Online Bookshop
Your Online Bookshop
如果你在瀏覽器打開(kāi)這個(gè)文件，你會(huì)看到“你的網(wǎng)上書店”正在呈現(xiàn)，但這并不是AngularJS的厲害之處，所以接下來(lái)我們看看它真正有趣的地方：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book}}
上邊這段代碼有一些需要注意的點(diǎn)：
在HTML標(biāo)簽里邊，我們已經(jīng)定義了ng-app。這將初始化AngularJS應(yīng)用程序，并告訴AngularJS要在這一部分活躍。所以，它在應(yīng)用程序里是活躍整個(gè)html文件的。
我們所使用的第二個(gè)Angular指令是ng-init。這將初始化書籍?dāng)?shù)組中的一個(gè)，我們可以將它應(yīng)用在我們的應(yīng)用程序中。
最后一個(gè)有趣的部分，是用于遍歷集合中的所有元素的ng-repeat指令。Angular將為每個(gè)元素增加 li 元素。所以，如果我們?cè)赪eb瀏覽器中打開(kāi)它，將會(huì)看到在一個(gè)列表中有四本書。
上邊是以字符串?dāng)?shù)組的形式使用數(shù)據(jù)，但也可以用存儲(chǔ)對(duì)象的方式，如下：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book.name}} written by {{book.author}}
在上面的代碼中，我們創(chuàng)建了一個(gè)書籍?dāng)?shù)組對(duì)象，其中每本書對(duì)象都有名字和作者。最后，我們?cè)诹斜碇型瑫r(shí)列出作者姓名和書籍名稱。
使用過(guò)濾器Angular提供了過(guò)濾器，這有助于格式化數(shù)據(jù)。你可以使用過(guò)濾器來(lái)格式化日期、貨幣、大小寫字符、排列順序和基于搜索的過(guò)濾。下面就是一個(gè)教你如何利用過(guò)濾器來(lái)大寫的作者姓名和按書名來(lái)排序的例子：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book.name}} written by {{book.author | uppercase}}
正如你所看到的，我們?cè)?ng-repeat 指令中使用了按順序排列的過(guò)濾器，在顯示作者姓名時(shí)用一個(gè)大寫過(guò)濾器。
為了添加一個(gè)搜索過(guò)濾器，添加搜索輸入的文本框，然后使用一個(gè)過(guò)濾器以搜索限制結(jié)果，如下：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book.name}} written by {{book.author | uppercase}}
使用控制器
控制器是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?，F(xiàn)在我們添加書籍?dāng)?shù)組的對(duì)象到 $scope 對(duì)象，這個(gè)對(duì)象對(duì)視圖是可見(jiàn)的。
現(xiàn)在改變index.html使用BookCtrl，如下：
Bookshop - Your Online Bookshop
Your Online Bookshop
-
{{book.name}} written by {{book.author | uppercase}}
今天就這些內(nèi)容，這也只是冰山一角。我將會(huì)用很多天來(lái)學(xué)習(xí)AngularJS的特性，它真的是一個(gè)神奇又強(qiáng)大的庫(kù)。
原文 Day 2: AngularJS--Getting My Head Around AngularJS
翻譯 SegmentFault
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/77963.html
摘要：在被收購(gòu)之后，維護(hù)并繼續(xù)發(fā)展。設(shè)置是告訴應(yīng)用在目錄尋找應(yīng)用模板。設(shè)置告訴應(yīng)用使用目錄里面的類似圖像文件等靜態(tài)文件。我們會(huì)在應(yīng)用開(kāi)發(fā)過(guò)程中，保持著調(diào)試器在后臺(tái)運(yùn)行。這能提供高效的開(kāi)發(fā)環(huán)境。我們會(huì)把回應(yīng)狀態(tài)設(shè)為已創(chuàng)建。 編者注：我們發(fā)現(xiàn)了有趣的系列文章《30天學(xué)習(xí)30種新技術(shù)》，正在翻譯，一天一篇更新，年終禮包。下面是第23天的內(nèi)容。 今天的《30天學(xué)習(xí)30種新技術(shù)》，我決定暫時(shí)放下...
摘要：今天的天學(xué)習(xí)種新技術(shù)挑戰(zhàn)，我決定使用框架和開(kāi)發(fā)一個(gè)單頁(yè)面應(yīng)用。應(yīng)用我們將開(kāi)發(fā)一個(gè)社交化書簽應(yīng)用，允許用戶提交和分享鏈接。在元素中使用指令，意味著在整個(gè)中可用。我使用作為該應(yīng)用的模塊名。 編者注：我們發(fā)現(xiàn)了有趣的系列文章《30天學(xué)習(xí)30種新技術(shù)》，正在翻譯，一天一篇更新，年終禮包。下面是第22天的內(nèi)容。 今天的《30天學(xué)習(xí)30種新技術(shù)》挑戰(zhàn)，我決定使用Spring框架、MongoD...
摘要：會(huì)警告該插件未簽名。以上命令告訴創(chuàng)建一個(gè)名為的項(xiàng)目，使用包。的工具使從部署應(yīng)用非常方便。域名構(gòu)成了分配給應(yīng)用的的一部分。這將為我們創(chuàng)建一個(gè)應(yīng)用容器，自動(dòng)配置和。同時(shí)將創(chuàng)建一個(gè)私有的倉(cāng)庫(kù)并克隆到本地。 編者注：我們發(fā)現(xiàn)了有趣的系列文章《30天學(xué)習(xí)30種新技術(shù)》，正在翻譯，一天一篇更新，年終禮包。下面是第 17 天的內(nèi)容。 今天的30天學(xué)習(xí)30種新技術(shù)挑戰(zhàn)，我決定學(xué)習(xí)一下JBoss ...
摘要：模塊和依賴注入細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)了，到目前為止所用到的例子都是使用的全局的構(gòu)造函數(shù)來(lái)定義控制器的。這非常的簡(jiǎn)單，只需使用如下參數(shù)來(lái)調(diào)用即可控制器的名字字符串類型控制器的構(gòu)造函數(shù)全局定義的控制器構(gòu)造函數(shù)只適用于快速示例和原型開(kāi)發(fā)。 上一篇：【譯】《精通使用AngularJS開(kāi)發(fā)Web App》（三） 下一篇： 書名：Mastering Web Application Develop...
摘要：最近在看，打算跟著書中的代碼敲一遍，加深對(duì)的理解。在這里記錄過(guò)程中的問(wèn)題與心得。根據(jù)排查內(nèi)存耗盡應(yīng)該是這個(gè)版本的問(wèn)題，換成后問(wèn)題消失。因此認(rèn)為這種寫法是有風(fēng)險(xiǎn)的，必須用頂上那一行注釋表明我確實(shí)要全局都的才行。不得不感嘆的嚴(yán)謹(jǐn)。 最近在看 build your own angularjs ，打算跟著書中的代碼敲一遍，加深對(duì)AngularJS的理解。在這里記錄過(guò)程中的問(wèn)題與心得。 Int...
閱讀 1772·2021-11-24 09:39
閱讀 1570·2021-11-16 11:54
閱讀 3508·2021-11-11 16:55
閱讀 1681·2021-10-14 09:43
閱讀 1456·2019-08-30 15:55
閱讀 1247·2019-08-30 15:54
閱讀 3433·2019-08-30 15:53
閱讀 1352·2019-08-30 14:18
