angularJs

AngularJS 應用組成以下：

• View(視圖), 即 HTML。
• Model(模型), 當前視圖中可用的數據。
• Controller(控制器), 即 JavaScript 函數，能夠添加或修改屬性。

一、AngularJS 表達式：寫在雙大括號內{{ expression }}，能夠直接嵌套在HTML中。等價於：ng-bind 指令。能夠包含文字、運算符和變量。（數組、對象、運算等）

如：<div ng-app="" ng-init="firstName='John';lastName='Doe'">
　　<p>姓名： {{ firstName + " " + lastName }}</p>
　　</div>

等價於：<div ng-app="" ng-init="firstName='John';lastName='Doe'">
　　　　<p>姓名： <span ng-bind="firstName+ " " + lastName"></span></p>
　　　　</div>

二、AngularJS 指令：

　　(1)前綴 ng-

如：　ng-app 指令初始化一個 AngularJS 應用程序。

　　　ng-init 指令初始化應用程序數據。

　　　ng-model 指令把元素值（input, select, textarea）綁定到應用程序。爲應用程序數據提供類型驗證（number、email、required）；爲應用程序數據提供狀態（invalid、dirty、touched、error）；爲 HTML 元素提供 CSS 類；綁定 HTML 元素到 　　　HTML 表單。

　　　ng-repeat 指令：將集合中（數組中）的每一個項會 克隆一次 HTML 元素。

　　　　<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  　　　　　　<p>使用 ng-repeat 來循環數組</p>
 　　　　　　 <ul>
    　　　　　　　　<li ng-repeat="x in names">
      　　　　　　　　　　{{ x }}
   　　　　　　　　 </li>
  　　　　　　</ul>
　　　　</div>

　　(2)自定義指令：使用 .directive 函數來添加自定義的指令,使用駝峯法來命名一個指令。經過：元素名、屬性、類名、註釋來調用，而且能夠限制指令的調用方式。

如：

　　<div ng-app="myApp" ng-controller="myCtrl">
　　　　名字: <input ng-model="name">
　　　　<h1>你輸入了: {{name}}</h1>

　　　　年齡: <input ng-model="age">
　　　　<h1>你輸入了: {{age}}</h1>
　　</div>

<script>
　　var app = angular.module('myApp',[]);
　　app.controller('myCtrl', function($scope) {
　　　　$scope.name = "John Doe";
　　　　$scope.age = "20";
　　});
</script>

三、驗證：

（1）ng-show 屬性返回 true 的狀況下顯示；

（2）ng-model 指令能夠爲應用數據提供狀態值(invalid, dirty, touched, error)；

如：

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

　　Email:

　　<input type="email" name="myAddress" ng-model="myText">

　　<p>Valid: {{myForm.myAddress.$valid}} (若是輸入的值是合法的則爲 true)。</p>

　　<p>Dirty: {{myForm.myAddress.$dirty}} (若是值改變則爲 true)。</p>

　　<p>Touched: {{myForm.myAddress.$touched}} (若是經過觸屏點擊則爲 true)。</p>

</form>

四、做用域：

　　Scope 是一個對象（模型），可應用在視圖和控制器上。在控制器中添加 $scope 對象時，視圖 (HTML) 能夠獲取了這些屬性。不須要添加 $scope 前綴, 只須要添加屬性名便可，如： {{carname}}。

　　根做用域：全部的應用都有一個 $rootScope，它能夠做用在 ng-app 指令包含的全部 HTML 元素中。$rootScope 可做用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，能夠在各個 controller 中使用。

如：

<div ng-app="myApp" ng-controller="myCtrl">
　　<h1>{{carname}}</h1>
</div>
<script>

　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope) {
    　　　$scope.carname = "Volvo";
　　});

</script>

五、控制器：控制 AngularJS 應用程序的數據。ng-controller 指令定義了應用程序控制器。也能夠引用外部文件中的控制器

<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>

應用解析：

AngularJS 應用程序由 ng-app 定義。應用程序在 <div> 內運行。

ng-controller="myCtrl" 屬性是一個 AngularJS 指令。用於定義一個控制器。

