01.指令

内置指令

<!--
    ng-app:定义应用程序的根元素,若不为""时需在js脚本中初始化。
	ng-bind:把应用程序变量绑定到某个元素的 innerHTML。
	ng-controller:定义应用的控制器对象，可以控制的服务有$scope,$rootScope,$location,$http,$timeout,$interval,其中$scope.$watch('lastName', function() {)); 可以监控变量的变化
	ng-model:绑定 HTML 控制器的值到应用数据,即angular变量值,变量值可以是字符串、对象甚至是对象属性。
	ng-attr-XXX:绑定自定义属性
	ng-init:定义应用的初始化值,一般为angular变量值。
	ng-blur:规定 blur 事件的行为。
	ng-change:规定在内容改变时要执行的表达式。
	ng-checked:用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。
	ng-class:指定 HTML 元素使用的 CSS 类。
	ng-class-even:类似 ng-class，但只在偶数行起作用,常用table/tr/td、ul/li等元素配合使用
	ng-class-odd:类似 ng-class，但只在奇数行起作用
	ng-click:规定click 事件的行为。
	*ng-cloak:在应用正要加载时防止其闪烁。如<p ng-cloak>{{ 5 + 5 }}</p>
	ng-copy:用户触发拷贝事件时，规定拷贝事件的行为。
	ng-cut:用户触发剪切事件时，规定剪切事件的行为。
	ng-paste:用户触发粘贴事件时，规定粘贴事件的行为
	ng-dblclick:用户触发双击事件时，规定双击事件的行为。
	ng-disabled:可设为true|false时，规定一个元素是否被禁用,但不会隐藏。
	ng-focus:规定focus焦点事件的行为。
	ng-hide:隐藏或显示 HTML 元素。
	ng-show:显示或隐藏 HTML 元素。
	ng-href:为<a>元素指定链接。
	ng-if:如果条件为 false 移除 HTML 元素。
	ng-include:在应用中包含 HTML 文件，如<div ng-include="'myFile.htm'"></div>,但不能执行js代码，引入格式如下
		<style>
			p {
				color: red;
			}
		</style>
		<p>大家好</p>
	ng-keydown:规定按下按键事件的行为。
	ng-keypress:规定按下按键事件的行为,通常情况下会用ng-keydown。
	ng-keyup:规定松开按键事件的行为。
	*ng-list:输出时将文本转换为列表 (数组)，输入文本时用逗号隔开。
			   <input ng-model="customers" ng-list/>
			   <pre>{{customers}}</pre>
	*ng-model-options:规定如何更新模型,option	指定了绑定数据的规则，规则如下:
						{updateOn: 'event'}规则指定事件发生后绑定数据,如ng-model-options="{updateOn: 'blur'}"
						{debounce : 1000} 规定等待多少毫秒后绑定数据
						{allowInvalid : true|false} 规定是否需要验证后绑定数据
						{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型
						{timezone : '0100'} 规则是否使用时区
	ng-mousedown:规定按下鼠标按键时的行为。
	ng-mouseenter:规定鼠标指针穿过元素时的行为。
	ng-mouseleave:规定鼠标指针离开元素时的行为。
	ng-mousemove:规定鼠标指针在指定的元素中移动时的行为。
	ng-mouseover:规定鼠标指针位于元素上方时的行为。
	ng-mouseup:规定当在元素上松开鼠标按钮时的行为。
	*ng-non-bindable:规定元素或子元素不能绑定数据,如<p ng-non-bindable>不使用 AngularJS: {{ 5+5 }}</p>显示的是“5+5”而不是“10”
	*ng-open:指定元素的 open 属性,可设值为true|false,常与details等具展开效果的元素配合使用。
			<details ng-open=true>
				<summary>学的不仅是技术，更是梦想！</summary>
				<p> - 菜鸟教程</p>
			</details>
	ng-options:在 <select> 下拉列中指定 <options>,如<select ng-model="selectedName" ng-options="item for item in names"></select>
			数据格式为字符串数组["",""] 使用x for x in names
			数据格式为单独的对象{"a":1,"b":2} 使用x for (x,y) in names
			数据格式为对象数组[{},{}] 使用x.attr for x in names	
	ng-selected:指定元素的 selected 属性,表示当前选择项,常需与select元素配合使用，类似于ng-checked。
	ng-readonly:指定元素的 readonly 属性。
	ng-repeat:定义集合中每项数据的模板,该参数还常与ng-click、ng-class配合使用
			<option ng-repeat="x in address">{{x}}</option>
	ng-src:指定 <img> 元素的 src 属性。
	*ng-srcset:指定 <img> 元素的 srcset 属性。H5的新属性，允许输入多张图片地址以匹配不同w像素值宽度的容器。  
			<img ng-src="source.jpg" width="100%" ng-srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">
	ng-style:指定元素的 style 属性,可在控制器中为ng-style所在变量赋值。
	ng-submit:规定submit 事件的行为。
	ng-switch:规定显示或隐藏子元素的条件。常与ng-switch-when配合使用，类似于switch和case
	ng-view:路由容器
	ng-value:规定 input 元素的值。
	angular.lowercase()	将字符串转换为小写
	angular.uppercase()	将字符串转换为大写
	angular.copy()	数组或对象深度拷贝
	*angular.forEach()	对象或数组的迭代函数
			var objs = [{a: 1}, {a: 2}];
			angular.forEach(objs, function(data, index, array) {
				//data等价于array[index]
				console.log(data.a + '=' + array[index].a);
			});
			
			var objs = {"a":1,"b":2}
			angular.forEach(objs, function(data, index, array) {
				//1 "a" {a: 1, b: 2}
				console.log(data,index,array);
			});
	angular.isArray()	如果引用的是数组返回 true
	angular.isDate()	如果引用的是日期返回 true
	angular.isDefined()	如果引用的已定义返回 true
	angular.isElement()	如果引用的是 DOM 元素返回 true
	angular.isFunction()	如果引用的是函数返回 true
	angular.isNumber()	如果引用的是数字返回 true,如果输入框是input标签，要检测输入框内容是否为数字，则使用!isNaN($scope.myInput);
	angular.isObject()	如果引用的是对象返回 true
	angular.isString()	如果引用的是字符串返回 true
	angular.isUndefined()	如果引用的未定义返回 true
	angular.equals(a,b)	如果两个对象相等返回 true
	*angular.fromJson()	反序列化 JSON 字符串
	*angular.toJson()	序列化 JSON 字符串
-->

自定义指令

<div ng-app="myApp" w3cschool-directive></div>
<script>

var app = angular.module("myApp", []);

app.directive("w3cschoolDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

02.作用域

$scope

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

$rootScope: 根作用域

所有后代controller都可以使用

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

<h1>{{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

03.控制器

控制器由 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>
angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

04.过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

内置过滤器

• uppercase:格式化字符串为大写
• lowercase:格式化字符串为小写
• currency:格式化为货币符号
• limitTo　: 正数，表示从头开始截取；负数表示从尾巴开始截取
• number : 格式化为保留小数点
• date : 格式化为时间
  -orderBy:"?":某属性按从小到大排序 ( orderBy:'-id' , id 降序排列 ) ( orderBy:'id', id 升序排列 )
• filter:"?":按条件过滤，如filter:{'name':'iphone'}为查找属性name值为iphone的对象

向指令添加过滤器

<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
</li>

过滤输入

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

自定义

app.filter('myFormat',['hexify', function(hexify) {
    return function(x) {
        return hexify.myFunc(x);
    };
}]);

05.服务Service

AngularJS 中的服务是一个函数或对象，可以创建自己的服务，或使用内建服务。

内建服务

AngularJS 内建了30 多个服务：

• $location

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

• $http

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

• $timeout
• $interval

自定义服务

创建：

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

使用：

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

配合过滤器：

app.filter('myFormat',['hexify', function(hexify) {
    return function(x) {
        return hexify.myFunc(x);
    };
}]);

06.HTML组件

选择框select

创建options选择项的两种方式：

• ng-options:推荐

<select ng-model="selectedName" ng-options="x.siet for x in sites">
</select>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sites = [
        {site : "Google", url : "http://www.google.com"},
        {site : "W3CSchool", url : "http://www.w3cschool.cn"},
        {site : "Taobao", url : "http://www.taobao.com"}
    ];
});
</script>

• ng-repeat

<select>
    <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

表格

<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

表单

<form  ng-app=""  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>
<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>
<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>

<script>
function validateCtrl($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
}
</script>

07.SQL

使用 PHP 从 MySQL 中获取数据:

function customersController($scope,$http) {
    var site = "http://www.w3cschool.cn";
    var page = "/statics/demosource/Customers_SQL.php";
    $http.get(site + page)
    .success(function(response) {$scope.names = response;});
}

08.模块

创建模块

<div ng-app="myApp">...</div>
<script>
// []中为依赖的模块，
var app = angular.module("myApp", []); 
</script>

在Angular1.x中，框架只承认第一个ng-app，即通过var app = angular.module("myApp", []);即可获取它的操作权；此时第二个ng-app需要我们自己来初始化，代码如下：

<div id="A1" ng-app="app1">
	<input ng-model="name" type="text" placeholder="请输入姓名">
	<p>我的姓名： {{name}}</p>
</div>
 
<div id="A2" ng-app="app2">
	<input ng-model="age" type="number" placeholder="请输入年龄">
	<p>我的年龄: {{age}}</p>
</div>
<script type="text/javascript">
	var app1 = angular.module("app1", []); //自动加载
	var app2 = angular.module("app2", []); //手动加载
	angular.bootstrap(document.getElementById("A2"), ['app2']); // 手动加载2
</script>

09.API

• angular.lowercase(): 转换字符串为小写
• angular.uppercase(): 转换字符串为大写
• angular.isString(): 判断给定的对象是否为字符串，如果是返回 true。
• angular.isNumber(): 判断给定的对象是否为数字，如果是返回 true。

10.动画

AngularJS 使用动画需要引入 angular-animate.min.js 库。

<body ng-app="ngAnimate">
...
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

AngularJS 添加/移除 class 的指令:

• ng-show
• ng-hide
• ng-class
• ng-view
• ng-include
• ng-repeat
• ng-if
• ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。

此外， 在动画完成后，HTML 元素的类集合将被移除。例如：ng-hide 指令会添加一下类：

• ng-animate
• ng-hide-animate
• ng-hide-add (如果元素将被隐藏)
• ng-hide-remove (如果元素将显示)
• ng-hide-add-active (如果元素将隐藏)
• ng-hide-remove-active (如果元素将显示)

11.依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

• value：简单的 javascript 对象，用于向控制器传递值

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

• factory：一个函数用于返回值。在 service 和 controller 需要时创建

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

• service
• provider:通过 provider 创建一个 service、factory等(配置阶段)。
  Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

• constant：constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的

mainApp.constant("configParam", "constant value");

12.路由

<!--添加路由容器-->
<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!--引入路由JS-->
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
    angular.module('routingDemoApp',['ngRoute']) // 引入路由依赖ngRoute
    .config(['$routeProvider', function($routeProvider){ // 注入$routeProvider
        $routeProvider
        .when('/',{template:'这是首页页面'}) // 配置路由url（可以是正则）及路由配置对象
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
    }]);
</script>   

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。
路由配置对象语法规则如下：

$routeProvider.when(url, {
    template: string, // 模板字符串
    templateUrl: string, // 模板文件地址
    controller: string, function 或 array, // 控制器
    controllerAs: string, // 控制器别名
    redirectTo: string, function, // 重定向
    resolve: object<key, function> // 依赖
});