AngularJS 初學者筆記與教學 (一) - 使用方式、Expression、Controller、Module－小雕雕的家

廢話前言：

說教學有點那個，但是它的確可以幫助跟我一樣的初學者慢慢進入AngualrJS的世界

因為我就是初學者啊

然後這篇實在是寫超久的....

因為開發時程的關係，而且jQuery 還是比較熟，所以工作上還沒辦法改用AngularJS

然後就斷斷續續的有空玩一下玩一下，轉眼間就已經是去年五月的事了，已經八個月 = =

去年五月就開始寫了啊~~~難產到這個地步

然後官方網站在此 https://angularjs.org/

裡面有些學習資源可以方便學習

正文開始

==================================================

AngularJS 不詳細說明了(因為我也不太瞭)

只要知道他就是眾多 js framework 繁星中的那麼一顆 (比小指

主要是由程式之神 Google 來負責維護

但他與jQuery 等 framework 眾不同的地方是，在上面運作的是一個 MVC 的框架

Model 用來存放資料與邏輯，邏輯不包含UI互動與顯示畫面

View 就是HTML DOM

Controller 用來處理 View 跟 Model 間的互動關係

然後打開 AngularJS 的 HTML 會看到很多 ng- 開頭的屬性

如下圖 :

Clipboard03

ng- 是啥啊!!!

AngularJS 設置HTML標籤的屬性都是 ng- 開頭，例如 : <html ng-app>

可以把它當成是 AngularJS 的命名空間，而 - 之後的代表命令

而標籤中有了ng- 的屬性，則表示標籤內容區塊中都是 AngularJs 應用程式範圍

但是 ng-app 這種設定方式在某些HTML驗證器上並不是有效的

所以為了讓其他驗證方式能夠順利且正確的檢查，所以AngularJS也支援以下幾種寫法

Clipboard02

資料來源 :

https://github.com/MrOrz/angularjs-tw/blob/master/Chapter6.markdown

and 這資料非常棒，尤其是翻譯成繁體中文之後

除了是運作在 MVC 框架上之外，他還有一個非常吸引人的特點就是資料的雙向繫結

意思就是你如果改了某輸入框的值，有利用那輸入值運算的地方也會同步改變

下面這個 run 一下就知道什麼意思，請自己切換HTML 或 Result 頁簽看結果

第一步 - 設定與使用

首先要使用AngularJS之前，除了引用他的 js之外，必須要在你的HTML中設定ng-app屬性

例如：<html ng-app> (當然不一定要寫在html 標籤裡面)

AngularsJS 看到 ng-app 後就會自動初始化該標籤範圍內的程式

正常來說一個頁面只能有一個 ng-app，而且可以在啟用時順便指定要使用哪個模組

而模組中可能還會有多個 controller

例如 : <html ng-app="ModuleA">

上面指的就是要使用模組ModuleA，關於模組的建立之後會提到

第二步 - 開始玩幾個簡單的例子

設定完 ng-app 之後，來試試看一個簡單的例子

透過這例子可以稍微了解 AngularJS 運作的方式

首先會用到幾個屬性叫 ng-model、ng-init

ng-model：View 對應 module 的名稱

ng-init：指定初始值

要注意的是一個元素中只能有一個 ng-model

如以下的例子，ng-init 指定了price 初始值為 300，amt 為 1

HTML：

金額：<input type="text" ng-model="price" ng-init="price=300" /><br />

數量：<input type="number" ng-model="amt" ng-init="amt=1" /><br />

總金額：{{ price * amt }}

</body>

可以嘗試看看修改數量與金額會發生什麼事

上面範例中的 {{ price * amt }} 代表了AngularJS 的表達式

表達式中的內容由於AngularJS會自動綁定的關係，所以 model 的改變會直接反應到頁面上的 view

而AngularJS的表達式也含有 filter 的特性

例如以下範例 :

用以上幾個例子，應該可以稍微了解表達式這東西了

接下來是學著建立 controller

第三步 - 建立 Module 與 Controller

有時候可能有些複雜的功能，無法像上面幾個例子一樣透過自動繫結綁定來完成

這個時候就需要另外建立 controller 來做為 model 與view 間的溝通橋梁

然後我們將運作的邏輯寫在 controller 中

為了之後能方便管理與利用，也可以建立一個 Module 來放置 Controller

Controller 的幾種建立方式可以參考保哥這篇

關於 AngularJS 控制器 (ngController) 的多種宣告方法

這邊來用其中的兩種方法try try

一、直接建立函式

這應該是最簡單直接的了

HTML：

</div>

</body>

controller.js：

function MsgController($scope) {

$scope.Message = "測試一下";

}

可以切換以下的HTML、JS、Result 看一下結果

說明：

首先 HTML 除了放上ng-app

也多了一個 ng-controller 來指定要使用的 controller，名稱叫 MsgController

然後 controller.js 中寫了一個函數宣告式叫做 MsgController，就只是一般的函數 (這就是 controller)

這個 controller 傳入了一個參數叫 $scope

$scope 代表了 AngularJS MVC 架構中的M：Model，是AngularJS 應用程式所產生的

如果把 $scope 列出來看，會發現他是個物件，用來將 controller 與 view 連結

Clipboard02

然後我們在 controller 當中設定了 $scope 有個 Message 屬性，並給於值

就可以反應到前面 View 層的表達式之中了

感覺一切如此簡單

二、將 controller 建立在自訂的模組中

第二種寫法比較模組化，所以比較推薦用這種方法

相關的 js 可以被整理在一個模組中，日後會變得比較好維護

首先先寫完再來解釋

HTML：

</div>

</body>

JS：

var moduleA = angular.module("ModuleA", []);

moduleA.controller("MsgController", function ($scope) {

$scope.Message = "測試一下";

});

說明：

首先建立一個自訂的 module 叫做 ModuleA

var moduleA = angular.module("ModuleA", []);

angular.module 的第二個參數是一個陣列，你可以傳入你會用到的其他 module

例如：

// 建立一個 moduleB的模組

var moduleB = angular.module("ModuleB", []);

// moduleA 中可能也會用到 moduleB 的功能，所以透過第二個參數設定後使用

var moduleA = angular.module("ModuleA", ["moduleB "]);

再來幫 moduleA 建立一個 controller

第一個參數是 controller 名稱，第二個參數是 controller 的本體

最後在 HTML 的 ng-app 當中指定要使用的模組名稱為 ModuleA 就完成了

範例如下：

2015.5.13 更新

-----------------------------------------------

AngularJS 1.2之後的版本可以改用以下方法，會優於使用 $scope 注入的方式

HTML :

</div>

</body>

JS :

angular.module("ModuleA", []).

controller("MsgController", [function() {

this.Message = "測試一下";

}]);

原本的 controller 第二個參數改為陣列，值為實際要執行的方法

然後使用1.2之後的新語法 controllerAs，裡面的方就可以使用 this 關鍵字來定義實質的變數

並透過 html controller 引用到這些變數

優點是可以一看就知道提供方法與屬性的是哪個 controller

第四步 - 進階一點的練習

官網上有個範例拿來 try try 看看

功能是有一堆手機的介紹，然後可以在頁面上透過輸入框來過濾

以下是原汁原味的官方範例

JS：

var phonecatApp = angular.module('phonecatApp',[]);

phonecatApp.controller('PhoneListCtrl',function($scope) {
   $scope.phones = [
        {'name':'Nexus S','snippet':'Fast just got faster with Nexus S.'},
        {'name':'Motorola XOOM™ with Wi-Fi','snippet':'The Next, Next Generation tablet.'},
        {'name':'MOTOROLA XOOM™','snippet':'The Next, Next Generation tablet.'}
  ];
});

HTML：

<div class="container-fluid">
   <div class="row">
      <div class="col-md-2"><!--Sidebar content-->
         Search: <input ng-model="query">
      </div>
      <div class="col-md-10">
         <ul class="phones">
            <li ng-repeat="phone in phones | filter:query">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
            </li>
         </ul>
      </div>
   </div>
</div>

說明：

上面 JS 的 controller 中設定了$scope.phones，內容是陣列，其中包含一堆物件實字

主要是描述了手機的名稱與描述片段

然後在 HTML 使用了 ng-repeat 的疊代器，它的功用就類似 for each 只是他還可以設定過濾條件

ng-repeat="phone in phones | filter:query"

如上就代表指定了過濾條件是 ng-model="query" 的這個輸入框

然後再設定一下 ng-app 與 ng-controller 之後既可以得到如下的功能了

這個如果要用 jQuery 寫應該不止這幾行....

再來試試看一個官網上的範例，展示了 AngularJS 強大的雙向資料繫結

一樣是剛剛的手機名稱與資料，但加上了這支手機出廠幾年了

然後由 HTML 中的下拉選單決定要排序的方式是手機名稱還是年份

JS：

var phonecatApp = angular.module('phonecatApp',[]);

phonecatApp.controller('PhoneListCtrl',function($scope){
  $scope.phones =[
     {'name':'Nexus S','snippet':'Fast just got faster with Nexus S.','age':1},
     {'name':'Motorola XOOM™ with Wi-Fi','snippet':'The Next, Next Generation tablet.','age':2},
     {'name':'MOTOROLA XOOM™','snippet':'The Next, Next Generation tablet.','age':3}
  ];

  $scope.orderProp ='age';
});

JS 沒多大改變，但是多了 age 這個屬性

然後預設是用 age 排序

HTML：

Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
   <option value="name">Alphabetical</option>
   <option value="age">Newest</option>
</select>

<ul class="phones">
   <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
   </li>
</ul>