初次接觸Angular，所以只是用來記載一些基礎知識，不對之處，望指正！

Angular是一個JavaScript框架，可通過《script》標籤新增到網頁中

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

ng-app:指令指定了一個AngularJs應用程式，比如放在一個div裡面，表明該DIv是AngularJs應用程式的所有者

ng-model:指令把元素值（比如輸入域的值）繫結到應用程式

ng-model 指令也可以：

• 為應用程式資料提供型別驗證（number、email、required）。
• 為應用程式資料提供狀態（invalid、dirty、touched、error）。
• 為 HTML 元素提供 CSS 類。
• 繫結 HTML 元素到 HTML 表單。

ng-bind:指令把應用程式資料繫結到HTML檢視。

ng-init 指令初始化 AngularJS 應用程式變數

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

AngularJS 表示式把資料繫結到 HTML，這與 ng-bind 指令有異曲同工之妙。

AngularJS 將在表示式書寫的位置"輸出"資料。

包含：AngularJs的表示式，物件，陣列，字串，數字等，用ng-init初始化，用ng-bind（在標籤內）或者{{}}兩種方式顯示。

ng-repeat指令重複一個HTML元素或者物件陣列，用ng-init初始化，用ng-repeat="x in init物件"，最後用{{}}輸出

ng-controller 指令定義了應用程式控制器。

AngularJS 過濾器可用於轉換資料：

 AngularJS Scope(作用域)

Scope(作用域) 是應用在 HTML (檢視) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個物件，有可用的方法和屬性。

Scope 可應用在檢視和控制器上(建立控制器時可以當作引數傳遞)

根作用域：

所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，可以在各個 controller 中使用。 $rootScope 在迴圈物件內外都可以訪問。

AngularJS 控制器

AngularJS 控制器在<div>內由 ng-controller 指令定義。

AngularJS 過濾器

AngularJS 過濾器可以用來格式化資料，過濾器能夠用在表示式和指令中。過濾器可以使用一個管道字元（|）新增到表示式和指令中。

向指令新增過濾器

過濾器可以通過一個管道字元（|）和一個過濾器新增到指令中。

orderBy 過濾器根據某個表示式排列陣列：

過濾輸入

輸入過濾器可以通過一個管道字元（|）和一個過濾器新增到指令中，該過濾器後跟一個冒號和一個模型名稱。例如：在搜尋時根據搜尋的輸入的欄位過濾不需要的欄位。

AngularJS 服務(Service)

AngularJS 中的服務是一個函式或物件。

AngularJS 中你可以建立自己的服務，或使用內建服務。 $location 服務，它可以返回當前頁面的 URL 地址。

$http 是 AngularJS 應用中最常用的服務。 服務向伺服器傳送請求，應用響應伺服器傳送過來的資料

$http 是 AngularJS 中的一個核心服務，用於讀取遠端伺服器的資料。

AngularJS $timeout 服務對應了 JS window.setTimeout 函式。

$interval 服務

AngularJS $interval 服務對應了 JS window.setInterval 函式。$http.get(url) 是用於讀取伺服器資料的函式。

使用 ng-options 建立選擇框

在 AngularJS 中我們可以使用 ng-option 指令來建立一個下拉列表，列表項通過物件和陣列迴圈(for)輸出，與ng-repeat

的區別在於其選項是一個物件，而ng-repeat是一個字串。

AngularJS 表格

ng-repeat 指令可以完美的顯示錶格。

<div ng-app="" ng-controller="customersController"> 

<table>
  <tr ng-repeat="x in names">
    <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("/statics/demosource/Customers_JSON.php")//利用PHP遠端獲取表格中的資料。
    .success(function (response) {$scope.names = response.records;});
});
</script>

ng-disabled 指令直接繫結應用程式資料到 HTML 的 disabled 屬性。

ng-show（true為可見，false為不可見） 指令隱藏或顯示一個 HTML 元素。

ng-click 指令定義了一個 AngularJS 單擊事件。

ng-hide 指令用於設定應用的一部分 不可見 。

ng-hide="true" 讓 HTML 元素 不可見。

ng-hide="false" 讓元素可見。

AngularJS 表單

AngularJS 表單是輸入控制元件的集合。

