!!! 一篇博客搞定Angularjs

看見就非常 2015-04-23

展開全文

2015-04-13 00:01 13人閱讀評論(0) 收藏舉報

簡介

AngularJS 通過 ng-directives 擴展了 HTML。
ng-app 指令定義一個 AngularJS 應用程序。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
ng-bind 指令把應用程序數(shù)據(jù)綁定到 HTML 視圖。

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>在輸入框中嘗試輸入：</p>
  <p>姓名：<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

<script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14

ng-app 指令告訴 AngularJS，

元素是 AngularJS 應用程序的”所有者”。
ng-model 指令把輸入域的值綁定到應用程序變量 name。
ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。

<div ng-app="" ng-init="firstName='John'">

<p>姓名為 <span ng-bind="firstName"></span></p>

</div>1
2
3
4
5

ng-init 指令初始化 AngularJS 應用程序變量。

HTML5 允許擴展的（自制的）屬性，以 data- 開頭。
AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網(wǎng)頁對 HTML5 有效。

<div data-ng-app="" data-ng-init="firstName='John'">

<p>姓名為 <span data-ng-bind="firstName"></span></p>

</div>1
2
3
4
5

AngularJS 表達式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置”輸出”數(shù)據(jù)。
AngularJS 表達式很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>我的第一個表達式： {{ 5 + 5 }}</p>
</div>

<script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12

表達式

數(shù)字

<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： {{ quantity * cost }}</p>
</div>1
2
3

字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>1
2
3

對象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 {{ person.lastName }}</p>
</div>1
2
3

數(shù)組

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 {{ points[2] }}</p>
</div>1
2
3

AngularJS 指令

AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數(shù)據(jù)。
ng-model 指令把應用程序數(shù)據(jù)綁定到 HTML 元素。

數(shù)據(jù)綁定

上面實例中的 {{ firstName }} 表達式是一個 AngularJS 數(shù)據(jù)綁定表達式。
AngularJS 中的數(shù)據(jù)綁定，同步了 AngularJS 表達式與 AngularJS 數(shù)據(jù)。
{{ firstName }} 是通過 ng-model=”firstName” 進行同步。
在下一個實例中，兩個文本域是通過兩個 ng-model 指令同步的：

<div ng-app="" ng-init="quantity=1;price=5">
<h2>價格計算器</h2>
數(shù)量： <input type="number" ng-model="quantity">
價格： <input type="number" ng-model="price">
<p><b>總價：</b> {{ quantity * price }}</p>
</div>1
2
3
4
5
6

重復 HTML 元素

ng-repeat 指令會重復一個 HTML 元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 來循環(huán)數(shù)組</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
<div>1
2
3
4
5
6
7
8

或者：

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循環(huán)對象：</p>
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>1
2
3
4
5
6
7
8
9
10
11
12

AngularJS 控制器

AngularJS 應用程序被控制器控制。
ng-controller 指令定義了應用程序控制器。
控制器是 JavaScript 對象，由標準的 JavaScript 對象的構(gòu)造函數(shù) 創(chuàng)建。
控制器的 $scope 是控制器所指向的應用程序 HTML 元素。

<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14

AngularJS 應用程序由 ng-app 定義。應用程序在

內(nèi)運行。
ng-controller 指令把控制器命名為 object。
函數(shù) personController 是一個標準的 JavaScript 對象的構(gòu)造函數(shù)。
控制器對象有一個屬性：$scope.person。
person 對象有兩個屬性：firstName 和 lastName。
ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。

控制器屬性

上面的實例演示了一個帶有 lastName 和 firstName 這兩個屬性的控制器對象。
控制器也可以把函數(shù)作為對象屬性：

<div ng-app="" ng-controller="personController">

名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.fullName()}}

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe",
        fullName: function() {
            var x;
            x = $scope.person;
            return x.firstName + " " + x.lastName;
        }
    };
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

控制器方法

<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{fullName()}}
</div>
<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe",
     };
     $scope.fullName = function() {
         var x;
         x = $scope.person; 
         return x.firstName + " " + x.lastName;
     };
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19