5個示例帶你學習AngularJS

時間 2019-11-12

原文原文鏈接

本文由伯樂在線 - 蟈蟈翻譯自 tutorialzine。歡迎加入技術翻譯小組。轉載請參見文章末尾處的要求。

angularjs

直到如今，你或許已經據說過AngularJS了，一個改變你對web應用思考方式，由谷歌開發的使人興奮的開源框架。關於它的文章已經寫得很是之多，但我發現仍是要寫些給那些更喜歡快速且實際例子的開發者。當今對web編程已經發生了改變。下面經過對5個實例的解釋，你能夠找到Angular應用的基本構建塊，包括模型，視圖，控制器，服務和過濾器，你能夠在本身的瀏覽器中直接編輯。若是你更傾向於在你喜歡的代碼編輯器中打開，那麼請下載zip包。web

什麼是AngularJS？

在高層次理解之上，AngularJS是一個把HTML(視圖)綁定到JavaScript對象(模型)上的框架。當模型改變時，頁面也能自動隨之更新，反之亦然。當某個域的內容發生變化時，與之關聯的模型也能更新。正由於Angular處理了全部的中間代碼，因此你不用像jQuery那樣，手動更新HTML或者事件監聽。事實上，這裏沒有任何一個例子使用到了jQuery！ajax

若是要使用AnguarJS，你就得在<body>標籤結束以前把它包含到你的頁面裏。這裏推薦使用谷歌CDN，相比來講，它有比較快速的加載時間：編程

<script

src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" ><

/script>

AngularJS經過大量的指令讓你可以在模型和HTML元素間作關聯。它們就是以ng-開頭的屬性，而且能添加到任何元素上。若是你想使用Angular，你不得不爲每一個頁面包含一個最重要的屬性，即ng-app:api

1	`<body ng-app>`

這個元素應該被添加到可以包含剩餘頁面的元素上，諸如body或者外圍的div元素之類。當頁面加載時，Angular會尋找這個屬性，而且會自動評估在子元素上看到的全部指令。數組

理論部分就到此爲止了！如今讓咱們看看代碼。瀏覽器

1.導航菜單

做爲第一個例子，咱們要構建一個會高亮選中條目的導航菜單。這個例子僅僅使用了Angular指令，同時可能也是使用這個框架最簡單的應用。查看源代碼請單擊」編輯」按鈕。開始準備實驗了！服務器

從以上的代碼得知，咱們使用到了Angular指令來設置以及讀取active變量。當它改變時，它會引發使用到它的HTML自動更新。在Angular的術語中，這樣的變量叫作模型。當前域中的全部指令都能使用它，而且在你的控制器(更多請看下面的例子)中也能獲取獲得。app

若是你以前使用過JavaScript模板，你對{{var}}語法應該會很熟悉。當框架看到這樣的字符串時，它會用變量的內容來代替。這種操做在變量改變時會重複一次。框架

2.內聯編輯器

對第二個例子，咱們會建立一個簡單的內聯編輯器-單擊段落時會顯示文本提示框。咱們會使用到一種控制器，可以初始化模型，以及聲明兩個函數用來切換提示的可見性。控制器是常規的JavaScript函數，能自動被Angular執行。使用中，用ng-controller指令關聯相關的頁面。

當控制器函數執行時，它能獲得特殊的$scope對象做爲其一個參數。在這個對象上增長屬性或者函數，一樣對視圖可用。使用ng-model綁定在文本域上告訴Angular當域值改變時，要更新相關內容(這樣反過來就能從新渲染段落上的值)。

3.訂單表單

在這個例子裏，咱們使用另外一個Angular中很是有用的特性-過濾器，來編寫一個能實時更新總價的訂單表單。過濾器能經過管道符」|」級聯起來修改模型。在下面的例子中，我使用了貨幣過濾器，把數字轉換爲正確格式化的價格，包括美圓符號以及分。你也能夠和即將看到的第四個例子同樣，很容易地創造本身的過濾器。

ng-repeat綁定(文檔)是框架的另外一個有用的特性，可以讓你遍歷數組元素而且生成相應的標記。當某個條目改變或者刪除時，它可以智能地更新。

註釋：要獲得更完整的版本，請查閱此教程，基於這個版本用Backbone.js實現。

4.即時搜索

這個例子容許用戶經過在文本域輸入來過濾條目集。這是Angular另外一個出衆的地方，也是編寫自定義的過濾器最合適的地方。既然要這樣作，首先咱們就不得不把咱們的應用轉換成一個模塊。

模塊是把JavaScript應用組織成經過新穎而又有趣的方式進行綁定造成獨立組件的一種方式。Angular經過這種技術達到了代碼分離，而且要求你建立過濾器時遵循這種方式。在把你的應用轉變成模塊中，你僅僅須要作兩件事：

1.在你的JS中使用angular.module(「name」,[])函數調用。這樣就會進行初始化而且返回一個新的模塊；

2.經過ng-app指令值傳遞模塊的名稱。

而後建立過濾器僅僅是簡單地調用由angular.module(「name」,[])返回的模塊對象上的filter()方法。

過濾器一樣遵循Angular.js的哲學理念–每一份你寫的代碼應該是獨立的，可測試的以及可重用的。你能夠在全部視圖中使用這個過濾器，甚至經過級聯和其它組件鏈接起來。

5.切換網格

另外一個常常用到的交互UI是經過單擊按鈕來切換不一樣的佈局模式(網格或者列表)。這用Angular來作很是容易。另外，我會介紹一下另外一個重要的概念–服務。它們是一種對象，可以用來讓你的應用和服務器進行交互，好比：API，或者其它數據源。這個例子裏，咱們會編寫一個與InstagramAPI交互的服務，用它來返回以數組形式當前最流行的圖片。

請注意，要運行此代碼，咱們要在頁面中包含額外的一個Angular.js：

<script

src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"><

/script>

這其中包含了ngResource模塊，能很是容易與AJAXAPI一塊兒工做(此模塊在代碼中用$resource變量公開)。下面的編輯器裏已經自動包含了這個文件。

服務是徹底獨立的，所以編寫不一樣的實現能夠不影響其它的代碼。好比在測試時，你可能更喜歡返回一個硬編碼的圖片數組來加快測試過程。