AngularJS - 快速入門

標籤：指定   table   XML   keyword   開頭   number   ini   module   支援   

剛開始接觸時總是去wiki或各種百科以瞭解一番。
它們會告訴我一些MVVM、雙向資料繫結、依賴注入等等名詞，覺得這些名詞好上檔次，然後我很可能就不打算用這個東西了。

AngularJS是什麼?

完全使用 JavaScript編寫的用戶端技術。同其他曆史悠久的 Web技術（ HTML、 CSS 和JavaScript）配合使用，使Web應用開發比以往更簡單、更快捷。

不考慮那些名詞，本篇協助你快速瞭解AngularJS的基本用法。

感謝 @myqianlan 菊苣提醒，本文用的AngularJS版本為1.2.x，1.3.x中不再用本文中提到的方式聲明controller。

 

先從這段開始：

<div ng-app="" data-ng-init="name=‘Kavlez‘">    <p>Name: <input type="text" ng-model="name"></p>    <p ng-bind="name"></p>    {{name}}    {{6+8}}</div>

 

• ng-app:定義一個AngularJS應用，被其包含的內容都屬於該應用。
• ng-init:初始化應用資料。
• ng-model:將資料繫結到當前應用。
• ng-bind:將應用中定義的變數在該標籤中顯示

AngularJS的指令都是以ng開頭，或者也可以使用data-ng開頭。 AngularJS的運算式用兩個大括弧表示:{{expression}}
這便是AngularJS最基本的功能：資料繫結。

我們可以對各種類型進行綁定並顯示：

• Number

  <div ng-app="" ng-init="quantity=1;cost=5">    <p>Total : ￥{{ quantity * cost }}</p></div>

• String

  <div ng-app="" ng-init="firstName=‘Kavlez‘;lastName=‘Jin‘">    <p>The name is {{ firstName + " " + lastName }}</p></div>

• Object

  <div ng-app="" ng-init="person={firstName:‘Kavlez‘,lastName:‘Jin‘}">    <p>The name is {{ person.lastName }}</p></div>

• Array

  PS: 可以使用ng-repeat進行迭代

  <div ng-app="" ng-init="myArr=[0,2,4,6,8]">    <p ng-repeat="element in myArr">        {{ element }}    </p></div>

 

Controllers

我們用controller對一個AngularJS應用進行控制。
用ng-controller定義一個controller，聲明所有被它包含的元素都屬於這個控制器。

例如：

<div ng-app="" ng-controller="personController">    <h1>{{ person.name +‘ is a(an) ‘+person.job }}</h1>    <h1>{{ person.sayHi() }}</h1></div><script>function personController($scope) {    $scope.person = [];    $scope.person.name=‘Kavlez‘    $scope.person.job=‘brogrammer‘    $scope.person.sayHi = function(){        return "Hi! I‘m "+ $scope.person.name + ", I‘m a(an) " + $scope.person.job;    }}</script>

當然，我們應該使用更高效的組織方式。
AngularJS支援將Controller定義在其他js檔案中，比如上面的例子可以改為：

<div ng-app="" ng-controller="personController">    <h1>{{ person.name +‘ is a(an) ‘+person.job }}</h1></div><script type="text/javascript" src="js/app.js"></script>

 

Module

到目前為止，定義一個Angular app都用ng-app=""的方式。
可行，但是這個app下的變數和函數都是global的，而且會造成controller汙染(pollute)。
而通常，我們用module把app組織起來。 我們可以通過ng-app="名稱"或angular.modele()來聲明一個module。
該方法有兩個參數：

1. 模組的名稱
2. 依賴列表

比如，之前的例子可以改為：

<div ng-app="myApp" ng-controller="fighterController">    <script>    var myApp = angular.module("myApp",[]);    myApp.controller("fighterController", function($scope) {        //..    }    </script></div>

如果將app和controller放到兩個檔案分別定義，則：

<div ng-app="myApp" ng-controller="fighterController">    <script src="myApp.js"></script>    <script src="myAppControllers.js"></script></div>

myApp.js：

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

 

myAppControllers.js:

myApp.controller("fighterController", function($scope) {        //..}

 

Filter

這個東西可以加在運算式裡面，改變運算式的輸出格式。
我們可以用以下Filters：

Filter	Description
uppercase	轉大寫
lowercase	轉小寫
currency	轉貨幣格式
orderBy	按指定屬性排序
filter	按指定關鍵字進行過濾

前3種可以直接用在運算式中，比如：

{{name | uppercase}}{{name | lowercase}}{{total | currency}}

 

filter和orderBy通常用於數組：

<div ng-app="" ng-controller="fighterController">    <input ng-model="search"/>    <ul>        <li ng-repeat="f in fighters|filter:search">            {{ f }}        </li>    </ul>    <script>    function fighterController($scope) {        $scope.fighters = [        {name:‘Ryu‘,country:‘Japan‘},        {name:‘Ken‘,country:‘USA‘},        {name:‘Chun Li‘,country:‘China‘},        {name:‘GuiLe‘,country:‘USA‘},        {name:‘Zangief‘,country:‘Russia‘}        ];    }    </script></div>

當然，資料不會這樣放在一個controller裡。
我們可以通過$http來請求資料並進行綁定。
上面的例子可以改為：

function fighterController($scope,$http) {    var url = ‘請求地址‘;    $http.get(url).success(function(response) {        $scope.fighters = response;    })}

AngularJS - 快速入門