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