!!! 一篇博客搞定Angularjs

看見(jiàn)就非常 2015-04-23

展開(kāi)全文

2015-04-13 00:01 13人閱讀評(píng)論(0) 收藏舉報(bào)

簡(jiǎn)介

AngularJS 通過(guò) ng-directives 擴(kuò)展了 HTML。
ng-app 指令定義一個(gè) AngularJS 應(yīng)用程序。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。
ng-bind 指令把應(yīng)用程序數(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 應(yīng)用程序的”所有者”。
ng-model 指令把輸入域的值綁定到應(yīng)用程序變量 name。
ng-bind 指令把應(yīng)用程序變量 name 綁定到某個(gè)段落的 innerHTML。

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

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

</div>1
2
3
4
5

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

HTML5 允許擴(kuò)展的（自制的）屬性，以 data- 開(kāi)頭。
AngularJS 屬性以 ng- 開(kāi)頭，但是您可以使用 data-ng- 來(lái)讓網(wǎng)頁(yè)對(duì) 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 表達(dá)式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達(dá)式書寫的位置”輸出”數(shù)據(jù)。
AngularJS 表達(dá)式很像 JavaScript 表達(dá)式：它們可以包含文字、運(yùn)算符和變量。
實(shí)例 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>我的第一個(gè)表達(dá)式： {{ 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

表達(dá)式

數(shù)字

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

字符串

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

對(duì)象

<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>第三個(gè)值為 {{ points[2] }}</p>
</div>1
2
3

AngularJS 指令

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

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

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

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

重復(fù) HTML 元素

ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 來(lái)循環(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)對(duì)象：</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 應(yīng)用程序被控制器控制。
ng-controller 指令定義了應(yīng)用程序控制器。
控制器是 JavaScript 對(duì)象，由標(biāo)準(zhǔn)的 JavaScript 對(duì)象的構(gòu)造函數(shù) 創(chuàng)建。
控制器的 $scope 是控制器所指向的應(yīng)用程序 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 應(yīng)用程序由 ng-app 定義。應(yīng)用程序在

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

控制器屬性

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

<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

to be continued

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：看見(jiàn)就非常 > 《tip》

舉報(bào)/認(rèn)領(lǐng)