AngularJs入門使用
AngularJS介紹
AngularJs是一個前臺框架，使用JavaScript編寫的庫。使用者可以在使用該框架，在前臺中進行資料雙向繫結，實現前端的MVC資料顯示。
在使用AngularJs框架的時候，只需要在前臺的html中引入AngularJs檔案即可。使用非常方便。
AngularJs基礎操作
在講解基礎指令前，先普遍一些基礎概念。使用者在頁面中引入AngularJs檔案後，可以建立WebApp和控制器了。在 AngularJs 中，每個頁面被看作一個獨立的 WebApp，每個 WebApp 中可以包括多個獨立的處理部分，我們稱為 Controller，每個 Controller 有自己獨立的處理上下文和邏輯。AngularJs 通過指令 ng-app 來劃定這個 WebApp 的作用域，通常可以將這個 ng-app 直接寫在 html 標記之上，也可以寫在一個元素之上。例如：
html:
<div ng-app="myApp">
<div ng-controller="myController">
<h3>{{data}}</h3>
</div>
</div>
初始化應用程式： ng-app 指令告訴 AngularJS，
元素是 AngularJS 應用程式 的”所有者”。繫結資料： ng-model 指令把輸入域的值繫結到應用程式變數 name。———繫結到屬性中。也可以：為應用程式資料提供型別驗證（number、email、required）。為應用程式資料提供狀態（invalid、dirty、touched、error）。為 HTML 元素提供 CSS 類。繫結 HTML 元素到 HTML 表單。
繫結html中的資料：
初始化資料： ng-init 指令初始化 AngularJS 應用程式變數。
克隆資料： ng-repeat 指令對於集合中（陣列中）的每個項會克隆一次 HTML 元素。eg:ng-repeat=”x in arrays”
自定義指令： 通過使用 .directive 函式來新增自定義的指令。要呼叫自定義指令，HTML 元素上需要新增自定義指令名。使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive。
eg:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
//restrict 預設值為 EA, 即可以通過元素名和屬性名來呼叫指令。
restrict : "A",//限制使用--E 作為元素名使用。A 作為屬性使用。C 作為類名使用。M 作為註釋使用
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>控制器： ng-controller 指令定義了應用程式控制器。
過濾器： 過濾器可以通過一個管道字元（|）和一個過濾器新增到表示式中。
service： AngularJS 中你可以建立自己的服務，或使用內建服務。服務是一個函式或物件，可在你的 AngularJS 應用中使用。AngularJS 內建了30 多個服務。下面介紹幾個常用的內建服務。
1，$location:類似 window.location 物件，但 window.location 物件在 AngularJS 應用中有一定的侷限性。
2，$http:AngularJS 應用中最常用的服務。 服務向伺服器傳送請求，應用響應伺服器傳送過來的資料。
3,$timeout:AngularJS $timeout 服務對應了 JS window.setTimeout 函式。
4,$interval:AngularJS $timeout 服務對應了 JS window.setInterval 函式。
5,使用者可以根據自己的需求來建立自定義服務。http: ａngularJS 中的一個核心服務，用於讀取遠端伺服器的資料。注意v1.5 中$http 的 success 和 error 方法已廢棄。使用 then 方法替代
格式：/ 簡單的 GET 請求，可以改為 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 請求成功執行程式碼
}, function errorCallback(response) {
// 請求失敗執行程式碼
});選擇框（select）：AngularJS 可以使用陣列或物件建立一個下拉列表選項。
1,使用ng-options來建立一個物件
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
2,使用ng-repeat來建立物件，
<select ng-model="selectedSite">
<option ng-repeat="x in names">{{x}}</option>
</select>
3,區別：ng-options，選擇的值是一個物件：也就是當select獲取值selectedSite時候，得到的是一個物件。ng-repeat，選擇的值是一個字串:也就是當select獲取值selectedSite時候，得到的是一個字串表格： AngularJs中的ng-repeat 指令可以完美的顯示錶格。也可以在表格進行顯示的時候，使用過濾器。
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names | orderBy : 'Name'">
<td>{{ $index + 1 }}</td>//顯示序號
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("/try/angularjs/data/Customers_JSON.php")
.then(function (result) {
$scope.names = result.data.records;
});
});
</script>HTML DOM： AngularJS 為 HTML DOM 元素的屬性提供了繫結應用資料的指令。
1,ng-disabled 指令直接繫結應用程式資料到 HTML 的 disabled 屬性。
2,ng-show 指令隱藏或顯示一個 HTML 元素。ng-show 指令根據 value 的值來顯示（隱藏）HTML 元素。你可以使用表示式來計算布林值（ true 或 false）:
3,ng-hide 指令用於隱藏或顯示 HTML 元素。注意在頁面中如果使用input type=hidden來做表單傳值的時候，是不支援的。
4,ng-click 指令定義了 AngularJS 點選事件。
模組： 模組定義了一個應用程式。模組是應用程式中不同部分的容器。模組是應用控制器的容器。控制器通常屬於一個模組。
注意： 對於 HTML 應用程式，通常建議把所有的指令碼都放置在 元素的最底部。這會提高網頁載入速度，因為 HTML 載入不受制於指令碼載入。在我們的多個 AngularJS 例項中，您將看到 AngularJS 庫是在文件的 區域被載入。在我們的例項中，AngularJS 在 元素中被載入，因為對 angular.module 的呼叫只能在庫載入完成後才能進行。另一個解決方案是在 元素中載入 AngularJS 庫，但是必須放置在您的 AngularJS 指令碼前面：
表單： AngularJS 表單是輸入控制元件的集合。
1,Input 控制元件使用 ng-model 指令來實現資料繫結。
2,checkbox 的值為 true 或 false，可以使用 ng-model 指令繫結，它的值可以用於應用中。舉個例子：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm">
<p>職業:
<input type="checkbox" ng-model="user.jobs.engineer">工程師
<input type="checkbox" ng-model="user.jobs.designer">設計師
<input type="checkbox" ng-model="user.jobs.teacher">教師
</p>
<input type="submit" value="提交">
<input type="button" value="選中教師" ng-click="select_teacher()">
</form>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("person", function($scope) {
$scope.user = {
jobs: {
engineer: true,
designer: false,
teacher: false
}
};
$scope.submit = function() {
alert(JSON.stringify($scope.user));
};
$scope.select_teacher = function() {
$scope.user.jobs.teacher = true;
}
});
</script> 3,radio：我們可以使用 ng-model 來繫結單選按鈕到你的應用中。單選框使用同一個 ng-model ，可以有不同的值，但只有被選中的單選按鈕的值會被使用。
4,下拉選單上面已經寫過。在此不再複述。
輸入驗證： AngularJS 表單和控制元件可以提供驗證功能，並對使用者輸入的非法資料進行警告。
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>使用者名稱:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">使用者名稱是必須的。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
});
</script>注意： 我們使用了 ng-show指令， color:red 在郵件的 invalid 都為 true 時才顯示。
屬性 描述
$dirty 表單有填寫記錄
$valid 欄位內容合法的
$invalid 欄位內容是非法的
$pristine 表單沒有填寫記錄API： AngularJS 全域性 API 用於執行常見任務的 JavaScript 函式集合，如：比較物件,迭代物件,轉換物件,全域性 API 函式使用 angular 物件進行訪問。
以下列出了一些通用的 API 函式：
angular.lowercase() 轉換字串為小寫
angular.uppercase() 轉換字串為大寫
angular.isString() 判斷給定的物件是否為字串，如果是返回 true。
angular.isNumber() 判斷給定的物件是否為數字，如果是返回 true。注意點：
1，HTML5 允許擴充套件的（自制的）屬性，以 data- 開頭。AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
2，類似於 JavaScript 表示式，AngularJS 表示式可以包含字母，操作符，變數。
與 JavaScript 表示式不同，AngularJS 表示式可以寫在 HTML 中。AngularJS 表示式不支援條件判斷，迴圈及異常。AngularJS 表示式支援過濾器。