AngularJS 簡介
AngularJS 是一個 JavaScript 框架。它可透過 <script> 標籤新增至 HTML 頁面。
AngularJS 透過 指令 擴充了 HTML，且透過 表達式 綁定資料到 HTML。
AngularJS 是一個 JavaScript 框架
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的函式庫。
AngularJS 是以一個 JavaScript 檔案形式發布的，可透過 script 標籤加入網頁：
 | 我們建議把腳本放在<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 視圖。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.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。
| #如果您移除了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 應用程式變數。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
| HTML5 允許擴充的（自製的）屬性，以data- 開頭。 AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。 |
|---|
帶有有效的HTML5：
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </div> </body> </html>
運行實例»##點擊"運行實例" 按鈕查看線上實例
AngularJS 表達式AngularJS 表達式寫在雙大括號內：
{{ expression }}。
AngularJS 表達式把資料綁定到 HTML，這與ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"資料。AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算子和變數。
實例{{ 5 + 5 }} 或{{ firstName + " " + lastName }}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
</body>
</html>運行實例»
ng-app
指示定義了應用程式, 定義了控制器。
實例
實例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p>尝试修改以下表单。</p>
<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>
</body>
</html>
