<!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>各個 angular.js 版本下載： https://github.com/angular/angular.js/releases
ng-app 指令告訴AngularJS,<div>元素是AngularJS應用程序的所有者
ng-controller 定義了控制器
ng-model 指令把輸入域的值綁定到應用程序變量name
ng-bind 指令把應用程序變量name綁定到某一個段落的innerHTML
ng-init 指令初始化AngularJS應用程序變量,比如:ng-init="firstName='John'"
AngularJS表達式寫在雙大括號內:{{expression}}
模塊定義了一個應用程序。模塊是應用程序中不同部分的容器。
模塊是應用控制器的容器。控制器通常屬於一個模塊。
<div ng-app="myApp" ng-controller="myCtrl"> </div>
<script type="text/javascript">
var app = angular.module('myApp’,[]); //創建模塊
app.controller('myCtrl',function($scope){
});
</script>使用模塊來爲你應用添加自己的指令：
<div ng-app="myApp" runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "我在指令構造器中創建!"
};
});
</script>//模塊和控制器包含在 JS 文件中
//<script src="myApp.js"></script>
<script src="myCtrl.js"></script>ng-repeat 指令會重複一個HTML元素,對於集合中（數組中）的每個項會 克隆一次 HTML 元素
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環對象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>ng-model 指令可以爲應用數據提供狀態值(invalid, dirty, touched, error):
$dirty//表單有填寫記錄
$valid//字段內容合法的
$invalid//字段內容是非法的
$pristine//表單沒有填寫記錄myForm.user.$dirty && myForm.user.$invalid排序顯示，可以使用 orderBy 過濾器:
<tr ng-repeat="x in names | orderBy : 'Country'">Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶
所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，可以在各個 controller 中使用
過濾器可以使用一個管道字符|添加到表達式和指令中。
currency//格式化數字爲貨幣格式。
filter//從數組項中選擇一個子集。
lowercase//格式化字符串爲小寫。
orderBy//根據某個表達式排列數組。
uppercase//格式化字符串爲大寫。
<p>姓名爲 {{ lastName | uppercase }}</p>$location 服務，它可以返回當前頁面的 URL 地址
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});$http 是 AngularJS 應用中最常用的服務。服務向服務器發送請求，應用響應服務器傳送過來的數據
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>$http 服務向服務器請求信息，返回的值放入變量 "myWelcome" 中
$timeout 服務 訪問在規定的毫秒數後執行指定函數
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000); //2000毫秒後執行
});$interval 服務 訪問在指定的週期(以毫秒計)來調用函數或計算表達式
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);//每1000毫秒執行一次
});創建自定義服務
<p>自定義服務，用於轉換16進制數：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});ng-options 指令 選擇值是一個對象
ng-options="x for (x, y) in cars"選擇的值爲在 key-value 對ng-options有以下格式的語法
//for array data sources:
-----------------------
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr
//for object data sources:
------------------------
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in ob{{ $index + 1 }}顯示序號($index從0開始)
ng-if=“$odd” 表示判斷 $odd(奇數)/$even(偶數)
$http.get("url").success(function ($){});ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。
ng-show 指令隱藏或顯示一個 HTML 元素。ng-hide 與之相反
ng-click 指令定義了 AngularJS 點擊事件。
toggle() 函數用於切換 myVar 變量的值（true 和 false）
novalidate 屬性是在 HTML5 中新增的。禁用了使用瀏覽器的默認驗證, 你需要在 AngularJS 表單中使用，用於重寫標準的 HTML5 驗證
angular.lowercase()//轉換字符串爲小寫
angular.uppercase()//轉換字符串爲大寫
angular.isString()//判斷給定的對象是否爲字符串，如果是返回 true。
angular.isNumber()//判斷給定的對象是否爲數字，如果是返回 true。
angular.copy($scope.master) //複製對象$scope.$watch('lName', function() {$scope.test();}); //監控模型變量ng-include 指令來包含 HTML 內容
AngularJS 使用動畫需要引入 angular-animate.min.js 庫。
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>還需在應用中使用模型 ngAnimate：<body ng-app="ngAnimate">
如果我們應用已經設置了應用名，可以把 ngAnimate 直接添加在模型中：
var app = angular.module('myApp', ['ngAnimate']);