2014

Jul

AngularJS

Tags:

簡中版

AngularJS 是一個 client-side 的 javascript framework，由 Google 工程師開發，並分享出來變成一個 Open Source，Angular Developer 稱它為一個 MVW Framework(Model-view-whatever) 而不是平常聽到的 MVC，至於什麼是 MVW 你就自已看看網址裡的解說吧。

Angular 是角的意思，就像三角形的一個角，在 HTML 中就代表「<」這個角符號，那為什麼會叫做 Angular 呢? Angular 官網有一段話寫著「 AngularJS lets you extend HTML vocabulary for your application」，這句話的意思就是說 Angular 可以自定新的 HTML Tag, Attribute ，一個自定義的 HTML Tag 如

我想 Angular 就是因為 HTML 都是使用符號「< 」開頭，因此而命名的吧~

Angular 跟一般的 JS Framework, Jquery , Backbone, YUI, Prototype 有什麼不同呢? 我個人試用的感覺是說， Angular 支援了很多功能，但是卻不太容易上手，開發架構也跟傳統的方式落差很大，加上使用起來沒有像 Jquery 這麼簡單! 所以你在使用 Angular 之前，最好先確定專案是否合適 AngularJS，以免反而適得其反。

AngularJS 最大的特色就是支援 Two Way Data Binding，如果你有看過官網的 Example ，一定會被它 Form - View 同步的功能所吸引住，這也是 Angular 與其它 JS Framework 最大的差別。

另外 AngularJS 支援 Extend HTML 與 Template Engine，透過 Extend 的功能，強化 HTML 基本功能，這樣就能將 Javascript 迅速元件化，只要定義好新的 HTML Tag ，那麼下一次就能直接重覆使用這些新的 HTML 語法，Angular 將這個功能稱作「directive 」，讓你直接在 HTML 上使用新定義的語法，HTML 將會更語義化，更容易讓別人看懂你寫的程式。

有了 Template Engine ，工程師可以將程式的 Logic 與 view 分開，通常我們會分成 MVC : Model - view - controller 三個部分來實作，AngularJS 也支援這個功能，並且使用 {{ -- }} 的方式來分析 Template ，剛好與 Handlebar 這個 JS Template Engine 一樣，如果你剛好有使用 Handlebar ，那麼就能夠很輕鬆的轉換到 AngularJS 囉。

先來看一個簡單的 Demo ，看看 Angular 如何不寫 Javascript Code 就能完成 Tab 功能。

View Demo

如何使用 Angular

首先你的程式必需先載入 JQuery 與 AngularJS 這兩個 Library，因為 AngularJS 有使用到Jquery 部分功能，所以你必需把 JQuery 放在 AngularJS 前面。

Example

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script id="angularScript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.js"></script>

接著你就可以使用 Angular Template 的功能，首先我建立一個 input 再加上一個 h1 來綁定這兩個 element 之間的數值。

Example

<div ng-app>
      <input type="text" ng-model="name" placeholder="Enter a name here">
      <h1>Hello {{name}}!</h1>
</div>

以下的 Demo ，是最簡單的 Two way data binding ，當你修改 Input 裡的數值後，就能夠立刻看到頁面的變化：

Angular 特色

Directives
Modules
Expression (Template Engine)

官方網站描述 AngularJS 特色如下

For performance and to enable innovation, our goal is that almost every piece of AngularJS should be optional, replaceable, and even used in other non-AngularJS frameworks. You’ll be able to pick and choose the parts you like and write or select others that you like better.

Directives

Angular Directive 可以讓你定義新的 Element, Attribute, classname 來執行相對應的 Javascript，例如我可以定義一個新的 element 名稱為 ngimage，然後希望這個新的 HTML Tag 輸出我指定的 HTML 結構，我希望可以用一個 div 包住一張圖片。

我先用 angular.module 宣告一個新的 module
接著用 controller("sample") 宣告一個 controller
最後使用 directive('ngimage') 定義新的 element 名稱。

程式範例如下：

Example

<!doctype html>
<html ng-app="myapp">
  <head>
    <script src="jquery.js"></script>
    <script src="angular.js"></script>
    <script>
 
    angular.module("myapp",[])
        .controller("sample", function ($scope) {
            $scope.image = "https://angularjs.org/img/AngularJS-small.png";
        })
       .directive('ngimage', function () {
 
        return {
          restrict: 'E',
          replace: true,
          template: '<div><img src="{{image}}"/></div>'
        };
    });
 
    </script>
 
  </head>
 
  <body ng-controller="sample" >
        <ngimage></ngimage>
  </body>
 
 
</html>

執行結果

<div><img src="https://angularjs.org/img/AngularJS-small.png"></div>

