從零學習Angularjs-編寫第一個Angularjs以及ng-指令大全
1.Angularjs的載入方式
當網頁載入完畢，AngularJS 自動開始執行； HTML 頁面中 ng-xxx 的屬性稱之為指令（Directive）； ng-app 指令告訴 AngularJS， 元素是 AngularJS 應用程式管理的邊界； {{ }} 雙花括號裡面的叫做資料繫結表示式，可以是任何有效的JavaScript值、變數或語句。而在頁面上顯示的是表示式計算後的結果值。
舉個栗子：
<html ng-app>
<head></head>
<body>
{{"從零學習Angularjs-編寫第一個Angularjs" 2.Module.controller() 控制器
第二行程式碼建立了一個名為userCtrl的控制器，以及一個控制器函式
控制器函式接受一個名為$scope的引數
var app = angular.module(“myApp”, []); //myApp模組名 app是模組例項
app.controller(“userCtrl” ,function($scope){ //userCtrl是控制器的名字
$scope.name= “小明”; //$scope用來儲存資料，定義方法 3.ng-指令大全
（1）ng-model
ng-model 指令把文字框的值繫結到變數 name 上； {{ name }} 表示式就是把應用程式變數 name 繫結到某個dom元素的innerHTML。
請輸入你的名字：<input type="text" id="username" ng-model="name">
你的名字是： <span>{{name}}</span>（2）ng-bind指令
ng-bind 指令將指定變數或表示式的值顯示在元素的innerHTML 如果給定的變數或表示式修改了，指定元素的 innerHTML 也會修改。
<input type="text" ng-model="text"> --將文字框的值繫結到text變數 你輸入的值是:
<span ng-bind="text"></span> --動態顯示text變數的值（3）ng-init 指令
初始化應用時建立一個變數，並給變數賦值 ng-init 執行給定的表示式 建議用controller代替。
<div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}</h1>（4）ng-click指令
Angular的點選事件處理器，給元素通過click事件繫結$scope物件的方法。
<input type="text" ng-model="text"> <button ng-click="show()">顯示輸入值</button>
$scope.show = function(){ alert("您輸入的內容是：" + $scope.text); }（5）ng-repeat 指令
根據繫結陣列成員的數量，複製被繫結的元素 在ng-repeat指令複製元素的過程中，還提供了幾個專有變數：
$index 返回當前物件或屬性的下標
$first 當前物件為集合中的第一個物件時返回true
$last 當前物件為集合中的最後一個物件時返回true
$middle 當前物件既不是集合中第一個物件又不是最後一個物件返回true
$even 集合中的偶數編號返回true
$odd 集合中的奇數編號返回true ng-repeat-startng-repeat-end 重複生成多個頂層元素
（6）ng-class 指令
給元素新增CSS類:不能直接新增類名，需通過以下三種方式新增：
1. 直接繫結值為CSS類名的$scope物件屬性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../../css/bootstrap.css" rel="stylesheet">
<style>
.red {
color: red;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="listController">
<span ng-class="red1">小明</span>
</div>
<script src="../../script/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("listController", function($scope) {
$scope.red1='red';
});
</script>
</body>
</html>2. 以字串陣列方式選擇性新增CSS類 表示式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.style1 {
height: 200px;
width: 200px;
background: salmon;
}
.style2 {
background: violet;
}
</style>
</head>
<body>
<div ng-app ng-init="data={style1:true,style2:false}">
<!--ng-class指令會根據設定物件的情況決定是否新增某些class類名-->
<div ng-class="{style1:data.style1,style2:data.style2}"></div>
<!--<div ng-class="style1:true,style2:false"></div>-->
<input type="button" value="變化顏色" ng-click="data.style2 = !data.style2">
</div>
<script src="../../script/angular.min.js"></script>
<script>
var data = {
style1:true,
style2:false
}
</script>
</body>
</html>3.通過key/value物件的方式新增多個CSS類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../../css/bootstrap.css" rel="stylesheet">
<style>
.red {
color: red;
}
.green {
color: greenyellow;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="listController">
<ul>
<li ng-repeat = "item in datas" ng-class="{red:item.startsWith('張')">{{ item }}
</li>
</ul>
</div>
<script src="../../script/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("listController", function($scope) {
$scope.datas = ["張三","李四","王五","趙六","張"];
});
</script>
</body>
</html>（7）ng-style 指令
ng-style 指令為 HTML 元素新增 style 屬性。 ng-style 屬性值必須是物件，表示式返回的也是物件 物件由 CSS 屬性和值註冊，即 key：value 。
ng-style=” {color: 'white'}”（8）ng-show/ng-hide指令
ng-show 值為true或flase 顯示或隱藏元素 ng-hide 值為true或flase 隱藏或顯示元素。
（9）ng-if指令
從DOM中新增和移除元素 ng-if=”true”時保留元素 ng-if=“false”時移除元素。
（10）ng-swich指令
ng-switch-when =“” 值為指定value值的時候 顯示元素。
ng-switch-default 沒有匹配的value值時顯示元素。
（11）ng-link/ng-src指令
繫結元素的link或src地址 AngularJS 設定圖片地址的指令：ng-src AngularJS 程式碼執行前不顯示圖片。
（12）ng-include指令
該指令從伺服器獲取一段HTML片段，編譯並處理該片段中包含的任何angular指令，並新增到DOM元素中。
<ng-include src=" 'a.html' " ></ng-include>src: 指定要載入內容的URL src的值必須為表示式 onload: 指定一個在內容被載入時呼叫的表示式 autoscroll:指定內容在載入時是否滾動到這部分檢視所在的區域。
（13）ng-cloak指令
使用一個CSS樣式隱藏內聯繫結表示式，(在文件第一次載入會短暫可見)。 ng-cloak 指令用於在 AngularJS 應用在載入時防止 AngularJS 程式碼未載入完而出現的問題。 AngularJS 應用在載入時，文件可能會由於AngularJS 程式碼未載入完而出現顯示 AngularJS 程式碼，進而會有閃爍的效果， ng-cloak 指令是為了防止該問題的發生。 該指令沒有引數。
<span ng-cloak>{{ 表示式 }}</span>4.Module.directive自定義指令
指令是Angular最強大的特性，通過指令能擴充套件並增強HTML。 當內建指令無法滿足需求時，可以建立自定義指令。 自定義指令是通過Module.directive方法建立的。 Module.directive() 方法接受兩個引數，第一個是指令名，第二個是函式。 該函式用return語句返回另一個指令函式，使用該自定義指令，Angular就會呼叫這個函式。 指令函式接受三個引數，第一個scope，用於檢查在檢視中可用的資料。 第二個引數element是一個jqLite物件，jqLite是Angular提供一個剪裁版本的jQuery 第三個引數是attrs。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../../css/bootstrap.css" rel="stylesheet">
<script src="../../script/angular.min.js"></script>
<script>
var m= angular.module("my", [])
m.controller("ctr1", function ($scope) {
$scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
$scope.today = $scope.dayNames[new Date().getDay()];
//getDay星期是從0開始的，星期日的下標是0
});
m.controller("ctr2", function ($scope) {
$scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
$scope.tommorrow = $scope.dayNames[(new Date().getDay() + 1) % 7];
});
m.directive('highlight', function () {
return function (scope,element,attrs) {
if(scope.today == attrs['highlight']){
element.css("color",'red');
}else{
element.css("color",'green')
}
}
})
</script>
</head>
<body ng-app="my">
<div class="container">
<h2>今天是星期幾？</h2>
<p ng-controller="ctr1" highlight="星期二">今天是{{ today }}</p>
<p ng-controller="ctr2" highlight="星期一">明天是{{ tommorrow }}</p>
</div>
</body>
</html>