AngularJS

AngularJS 是一个 JavaScript 框架。它可通过

ng-app 指令告诉 AngularJS，
元素是 AngularJS 应用程序的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

AngularJs的主要使用是：
首先选中一个div，定义他的模块(Module)和控制器(Controller);

...

然后在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 作为注释使用

         自定义指令
      ----初始化ng-app 指定控制器
      ---元素名
        ----属性
        ---类名
       ----注释

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 创建选择框:

使用ng-options指令来循环数组names存储在x变量中，然后从他上面提取x。

使用ng-repeat 指令来创建下拉列表：

当循环的数据为一个数组的时候：

你选择的是: {{selectedSite.site}}

网址为: {{selectedSite.url}}

$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前面的值为下拉列表中显示的数据，

当循环的数据为一个对象的时候：

你选择的是: {{selectedCar.brand}}

型号为: {{selectedCar.model}}

颜色为: {{selectedCar.color}}

$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 指令可以完美的显示表格：

-----显示序号

{{ $index + 1 }} {{ x.Name }} {{ x.Country }}

每一行循环一个数据，也可以给table添加样式。

AngularJS 事件

ng-show 指令为true的时候显示元素

显示

ng-hide 指令为 true的时候隐藏元素
隐藏
ng-click指令点击事件
----点击增加数量

AngularJS 表单

以下 HTML input 元素被称为 HTML 控件:

input 元素
select 元素
button 元素
textarea 元素
Input 控件使用 ng-model 指令来实现数据绑定。
checkbox 的值为 true(选中) 或 false，可以使用 ng-model 指令绑定;
单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
下拉菜单同样也可以绑定值。

表单的验证：

required-----意思是必填字段
ng-disabled="true" 禁用或者使用输入框或者是按钮，直接加入到标签中

AngularJS动画

引入动画：

动画的使用需要先加入到模型中，直接设置为应用名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 元素指定链接 |
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 | 在