myCtrl 函數是一個 JavaScript 函數。

AngularJS 使用$scope 對象來調用控制器。

在 AngularJS 中， $scope 是一個應用象(屬於應用變量和函數)。

控制器的 $scope （至關於做用域、控制範圍）用來保存AngularJS Model(模型)的對象。

控制器在做用域中建立了兩個屬性 (firstName 和 lastName)。

ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。

六、過濾器：可用於轉換數據，使用一個管道字符（|）添加到表達式和指令中。

如：<p>姓名爲 {{ lastName | uppercase }}</p>

七、服務：是一個函數或對象，可在你的 AngularJS 應用中使用。$location 服務，它能夠返回當前頁面的 URL 地址；$http服務，向服務器發送請求，應用響應服務器傳送過來的數據；$timeout 服務，對應了 JS window.setTimeout 函數；$interval 服務，對應了 JS window.setInterval 函數；當你建立了自定義服務，並鏈接到你的應用上後，你能夠在控制器，指令，過濾器或其餘服務中使用它。

如：

<div ng-app="myApp" ng-controller="myCtrl">
　　<p> 當前頁面的url:</p>
　　<h3>{{myUrl}}</h3>
</div>

<p>該實例使用了內建的 $location 服務獲取當前頁面的 URL。</p>

<script>
　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope, $location) {    // $location 服務是做爲一個參數傳遞到 controller 中。若是要使用它，須要在 controller 中定義。
　　　　$scope.myUrl = $location.absUrl();
　　});
</script>

<div ng-app="myApp" ng-controller="myCtrl">

　　<p>歡迎信息:</p>

　　<h1>{{myWelcome}}</h1>

</div>

<p> $http 服務向服務器請求信息，返回的值放入變量 "myWelcome" 中。</p>

<script>
　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope, $http) {
　　　　$http.get("welcome.htm").then(function (response) {
　　　　　　$scope.myWelcome = response.data;
　　　　});
　　});
</script>

八、select選擇框：能夠使用數組或對象建立一個下拉列表選項，使用 ng-option 指令來建立一個下拉列表，列表項經過對象和數組循環輸出；也能夠使用ng-repeat 指令來建立下拉列表；

ng-repeat 指令是經過數組來循環 HTML 代碼來建立下拉列表，但 ng-options 指令更適合建立下拉列表，它有如下優點：使用 ng-options 的選項的一個對象， ng-repeat 是一個字符串。

如：

<div ng-app="myApp" ng-controller="myCtrl">
　　<select ng-model="selectedName" ng-options="x for x in names">
　　</select>
</div>

或者

　　<select>
　　　　<option ng-repeat="x in names">{{x}}</option>
　　</select>
<script>

　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope) {
    　　$scope.names = ["Google", "Runoob", "Taobao"];
　　});

</script>

<div ng-app="myApp" ng-controller="myCtrl">  //使用對象做爲數據源, x 爲鍵(key), y 爲值(value):

　　<select ng-model="selectedSite" ng-options="x for (x, y) in sites">  //在下拉菜單也能夠不使用 key-value 對中的 key , 直接使用對象的屬性：ng-options="y.brand for (x, y) in sites"
　　</select> 

　　<h1>你選擇的值是: {{selectedSite}}</h1>

</div>

<script>
　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope) {
　　　　$scope.sites = {
　　　　　　site01 : "Google",
　　　　　　site02 : "Runoob",
　　　　　　site03 : "Taobao"
　　　　};
　　});
</script>

九、HTML DOM：ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性；綁定應用數據。ng-show 指令根據 value 的值來顯示（隱藏）HTML 元素,（ true 或 false）其中能夠使用表達式來代替；ng-hide 指令用於隱藏或顯示 HTML 元素；ng-click 指令定義了點擊事件。

十、動畫：ngAnimate 模型能夠添加或移除 class 。ngAnimate 模型並不能使 HTML 元素產生動畫，可是 ngAnimate 會監測事件，相似隱藏顯示 HTML 元素 ，若是事件發生 ngAnimate 就會使用預約義的 class 來設置 HTML 元素的動畫。