Latest web development tutorials

AngularJS 簡介

AngularJS是一個JavaScript框架 。 它可通過<script> 標籤添加到HTML 頁面。

AngularJS通過指令擴展了HTML，且通過表達式綁定數據到HTML。

AngularJS 是一個JavaScript 框架

AngularJS 是一個JavaScript 框架。 它是一個以JavaScript 編寫的庫。

AngularJS 是以一個JavaScript 文件形式發布的，可通過script 標籤添加到網頁中：

<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"></script>

Note 我們建議把腳本放在<body> 元素的底部。
這會提高網頁加載速度，因為HTML 加載不受制於腳本加載。

各個angular.js版本下載： https://github.com/angular/angular.js/releases

AngularJS 擴展了HTML

AngularJS通過ng-directives擴展了HTML。

ng-app指令定義一個AngularJS應用程序。

ng-model指令把元素值（比如輸入域的值）綁定到應用程序。

ng-bind指令把應用程序數據綁定到HTML視圖。

AngularJS 實例

< !DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" >
< script src= "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js" > < /script >
< /head >
< body >

< div ng-app= "" >
< p >名字: < input type= "text" ng-model= "name" > < /p >
< h1 > Hello {{name}} < /h1 >
< /div >

< /body >
< /html >

嘗試一下»

實例講解：

當網頁加載完畢，AngularJS 自動開啟。

ng-app指令告訴AngularJS，<div>元素是AngularJS 應用程序的"所有者"。

ng-model指令把輸入域的值綁定到應用程序變量name 。

ng-bind指令把應用程序變量name綁定到某個段落的innerHTML。

Note 如果您移除了ng-app指令，HTML將直接把表達式顯示出來，不會去計算表達式的結果。

什麼是AngularJS？

AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。

  • AngularJS 把應用程序數據綁定到HTML 元素。
  • AngularJS 可以克隆和重複HTML 元素。
  • AngularJS 可以隱藏和顯示HTML 元素。
  • AngularJS 可以在HTML 元素"背後"添加代碼。
  • AngularJS 支持輸入驗證。

AngularJS 指令

正如您所看到的，AngularJS指令是以ng作為前綴的HTML屬性。

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

AngularJS 實例

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

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

</div>

嘗試一下»

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

帶有有效的HTML5：

AngularJS 實例

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

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

</div>

嘗試一下»

AngularJS 表達式

AngularJS表達式寫在雙大括號內： {{ expression }} 。

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

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

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

實例{{ 5 + 5 }} 或{{ firstName + " " + lastName }}

AngularJS 實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

</body>
</html>

嘗試一下»

AngularJS 應用

AngularJS 模塊（Module）定義了AngularJS應用。

AngularJS 控制器（Controller）用於控制AngularJS應用。

ng-app指令定義了應用, ng-controller定義了控制器。

AngularJS 實例

<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>

嘗試一下»

AngularJS 模塊定義應用:

AngularJS 模塊

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

AngularJS 控制器控制應用:

AngularJS 控制器

app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});

在接下來的教程中你將學習到更多的應用和模塊的知識。