AngularJS
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 指令是以 ng 作为前缀的 HTML 属性。
AngularJS有很多的模块和控制器，而每个模块都对应一个控制器，他们之间使用
Scope来进行传值，有一个根作用域rootScope，每个控制器都可以使用这个属性。
控制器也可以从外部引用。
angular.module('myApp', []).controller('namesCtrl', function($scope) { 方法 });
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
引用：<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
AngularJs的主要使用是：
首先选中一个div，定义他的模块(Module)和控制器(Controller);
<div ng-app="myApp" ng-controller="myCtrl">...</div>
然后在script里面进行代码书写：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.firstName= "John"; $scope.lastName= "Doe";});
可以使用
ng-init=" 变量 字符串 对象 数组 "来初始化数据
数据的呈现有两种方式：
- 通过大括号的方式包含住数据；
{{ quantity * cost }}|||{{ firstName + " " + lastName }}
- 通过ng-bind来绑定数据到html中；
ng-bind="person.lastName"|||ng-bind="points[2]"
AngularJS 指令
完整的指令：http://www.runoob.com/angularjs/angularjs-reference.html
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把数据和元素绑定在一起。
ng-repeat 指令把数据循环输出。
ng-repeat="x in names"然后把x绑定在html中，也可以循环对象数组。
》》ng-model指令的扩展：《《
ng-model 指令根据表单域的状态添加/移除以下类：
ng-valid ---当表单中输入内容之后此方法为true
ng-invalid ---当表单中未输入内容的时候此方法为true
ng-pristine ---当用户未修改表单的时候发生
ng-touched ---- 当与用户交互之后发生
ng-untouched ----当没有与用户进行交互的时候发生
ng-dirty ----当表单中的值发生改变的时候
ng-pending ---
ng-empty ---
ng-not-empty ---
ng-blur ------当这个元素失去焦点的时候执行其中的方法
ng-change ---当输入的值发生了修改之后发生
ng-checked ----用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
ng-class-even 指令用于为 HTML添加CSS 类，但只作用于偶数行，需要与 ng-repeat 指令搭配使用
ng-class-odd 指令用于为 HTML 添加 CSS 类，但只作用于奇数行，需要与 ng-repeat 指令搭配使用
ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。
ng-controller 指令用于为你的应用添加控制器
ng-copy 指令用于告诉 AngularJS 在 HTML 元素文本被拷贝时要执行的操作。
ng-dblclick 指令用于告诉 AngularJS 在鼠标鼠标 HTML 元素时需要执行的操作。
自定义指令：
你可以使用 .directive 函数来添加自定义的指令。
使用自定义的指令有四种方式：元素名 ， 属性 ， 类名， 注释。
也可以指定一个自定义命令的使用方式，通过 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", []); ---关联html
app.directive("runoobDirective", function() { ---创建自定义指令
return {
restrict : "A", -----指定使用的方式
template : "<h1>自定义指令!</h1>" ----自定义指令的模版
};
});
app.controller('myCtrl', function($scope) { ---- 控制器：进行数据的运算
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script></body>
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
方法：$scope.fullName = function() { return $scope.firstName + " " + $scope.lastName;}
根作用域
所有的应用都有一个 rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在
各个 controller 中使用。rootscope设置的变量在所有controller里面都是可以直接用{{root.变量名}}来显示
的，当然也可以赋值给scope.
AngularJS 过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
{{ lastName | uppercase }}----把数据转化为大写；
{{ lastName | lowercase }}---把数据转化为小写；
(quantity * price) | currency }}---把数据转换为货币；
过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderBy 过滤器根据表达式排列数组：ng-repeat="x in names | orderBy:'country'"
orderBy 根据后面的变量对数组进行排序处理。
filter 过滤器从数组中选择一个子集：ng-repeat="x in names | filter:test | orderBy:'country'"
fillter 意思就是根据输入的数据在数组中进行查找可以匹配的子集。
可以自定义过滤器：
app.filter('reverse', function() { ---可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
}); ----定义一个名字为reverse的过滤器:反转字符串
AngularJS 服务(Service)----------待完善……
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
AngularJS当中的http服务：
// 简单的 GET 请求，可以改为 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
//get和post请求的简写方法
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
AngularJS Select(选择框)
使用 ng-options 创建选择框:
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>
使用ng-options指令来循环数组names存储在x变量中，然后从他上面提取x。
使用ng-repeat 指令来创建下拉列表：
<select>
<option ng-repeat="x in names">{{x}}</option> ----列表项
</select>
当循环的数据为一个数组的时候：
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{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指令来循环数组sites，存储在x中，而for前面的值为下拉列表中显示的数据，
当循环的数据为一个对象的时候：
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你选择的是: {{selectedCar.brand}}</p>
<p>型号为: {{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来循环对象，for后面的小括号中变量代表的是，健和值。
使用ng-options来设置下拉列表的时候，for前面的值只是下拉列表中显示的选项，而for后面的值分为两种情况，当循环的数组的时候，直接一个变量代表的是数组中的每一个值，当循环的是一个对象的时候，for后面的小括号中有两个变量名，分别是键和值。也就是对象中的名字和属性。
AngularJS 表格
ng-repeat 指令可以完美的显示表格：
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td> -----显示序号
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
每一行循环一个数据，也可以给table添加样式。
AngularJS 事件
ng-show 指令 为true的时候显示元素
<p ng-show="true">显示</p>
ng-hide 指令 为 true的时候隐藏元素
<p ng-hide="true">隐藏</p>
ng-click指令 点击事件
<button ng-click="count = count + 1">点我</button>----点击增加数量
AngularJS 表单
以下 HTML input 元素被称为 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
Input 控件使用 ng-model 指令来实现数据绑定。
checkbox 的值为 true(选中) 或 false，可以使用 ng-model 指令绑定;
单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
下拉菜单同样也可以绑定值。
表单的验证：
<input type="text" name="user" required > required-----意思是必填字段
ng-disabled="true" 禁用或者使用输入框或者是按钮，直接加入到标签中
AngularJS动画
引入动画：
<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>
动画的使用需要先加入到模型中，直接设置为应用名
ng-app="ngAnimate"
也可以加入到模型中，var app = angular.module('myApp', ['ngAnimate']);
如果需要隐藏一个元素，需要给他添加动画transition。然后设计隐藏时的动画 .ng-hide{ 动画效果 }
.ng-hide { //隐藏动画效果
height: 0; //宽边为0
width: 0; //高变为0
background-color: transparent; //背景颜色透明
top:-100px; //上移100px
left: 200px; //距离左边200px
}
AngularJS 指令
ng-app | 定义应用程序的根元素。 |
ng-bind | 绑定 HTML 元素到应用程序数据 |
ng-blur | 规定 blur 事件的行为 |
ng-focus | 规定聚焦事件的行为 |
ng-change | 规定在内容改变时要执行的表达式 |
ng-checked | 规定元素是否被选中 |
ng-class | 指定 HTML 元素使用的 CSS 类 |
ng-class-even | 类似 ng-class，但只在偶数行起作用 |
ng-class-odd | 类似 ng-class，但只在奇数行起作用 |
ng-click | 定义元素被点击时的行为 |
ng-cloak | 在应用正要加载时防止其闪烁 |
ng-controller | 定义应用的控制器对象 |
ng-copy | 规定拷贝事件的行为 |
ng-csp | 修改内容的安全策略 |
ng-cut | 规定剪切事件的行为 |
ng-dblclick | 规定双击事件的行为 |
ng-disabled | 规定一个元素是否被禁用 |
ng-hide | 隐藏或显示 HTML 元素 |
ng-href | 为 the <a> 元素指定链接 |
ng-if | 如果条件为 false 移除 HTML 元素 |
ng-init | 定义应用的初始化值 |
ng-keydown | 规定按下按键事件的行为 |
ng-keypress | 规定按下按键事件的行为 |
ng-keyup | 规定松开按键事件的行为 |
ng-list | 将文本转换为列表 (数组) |
ng-model | 绑定 HTML 控制器的值到应用数据 |
ng-model-options | 规定如何更新模型 |
ng-mousedown | 规定按下鼠标按键时的行为
ng-mouseenter | 规定鼠标指针穿过元素时的行为 |
ng-mouseleave | 规定鼠标指针离开元素时的行为 |
ng-mousemove | 规定鼠标指针在指定的元素中移动时的行为 |
ng-mouseover | 规定鼠标指针位于元素上方时的行为 |
ng-mouseup | 规定当在元素上松开鼠标按钮时的行为 |
ng-non-bindable | 规定元素或子元素不能绑定数据 |
ng-open | 指定元素的 open 属性 |
ng-options | 在 <select> 列表中指定 <options> |
ng-paste | 规定粘贴事件的行为 |
ng-readonly | 指定元素的 readonly 属性 |
ng-repeat | 定义集合中每项数据的模板 |
ng-selected | 指定元素的 selected 属性 |
ng-show | 显示或隐藏 HTML 元素 |
ng-src | 指定 <img> 元素的 src 属性 |
ng-srcset | 指定 <img> 元素的 srcset 属性 |
ng-style | 指定元素的 style 属性 |
ng-submit | 规定 onsubmit 事件发生时执行的表达式 |
ng-switch | 规定显示或隐藏子元素的条件 |
ng-value | 规定 input 元素的值 |
