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