以下 HTML input 元素被稱為 HTML 控制元件:

• input 元素
• select 元素
• button 元素
• textarea 元素

AngularJS 輸入驗證

AngularJS 表單和控制元件提供了驗證功能，對與使用者的輸入進行判斷，以辨別輸入是否合法，如果不合法則進行警告。

HTML 表單屬性 novalidate 用於禁用瀏覽器預設的驗證。

AngularJS 動畫

AngularJS 提供了動畫效果，可以配合 CSS 使用。

AngularJS 使用動畫需要引入 angular-animate.min.js 庫。

ngAnimate 做了什麼?

ngAnimate 模型可以新增或移除 class 。

ngAnimate 模型並不能使 HTML 元素產生動畫，但是 ngAnimate 會監測事件，類似隱藏顯示 HTML 元素 ，如果事件發生 ngAnimate 就會使用預定義的 class 來設定 HTML 元素的動畫。

AngularJS 依賴注入

AngularJS 提供很好的依賴注入機制。以下5個核心元件用來作為依賴注入：

• value:用於向控制器傳遞值（配置階段）
• factory：factory 是一個函式用於返回值。在 service 和 controller 需要時建立。通常我們使用 factory 函式來計算或返回值。
• service：
• provider：Provider 中提供了一個 factory 方法 get()，它用於返回 value/service/factory。
• constant：constant(常量)用來在配置階段傳遞數值，注意這個常量在配置階段是不可用的。

AngularJS 路由

AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。

通過 AngularJS 可以實現多檢視的單頁Web應用（single page web application，SPA）。

通常我們的URL形式為 http://w3cschool.cn/first/page，但在單頁Web應用中 AngularJS 通過 # + 標記 實現，例如：

http://w3cschool.cn/#/first

http://w3cschool.cn/#/second

補充：

在Angular框架中，雙美元符字首$$表示這個變數被當作私有的來考慮，不應當在外部程式碼中呼叫。

function $scope(){ this. $$watchList = []; }

髒處理，雙向繫結（$csope作用域）問題：只有當觸發UI事件，ajax請求或者 timeout 延遲，才會觸發髒檢查。
$csope的詳細解釋參見：https://blog.csdn.net/matiascx/article/details/76419894

$on、$emit和$broadcast的使用:    http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html

• $emit只能向parent controller傳遞event與data
• $broadcast只能向child controller傳遞event與data
• $on用於接收event與data

服務：服務提供了一種能在應用的整個生命週期內保持資料的方法，它能夠在控制器之間進行通訊，並且能保證資料的一致性。            服務是一個單例物件，在每個應用中只會被例項化一次（被$injector例項化），並且是延遲載入的（需要時才會被創                   建）。服務提供了把與特定功能相關聯的方法集中在一起的介面。

建立方式：

1、Factory：就是建立一個物件，然後為他新增屬性和方法，最後返回這個物件。當把這個服務注入控制器的時候，控制器就可以訪問在那個物件上的屬性了
2、Service：service建立服務時，我們需要知道的最重要的一件事就是他是使用new關鍵字進行例項化
3、Provider：是唯一一種可以建立用來注入到app.config()函式的服務的方式。在你的應用在別處執行之前對你的服務物件進行一部分的配置，那麼，這個就顯得很重要了。可以認為provider有三個部分，第一部分是私有變數和私有函式，這些變數和函式會在以後被修改。第二部分是在app.config函式裡可以訪問的變數和函式；第三部分是在控制器裡可以訪問的變數和函式。

區別：https://segmentfault.com/a/1190000004602085

promise物件：https://segmentfault.com/a/1190000002788733

一個頁面AngularJS預設只加載一個ng-app，如果是多個ng-app，需要手動載入。：

angular.module('sellerApp', []).controller('sellerCtrl', function ($scope, $http) {

$http.get("/tools/index_ajax.ashx?action=productTop&pageSize=3").then(function (response) {

if (response.data.list.length == 0) {

$("#sellerloading").html("暫無資料");

} else {

$("#sellerloading").hide();

}

$scope.list = response.data.list;

});

});

//angular手動載入第2個ng-app

angular.bootstrap(document.querySelector('[ng-app="sellerApp"]'), ['sellerApp'])