AngularJS
AngularJS 是一個(gè) JavaScript 框架蹲姐。它可通過 <script> 標(biāo)簽添加到 HTML 頁面秃励。
AngularJS 指令是以 ng 作為前綴的 HTML 屬性劝堪。
AngularJS有很多的模塊和控制器晚岭，而每個(gè)模塊都對(duì)應(yīng)一個(gè)控制器嗤无，他們之間使用
Scope來進(jìn)行傳值壶愤，有一個(gè)根作用域rootScope麦轰，每個(gè)控制器都可以使用這個(gè)屬性乔夯。
控制器也可以從外部引用。
angular.module('myApp', []).controller('namesCtrl', function($scope) { 方法 });
模塊定義了一個(gè)應(yīng)用程序原朝。
模塊是應(yīng)用程序中不同部分的容器驯嘱。
模塊是應(yīng)用控制器的容器。
控制器通常屬于一個(gè)模塊喳坠。
引用：<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
ng-app 指令告訴 AngularJS鞠评，<div> 元素是 AngularJS 應(yīng)用程序 的"所有者"。
ng-model 指令把輸入域的值綁定到應(yīng)用程序變量 name壕鹉。
ng-bind 指令把應(yīng)用程序變量 name 綁定到某個(gè)段落的 innerHTML剃幌。
AngularJs的主要使用是：
首先選中一個(gè)div，定義他的模塊(Module)和控制器(Controller);
<div ng-app="myApp" ng-controller="myCtrl">...</div>
然后在script里面進(jìn)行代碼書寫：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.firstName= "John"; $scope.lastName= "Doe";});
可以使用
ng-init=" 變量 字符串 對(duì)象 數(shù)組 "來初始化數(shù)據(jù)
數(shù)據(jù)的呈現(xiàn)有兩種方式：
- 通過大括號(hào)的方式包含住數(shù)據(jù)晾浴；
{{ quantity * cost }}|||{{ firstName + " " + lastName }}
- 通過ng-bind來綁定數(shù)據(jù)到html中负乡；
ng-bind="person.lastName"|||ng-bind="points[2]"
AngularJS 指令
完整的指令：http://www.runoob.com/angularjs/angularjs-reference.html
ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序。
ng-init 指令初始化應(yīng)用程序數(shù)據(jù)脊凰。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序抖棘。
ng-bind 指令把數(shù)據(jù)和元素綁定在一起。
ng-repeat 指令把數(shù)據(jù)循環(huán)輸出狸涌。
ng-repeat="x in names"然后把x綁定在html中切省，也可以循環(huán)對(duì)象數(shù)組。
》》ng-model指令的擴(kuò)展：《《
ng-model 指令根據(jù)表單域的狀態(tài)添加/移除以下類：
ng-valid ---當(dāng)表單中輸入內(nèi)容之后此方法為true
ng-invalid ---當(dāng)表單中未輸入內(nèi)容的時(shí)候此方法為true
ng-pristine ---當(dāng)用戶未修改表單的時(shí)候發(fā)生
ng-touched ---- 當(dāng)與用戶交互之后發(fā)生
ng-untouched ----當(dāng)沒有與用戶進(jìn)行交互的時(shí)候發(fā)生
ng-dirty ----當(dāng)表單中的值發(fā)生改變的時(shí)候
ng-pending ---
ng-empty ---
ng-not-empty ---
ng-blur ------當(dāng)這個(gè)元素失去焦點(diǎn)的時(shí)候執(zhí)行其中的方法
ng-change ---當(dāng)輸入的值發(fā)生了修改之后發(fā)生
ng-checked ----用于設(shè)置復(fù)選框(checkbox)或單選按鈕(radio)的 checked 屬性帕胆。
ng-class 指令用于給 HTML 元素動(dòng)態(tài)綁定一個(gè)或多個(gè) CSS 類朝捆。
ng-class-even 指令用于為 HTML添加CSS 類，但只作用于偶數(shù)行懒豹，需要與 ng-repeat 指令搭配使用
ng-class-odd 指令用于為 HTML 添加 CSS 類芙盘，但只作用于奇數(shù)行，需要與 ng-repeat 指令搭配使用
ng-cloak 指令用于在 AngularJS 應(yīng)用在加載時(shí)防止 AngularJS 代碼未加載完而出現(xiàn)的問題脸秽。
ng-controller 指令用于為你的應(yīng)用添加控制器
ng-copy 指令用于告訴 AngularJS 在 HTML 元素文本被拷貝時(shí)要執(zhí)行的操作儒老。
ng-dblclick 指令用于告訴 AngularJS 在鼠標(biāo)鼠標(biāo) HTML 元素時(shí)需要執(zhí)行的操作。
自定義指令：
你可以使用 .directive 函數(shù)來添加自定義的指令豹储。
使用自定義的指令有四種方式：元素名 贷盲， 屬性 ， 類名， 注釋巩剖。
也可以指定一個(gè)自定義命令的使用方式铝穷，通過 restrict 屬性
-E 作為元素名使用
-A 作為屬性使用
-C 作為類名使用
-M 作為注釋使用
自定義指令
<body ng-app="myApp" ng-controller="myCtrl" > ----初始化ng-app 指定控制器
<runoob-directive></runoob-directive> ---元素名
<div runoob-directive></div> ----屬性
<div class="runoob-directive"></div> ---類名
<!-- directive: runoob-directive --> ----注釋
<script>
var app = angular.module("myApp", []); ---關(guān)聯(lián)html
app.directive("runoobDirective", function() { ---創(chuàng)建自定義指令
return {
restrict : "A", -----指定使用的方式
template : "<h1>自定義指令!</h1>" ----自定義指令的模版
};
});
app.controller('myCtrl', function($scope) { ---- 控制器：進(jìn)行數(shù)據(jù)的運(yùn)算
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script></body>
Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
Scope 是一個(gè)對(duì)象佳魔，有可用的方法和屬性曙聂。
Scope 可應(yīng)用在視圖和控制器上。
方法：$scope.fullName = function() { return $scope.firstName + " " + $scope.lastName;}
根作用域
所有的應(yīng)用都有一個(gè) rootScope鞠鲜，它可以作用在 ng-app 指令包含的所有 HTML 元素中宁脊。
$rootScope 可作用于整個(gè)應(yīng)用中。是各個(gè) controller 中 scope 的橋梁贤姆。用 rootscope 定義的值榆苞，可以在
各個(gè) controller 中使用。rootscope設(shè)置的變量在所有controller里面都是可以直接用{{root.變量名}}來顯示
的霞捡，當(dāng)然也可以賦值給scope.
AngularJS 過濾器
過濾器可以通過一個(gè)管道字符（|）和一個(gè)過濾器添加到表達(dá)式中坐漏。
{{ lastName | uppercase }}----把數(shù)據(jù)轉(zhuǎn)化為大寫；
{{ lastName | lowercase }}---把數(shù)據(jù)轉(zhuǎn)化為小寫碧信；
(quantity * price) | currency }}---把數(shù)據(jù)轉(zhuǎn)換為貨幣赊琳；
過濾器可以通過一個(gè)管道字符（|）和一個(gè)過濾器添加到指令中。
orderBy 過濾器根據(jù)表達(dá)式排列數(shù)組：ng-repeat="x in names | orderBy:'country'"
orderBy 根據(jù)后面的變量對(duì)數(shù)組進(jìn)行排序處理砰碴。
filter 過濾器從數(shù)組中選擇一個(gè)子集：ng-repeat="x in names | filter:test | orderBy:'country'"
fillter 意思就是根據(jù)輸入的數(shù)據(jù)在數(shù)組中進(jìn)行查找可以匹配的子集躏筏。
可以自定義過濾器：
app.filter('reverse', function() { ---可以注入依賴
return function(text) {
return text.split("").reverse().join("");
}
}); ----定義一個(gè)名字為reverse的過濾器:反轉(zhuǎn)字符串
AngularJS 服務(wù)(Service)----------待完善……
在 AngularJS 中，服務(wù)是一個(gè)函數(shù)或?qū)ο蟪释鳎稍谀愕?AngularJS 應(yīng)用中使用趁尼。
AngularJS 內(nèi)建了30 多個(gè)服務(wù)。
AngularJS當(dāng)中的http服務(wù)：
// 簡(jiǎn)單的 GET 請(qǐng)求猖辫，可以改為 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 請(qǐng)求成功執(zhí)行代碼
}, function errorCallback(response) {
// 請(qǐng)求失敗執(zhí)行代碼
});
//get和post請(qǐng)求的簡(jiǎn)寫方法
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
AngularJS Select(選擇框)
使用 ng-options 創(chuàng)建選擇框:
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>
使用ng-options指令來循環(huán)數(shù)組names存儲(chǔ)在x變量中弱卡，然后從他上面提取x。
使用ng-repeat 指令來創(chuàng)建下拉列表：
<select>
<option ng-repeat="x in names">{{x}}</option> ----列表項(xiàng)
</select>
當(dāng)循環(huán)的數(shù)據(jù)為一個(gè)數(shù)組的時(shí)候：
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你選擇的是: {{selectedSite.site}}</h1>
<p>網(wǎng)址為: {{selectedSite.url}}</p>
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
使用ng-options指令來循環(huán)數(shù)組sites住册，存儲(chǔ)在x中，而for前面的值為下拉列表中顯示的數(shù)據(jù)瓮具，
當(dāng)循環(huán)的數(shù)據(jù)為一個(gè)對(duì)象的時(shí)候：
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你選擇的是: {{selectedCar.brand}}</p>
<p>型號(hào)為: {{selectedCar.model}}</p>
<p>顏色為: {{selectedCar.color}}</p>
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
}
使用ng-options來循環(huán)對(duì)象荧飞，for后面的小括號(hào)中變量代表的是，健和值名党。
使用ng-options來設(shè)置下拉列表的時(shí)候叹阔，for前面的值只是下拉列表中顯示的選項(xiàng)，而for后面的值分為兩種情況传睹，當(dāng)循環(huán)的數(shù)組的時(shí)候耳幢，直接一個(gè)變量代表的是數(shù)組中的每一個(gè)值，當(dāng)循環(huán)的是一個(gè)對(duì)象的時(shí)候，for后面的小括號(hào)中有兩個(gè)變量名睛藻，分別是鍵和值启上。也就是對(duì)象中的名字和屬性。
AngularJS 表格
ng-repeat 指令可以完美的顯示表格：
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td> -----顯示序號(hào)
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
每一行循環(huán)一個(gè)數(shù)據(jù)店印，也可以給table添加樣式冈在。
AngularJS 事件
ng-show 指令 為true的時(shí)候顯示元素
<p ng-show="true">顯示</p>
ng-hide 指令 為 true的時(shí)候隱藏元素
<p ng-hide="true">隱藏</p>
ng-click指令 點(diǎn)擊事件
<button ng-click="count = count + 1">點(diǎn)我</button>----點(diǎn)擊增加數(shù)量
AngularJS 表單
以下 HTML input 元素被稱為 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
Input 控件使用 ng-model 指令來實(shí)現(xiàn)數(shù)據(jù)綁定。
checkbox 的值為 true(選中) 或 false按摘，可以使用 ng-model 指令綁定;
單選框使用同一個(gè) ng-model 包券，可以有不同的值，但只有被選中的單選按鈕的值會(huì)被使用炫贤。
下拉菜單同樣也可以綁定值溅固。
表單的驗(yàn)證：
<input type="text" name="user" required > required-----意思是必填字段
ng-disabled="true" 禁用或者使用輸入框或者是按鈕，直接加入到標(biāo)簽中
AngularJS動(dòng)畫
引入動(dòng)畫：
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular-animate.min.js"></script>
動(dòng)畫的使用需要先加入到模型中兰珍，直接設(shè)置為應(yīng)用名
ng-app="ngAnimate"
也可以加入到模型中侍郭，var app = angular.module('myApp', ['ngAnimate']);
如果需要隱藏一個(gè)元素，需要給他添加動(dòng)畫transition俩垃。然后設(shè)計(jì)隱藏時(shí)的動(dòng)畫 .ng-hide{ 動(dòng)畫效果 }
.ng-hide { //隱藏動(dòng)畫效果
height: 0; //寬邊為0
width: 0; //高變?yōu)?
background-color: transparent; //背景顏色透明
top:-100px; //上移100px
left: 200px; //距離左邊200px
}
AngularJS 指令
ng-app | 定義應(yīng)用程序的根元素励幼。 |
ng-bind | 綁定 HTML 元素到應(yīng)用程序數(shù)據(jù) |
ng-blur | 規(guī)定 blur 事件的行為 |
ng-focus | 規(guī)定聚焦事件的行為 |
ng-change | 規(guī)定在內(nèi)容改變時(shí)要執(zhí)行的表達(dá)式 |
ng-checked | 規(guī)定元素是否被選中 |
ng-class | 指定 HTML 元素使用的 CSS 類 |
ng-class-even | 類似 ng-class，但只在偶數(shù)行起作用 |
ng-class-odd | 類似 ng-class口柳，但只在奇數(shù)行起作用 |
ng-click | 定義元素被點(diǎn)擊時(shí)的行為 |
ng-cloak | 在應(yīng)用正要加載時(shí)防止其閃爍 |
ng-controller | 定義應(yīng)用的控制器對(duì)象 |
ng-copy | 規(guī)定拷貝事件的行為 |
ng-csp | 修改內(nèi)容的安全策略 |
ng-cut | 規(guī)定剪切事件的行為 |
ng-dblclick | 規(guī)定雙擊事件的行為 |
ng-disabled | 規(guī)定一個(gè)元素是否被禁用 |
ng-hide | 隱藏或顯示 HTML 元素 |
ng-href | 為 the <a> 元素指定鏈接 |
ng-if | 如果條件為 false 移除 HTML 元素 |
ng-init | 定義應(yīng)用的初始化值 |
ng-keydown | 規(guī)定按下按鍵事件的行為 |
ng-keypress | 規(guī)定按下按鍵事件的行為 |
ng-keyup | 規(guī)定松開按鍵事件的行為 |
ng-list | 將文本轉(zhuǎn)換為列表 (數(shù)組) |
ng-model | 綁定 HTML 控制器的值到應(yīng)用數(shù)據(jù) |
ng-model-options | 規(guī)定如何更新模型 |
ng-mousedown | 規(guī)定按下鼠標(biāo)按鍵時(shí)的行為
ng-mouseenter | 規(guī)定鼠標(biāo)指針穿過元素時(shí)的行為 |
ng-mouseleave | 規(guī)定鼠標(biāo)指針離開元素時(shí)的行為 |
ng-mousemove | 規(guī)定鼠標(biāo)指針在指定的元素中移動(dòng)時(shí)的行為 |
ng-mouseover | 規(guī)定鼠標(biāo)指針位于元素上方時(shí)的行為 |
ng-mouseup | 規(guī)定當(dāng)在元素上松開鼠標(biāo)按鈕時(shí)的行為 |
ng-non-bindable | 規(guī)定元素或子元素不能綁定數(shù)據(jù) |
ng-open | 指定元素的 open 屬性 |
ng-options | 在 <select> 列表中指定 <options> |
ng-paste | 規(guī)定粘貼事件的行為 |
ng-readonly | 指定元素的 readonly 屬性 |
ng-repeat | 定義集合中每項(xiàng)數(shù)據(jù)的模板 |
ng-selected | 指定元素的 selected 屬性 |
ng-show | 顯示或隱藏 HTML 元素 |
ng-src | 指定 <img> 元素的 src 屬性 |
ng-srcset | 指定 <img> 元素的 srcset 屬性 |
ng-style | 指定元素的 style 屬性 |
ng-submit | 規(guī)定 onsubmit 事件發(fā)生時(shí)執(zhí)行的表達(dá)式 |
ng-switch | 規(guī)定顯示或隱藏子元素的條件 |
ng-value | 規(guī)定 input 元素的值 |
