angular初體驗（簡單易學，適合新手）

幾個月前第一次聽說了angularjs這個框架，那時並沒有什麼好感。因爲我偏執的認爲angular這個名字很晦澀，不易記憶和理

解。直到最近項目中要用到它，我又不得不開始學習它，並在一天天的使用中愛上了它 ... ... （今天貌似情人節啊，談愛字我纔想起

來，大家七夕快樂哈哈）

angularjs 最酷炫的五大特性：雙向綁定，依賴注入，mvc，模板，Directives。

學習angular，我覺得應該從它的指令開始學起。

AngularJS指令

AngularJS 通過被稱爲 指令 的新屬性來擴展 HTML。

ng-app 指令：模塊名。定義了 AngularJS 應用程序的 根元素，用於初始化一個 AngularJS 應用程序。

ng-init 指令：在html元素中直接爲 AngularJS 應用程序定義初始值，初始化應用程序數據。但初始化一般在控制器或模塊中進行。

ng-model 指令：綁定html元素到應用程序數據中的模板中。

ng-model 指令也可以：

• 爲應用程序數據提供類型驗證（number、email、required）。
• 爲應用程序數據提供狀態（invalid、dirty、touched、error）。
• 爲 HTML 元素提供 CSS 類。
• 綁定 HTML 元素到 HTML 表單。

ng-repeat 指令：對於集合中（數組中）的每個項會 克隆一次 HTML 元素，會重複一個 HTML 元素多次。（一般用於循環輸出）

ng-bind 指令：把數據綁定到對應的 HTML元素上。（也可以直接將要輸出的model放在html的雙大括號內直接輸出）

這些指令的具體應用看後面的實例，這裏只是羅列出來讓你心裏好有個底。

ng-if ：在html中通過判斷該html元素綁定的model的值的真假來決定該html元素是否顯示。

ng-show / ng-hide：在html中通過判斷該html元素中ng-show所綁定的model的值的真假，來控制該html元素是否顯示。

ng-if和ng-show、ng-hide他們從表面上看非常像，但是ng-if只是用來做判斷，值爲true時只會顯示裏面的內容。而ng-if所在

的這個dom節點實際並不會被創建。（網上據說是這樣的，時間匆忙還未來得及親測。）

AngularJS表達式

AngularJS 使用 表達式 把數據綁定到 HTML。

AngularJS 表達式 與 JavaScript 表達式的異同：

類似於 JavaScript 表達式，AngularJS 表達式可以包含字母，操作符，變量。

與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。

與 JavaScript 表達式不同，AngularJS 表達式不支持條件判斷，循環及異常。

與 JavaScript 表達式不同，AngularJS 表達式支持過濾器。

AngularJS 表達式寫在雙大括號內：{{ expression }}，就可以直接輸出expression的值了。

AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。

AngularJS 將在表達式書寫的位置"輸出"數據。

AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。

除此之外，angularjs的數字、字符串、對象、數組都跟js一樣。

看一個ng-if 的實例：

<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
  This is removed when the checkbox is unchecked.
</span>

選中單選按鈕，則輸出爲：

Click me: 
Show when checked: This is removed when the checkbox is unchecked.

AngularJS控制器

AngularJS 控制器 控制 AngularJS 應用程序的數據，它是常規的 JavaScript 對象。

ng-controller 指令：定義了應用程序所在的控制控制器。

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>

名: <input type="text" ng-model="lastName"><br>

<br>

姓名: {{firstName + " " + lastName}}

</div>

<script>

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

app.controller('myCtrl', function($scope) {

$scope.firstName = "John";

$scope.lastName = "Doe";

});

</script>

定義了ng-app的地方，表明是angular所控制的範圍。應用程序在 <div> 內運行。定義了ng-controller="myCtrl" 的div，

表明這個div的控制器是myCtrl。然後JavaScript代碼的myCtrl是這個控制器的定義。AngularJS 使用$scope 對象來調用控制

器。$scope 是一個應用象(屬於應用變量和函數)。控制器的 $scope （相當於作用域、控制範圍）用來保存AngularJS Model(模

型)的對象。這段代碼中控制器在作用域中創建了兩個屬性 firstName 和 lastName)。ng-model 指令綁定輸入的值到控制器的屬

性（firstName 和 lastName）。

AngularJS過濾器

過濾器可以使用一個管道字符（|）添加到表達式和指令中，用於篩選、過濾、轉換數據。

過濾器	描述
currency	格式化數字爲貨幣格式。
filter	從數組項中選擇一個子集。
lowercase	格式化字符串爲小寫。
orderBy	根據某個表達式排列數組。
uppercase	格式化字符串爲大寫。

<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
</div>

另外要過濾的值也可以是你綁定的某個model的值，除此之外你還可以自定義過濾器。

AngularJS服務

$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。（一般用來進行前後端數據交互）。

例如讀取 一個外部JSON 文件（以下是存儲在web服務器上的 JSON 文件）：

http://www.runoob.com/try/angularjs/data/Customers_JSON.php

[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]

---

你可以這麼獲取剛纔那個json文件：（$http.get(url) 是用於讀取服務器數據的函數）

AngularJS 實例

<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
    .success(function(response) {$scope.names = response.records;});
});
</script>

這是我這幾天的使用心得，我還會接着學習angular，未完待續。。。