在這個範例中，我將 Model 資料的部分寫在 controller 裡，在 $scope 中定義一個 image = "xxx"，view 的部分則是定義在 directive 裡面， template: '〈div〉〈img src="{{image}}"/〉〈/div〉' ，當 Angular 看到 ngimage 這個 HTML Tag 之後，就會自動執行 directive 裡定義的 function ，並且回傳 Compile 過後的 Template ，然後插入至 ngimage element 裡，我的程式中有增加一個值 replace: true ，代表 ngimage 會被 template 整個取代。

Modules

AngularJS 支援將 JS 模組化，你可以把每一個功能都寫成一個 module ，並可以定義 module 之間的 dependency。

宣告一個 Module 的方式如下 :

Example

var newModule = angular.module("module_name", []);

Dependency

宣告 module 的時候，第二個參數是一個 Array，你可以將會用到的其它 module 設定在這裡，例如我有一個功能是做 Tab 切換，而這個功能需要用到核心的 Library 名為 core ，我可以在宣告 angular.module 時，將第二個參數補上 core。

Example

var core = angular.module("core", []);
var tabModule = angular.module("tabModule", ["core"]);

Expression

expression 就是類似 Javascript 的 eval 功能，功能可以包含簡單的數學運算，例如 {{3 + 5}} 會輸出 8 ，字串的處理 {{"Hello " + " World!"}}。

services

Service 就像是一個包裝過的物件，把相關的功能，組合在一起，Angular 中 $ 開頭的變數都是一種 service，使用方式跟一般的 Object 相同。

例如 AngularJS 有一個 Service 叫 $http ，它就如同 ajax , curl 等功能，專門用來發送 Request ，使用 $http 時，必需同時宣告接到 response 後的 success function。。

$http 範例

$http({method: 'GET', url: '/xxxx.html'}).
 success(function(data, status, headers, config) {
    $scope.data = data;
 }).
 error(function(data, status, headers, config) {
    console.log("Got a error from request to xxx.html");
 });

其它的 AngularJS Service。

$http
$httpBackend
$log
$filter
$locale

angularJS 的初始化會在 document ready 的時候執行，所有的 Module 都是這樣，如果你有用 JQuery 的 $(document).ready() 這個方式，那麼就會遇到 angularJS 與 JQuery 執行先後順序的問題，只要你先載入 angularJS 這個檔案，angularJS 初始化的程序就會在 JQuery document ready 前先執行。

directive tag

angularJS 內建已經提供了好多 directive tag 功能給我們使用，用這些已有的功能，就能快速的建立一個網站。

ng-click

ng-click 提供了滑鼠點擊事件處理，有點像 Javascript 的 onclick。

ng-click 使用方式

<a href="" ng-click="angularClick()">anchor</a>

ng-model

ng-model 是實現 two way data binding 的方式，如下的範例， input 裡的值可以與 {{name}} 同步化。

ng-model 使用方式

<input ng-model="name" value="text">
{{name}}

ng-show

ng-show 像 if 功能，當某一個值等於 true 時，才顯示這段 html 。

ng-show 使用方式

<div ng-show="tab === 1">
  tab
</div>

如果要判定 array 是否不是空白，則要使用 ng-show="product.images.length" 。

ng-hide

ng-hide 的功能跟 ng-show 完成相反，如果判斷式成立，則不顯示 HTML ， angularJS 會自動加上一個 class 「ng-hide」將 HTML 隱藏。

ng-repeat

ng-repeat 就是一個 for loop 功能，

Example

var m = angular.module("myapp", [])
   .controller("productList", function ($scope) {
        $scope.product = [
          {name: "test 1"},
          {name: "test 2"}
        ];
    });
 
<div ng-app="myapp" ng-controller="productList">
<ul ng-repeat="pro in product">
  <li>{{pro.name}}</li>
</ul>
</div>

ng-src

如果你想用 angularJS 來顯示一張圖片，可能會想用這種寫法 〈img src="{{image}}"〉，但這是行不通的，因為 browser img tag 會比 angularJS 先執行，所以這種寫法，會因為 Browser 無法載入 {{image}} 而出現 error ，必需使用 ng-src 代替。

Example

<img ng-src="{{image}}">

ng-class

ng-class 與 ng-src 存在的原因類似，Browser 也是會對 class 內的名稱，加入 CSS Style ，所以必需將 angularJS class 的設定寫在 ng-class

Example

<a ng-class="{ active: tab.isSet(1) }">

AngularJS

如何使用 Angular

Angular 特色

Directives

Modules

Dependency

Expression

services

directive tag

ng-click

ng-model

ng-show

ng-hide

ng-repeat

ng-src

ng-class

相關教學