0. 前言
AngularJS是现在前端开发中比较流行的主流的三大框架之一，那么三大框架都是哪些呢？AngularJS、VueJS、reactJS、今天就讲一下这个AngularJS，AngularJS[1] 诞生于2009年，是一款优秀的前端JS框架，从而现在很多开发中都在使用它。
图片.png
1. 简介
AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到HTML。
AngularJS 指令
| 指令 | 描述 |
|---|---|
| ng-app | 定义应用程序的根元素。 |
| ng-bind | 绑定 HTML 元素到应用程序数据 |
| ng-bind-html | 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符 |
| ng-bind-template | 规定要使用模板替换的文本内容 |
| ng-blur | 规定 blur 事件的行为 |
| 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-focus | 规定聚焦事件的行为 |
| ng-form | 指定 HTML 表单继承控制器表单 |
| ng-hide | 隐藏或显示 HTML 元素 |
| ng-href | 为 a元素指定链接 |
| ng-if | 如果条件为 true 显示 HTML 元素，如果条件为 false 移除 HTML 元素 |
| ng-include | 在应用中包含 HTML 文件 |
| ng-init | 定义应用的初始化值 |
| ng-jq | 定义应用必须使用到的库，如：jQuery |
| 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-pluralize | 根据本地化规则显示信息 |
| 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-transclude | 规定填充的目标位置 |
| ng-value | 规定 input 元素的值 |
基本指令和控制器
- ng-app 指令定义一个 AngularJS 应用程序。
- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
- ng-bind 指令把应用程序数据绑定到 HTML 视图。
1. 文档
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
color: red;
font-size: 30px;
}
</style>
<!--导入angularJS-->
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body>
<div>
<h1>angularJS Hello World</h1>
<!--{{}}是angularJS中的表达式-->
<h2>Hello <span> {{ 1 + 2 }} </span></h2>
</div>
</body>
</html>
ng-app用来指定哪一部分是由angularJS管理的，一般我们会放在html元素中，但如果只想在页面的某一部分用angularJS来管理，那么也可以在哪一部分去指定该指令。这也是angular的灵活之处。
暂时先不要给ng-app''''里写东西，如果写的话会报Uncaught Error:[$injector:modulerr]，过后会解释为什么。
也直接管理div这一部分：
<div ng-app="">
<h1>angularJS Hello World</h1>
<!--{{}}是angularJS中的表达式-->
<h2>Hello <span> {{ 1 + 2 }} </span></h2>
</div>
图片.png
2. 文档
那么接下来就做个对比，传统的JS代码实现某个功能，与AngularJS实现某个功能的区别
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
color: red;
font-size: 30px;
}
</style>
<!--导入angularJS-->
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body>
<div>
<h1>传统JS实现某个功能</h1>
<input type="text" id="js_input"/>
<h2>Hello <span id="js_span"></span></h2>
</div>
<script type="text/javascript">
var input = document.querySelector("#js_input"),
span = document.querySelector("#js_span");
input.onkeyup = function () {
span.innerHTML = this.value;
}
</script>
</body>
</html>
GIF.gif
onkeyup事件感觉会有种卡顿的感觉，但你说那我改成onkeydown，而onkeydown会出现你上一次按的键，
GIF.gif
那么，接下来就看一下AngularJS怎么实现的
<div>
<h1>angularJS实现以上功能</h1>
<input type="text" ng-model="msg"/>
<h2>Hello <span ng-bind="msg"></span></h2>
</div>
GIF.gif
ng-model一般是控件使用的，在这里可以用来存储变量名字为msg这个变量，然后其他元素在通过ng-bind指令来绑定msg这个变量，这样就实现了数据的绑定，减少了dom操作。
而AngularJS就不会出现那种卡顿的效果，现在体会到了它的强大之处了吧
还可以这样写：
<div>
<h1>angularJS实现以上功能</h1>
<input type="text" ng-model="msg"/>
<h2>Hello <span>{{msg}}</span></h2>
</div>
表达式的功能和ng-bind一样，也能实现上面的功能。
3. 文档
ng-init 可以初始化数据
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body>
<div ng-init="name = '小雪';person = {name : '小黑',age : 18};arr = [10,20]">
<h1>{{name}}</h1>
<h1>{{person.name}}</h1>
<h1>{{arr[0] + person.age}}</h1>
<h1>{{arr.join("===")}}</h1>
<h1>{{"abc".toUpperCase()}}</h1>
</div>
</body>
</html>
图片.png
用来声明angularJS变量的，如果有多个变量，中间用分号“;”隔开。数据类型可以是字符串、对象、数组等和Javascript中字符串、对象、数组解析数据的方法很象。
4. 文档
ng-bind-template和ng-bind功能相似，但表达式可以包含多个{{}}表达式块
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body>
<div ng-init="name = '小雪'; age = 18">
<h1 ng-bind="name"></h1>
<h1>{{name + 'and' + age}}</h1>
<h1>{{name}}and{{age}}</h1>
<hr />
<h1 ng-bind-template="{{name}}and{{age}}"></h1>
</div>
</body>
</html>
图片.png
ng-bind只能包含一个变量名，要想显示两个变量名的值，就得用字符串拼接的方式。
而ng-bind-template可以包含多个表达式块，但是要想显示值的话，必须用表达式语法，否则在这里都是字符串
5. 文档
ng-include可以引入其他html页面，注意一定要加''，否则会当成变量
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body>
<div ng-include="'footer.html'">
</div>
</body>
</html>
一定要注意我引入footer文件是" ' footer.html ' "，一共两个引号
外部文件：
<footer>
<h1>我是footer</h1>
</footer>
图片.png
6. 文档
ng-controller 指令定义了应用程序控制器。
<!DOCTYPE html>
<!--这里设置一个名字，下面会创建这个模块-->
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<!--设置控制器指令，让名字为MainCtrl控制器来控制整个body-->
<body ng-controller="MainCtrl">
<script type="text/javascript">
//创建模块
var app = angular.module('myApp',[]);
app.controller('MainCtrl',function(){
console.log("我是控制器!");
})
</script>
</body>
</html>
图片.png
上面我说到为什么不让你在ng-app后面写名字，以为你写了名字，angularjs会找你这名字这个模块，找不到就会报出错误，而现在为什么没有报错，因为创建了这个模块。
创建模块还有别的写法：
app.controller('MainCtrl',[function(){
console.log("我是控制器!");
}])
将来构建代码的话，有可能出现问题，所以写成数组的方式
还有一种就是angularJS提供了一种链式语法：
angular.module('myApp',[])
.controller('MainCtrl',[function(){
console.log("我是控制器!!!");
}])
链式语法看起来比较简单，然而我并没有看出来。。。哈哈
7. 文档
- AngularJS 使用$scope 对象来调用控制器。
- 在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
- 控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<!--ng-keyup是angularJS的键盘抬起事件-->
<!--事件触发函数，要定义在该控制的作用域对象下-->
<input type="text" ng-model="name" ng-keyup="fn();"/>
<h1>{{name}}</h1>
<h1>{{person.name}} and {{person.age}}</h1>
</div>
<script type="text/javascript">
angular.module('myApp',[])
//通过依赖注入的原理，将$scope注入到控制器中，这样就可以使用$scope
.controller('MainCtrl',['$scope',function($scope){
//声明一个变量
$scope.name = '小雪';
//声明fn方法
$scope.fn = function () {
console.log($scope.name);
}
//声明一个对象
$scope.person = {
name : "小黑",
age : 18
}
}])
</script>
</body>
</html>
图片.png
我们可以用$scope这个对象来声明变量、声明一个方法、声明一个对象等，这里我们ng-model指令将模型(model)和视图(view)进行双向绑定，当我们改变输入框的内容的时候，模型和视图都会发生改变。
图片.png
8. 文档
controllerAs——ng-controller="MainCtrl as ctrl'' 那么我们可以给控制器起一个别名，在控制器内使用this做存储即可，ctrl就表示当前控制器的实例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<input type="text" ng-model="ctrl.name" ng-keyup="ctrl.fn();"/>
<h1>{{ctrl.name}}</h1>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl',[function(){
//this就表示当前控制器对象，上面ctrl就是它
var self = this;
self.name = "小雪";
self.fn = function () {
console.log(self.name);
}
}])
</script>
</body>
</html>
图片.png
这里我们可以看见现在controller不再有$scope的注入了，感觉controller就是一个很简单的平面的JavaScript对象了，不存在任何的差别了。再则就是view上多增加了个"MainCtrl as ctrl，给controller起了一个别名，在此后的view模板中靠这个别名来访问数据对象。
9. 文档
ng-src 指令覆盖了 img元素的 src 属性。
ng-href 指令覆盖了原生的 a元素 href 属性。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<a ng-href="{{ctrl.obj.href}}" target="_blank" ng-bind="ctrl.obj.href"></a>
<br />
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl',[function(){
var self = this;
self.obj = {
href : "http://www.baidu.com",
src : "http://i.zeze.com/attachment/forum/201605/06/214815xnd5dz5t58fndt85.jpg"
}
}])
</script>
</body>
</html>
图片.png
当我点击网址的时候会打开百度的界面，这里就不演示了。
10. 文档
ng-show 指令在表达式为 true 时显示指定的 HTML 元素
ng-hide 指令在表达式为 false 时隐藏指定的 HTML 元素
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<input type="button" ng-click="ctrl.changeFn()" value="切换" />
<!--当条件为true的时候显示ng-show的内容-->
<h1 ng-show="ctrl.flag">{{ctrl.flag}} showH1</h1>
<!--当条件为true的时候显示ng-hide的内容-->
<h1 ng-hide="ctrl.flag">{{ctrl.flag}} hideH1</h1>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl',[function(){
var self = this;
self.flag = true;
self.changeFn = function(){
self.flag = !self.flag;
}
}])
</script>
</body>
</html>
GIF.gif
11. 文档
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
把上面的代码稍作修改就可以了
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.class1{
color: red;
}
.class2{
color: blue;
}
</style>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<input type="button" ng-click="ctrl.flag = !ctrl.flag" value="切换样式" />
<h1 ng-class="{true : 'class1',false : 'class2' }[ctrl.flag]">{{ctrl.flag}}</h1>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl',[function(){
var self = this;
self.flag = true;
}])
</script>
</body>
</html>
GIF.gif
12. 文档
ng-if 如果条件为 true 显示 HTML 元素，如果条件为 false 移除 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../lib/angular.min.js" ></script>
</head>
<body ng-app="">
保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>
<p>当复选框取消选中时 DIV 元素将移除。</p>
<p>当重新选中复选框，DIV 元素会重新显示。</p>
</body>
</html>
GIF.gif
13. 文档
ng-switch跟javascript里面的switch语句很像，规定显示或隐藏子元素的条件
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js" ></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<input type="button" ng-click="ctrl.changePage('page1')" value="page1" />
<input type="button" ng-click="ctrl.changePage('page2')" value="page2" />
<input type="button" ng-click="ctrl.changePage('page3')" value="page3" />
<!--ng-switch on 表示要执行分支的条件变量-->
<div ng-switch on="ctrl.pageName">
<h1 ng-switch-when="page1">{{ctrl.pageName}}</h1>
<h1 ng-switch-when="page2">{{ctrl.pageName}}</h1>
<h1 ng-switch-when="page3">{{ctrl.pageName}}</h1>
<h1 ng-switch-default>其它页面</h1>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl',[function(){
var self = this;
//初始显示第一个页面
self.pageName = "page1";
self.changePage = function (pageName) {
self.pageName = pageName;
}
}])
</script>
</body>
</html>
GIF.gif
14. 文档
ng-repeat用来遍历数据显示UI其语法相当于JS中for...in的写法，for...of的功能
遍历数组
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<h1>普通数组</h1>
<ul>
<li ng-repeat="item in ctrl.names track by $index">
<!--$index 是索引值-->
序号：{{$index + 1}} 姓名：{{item}}
</li>
</ul>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl',[function (){
var self = this;
//普通数组
self.names = [
'沫沫','大星','小爽','大淑','小妞','小妞'
]
}])
</script>
</body>
</html>
图片.png
你如果看的细心会发现这track by $index是干什么的，解决数组中不能重复出现的元素，你不写会报错！！！
遍历对象
<h1>对象</h1>
<ul>
<li ng-repeat= "(key,value) in ctrl.person">
{{key}}==={{value}}
</li>
</ul>
//遍历对象
self.person = {
name : '陈沫沫',
age : 21,
address : '北京'
}
图片.png
遍历复杂结构
<h1>复杂结构</h1>
<ul>
<li ng-repeat = "friend in ctrl.friends">
<span ng-repeat = "(key,value) in friend">
{{value}}
</span>
</li>
</ul>
因为咱们的结构是数组里有好几个对象，所以遍历了两遍，当然也有其他的做法，这里就不列举了。
//复杂结构
self.friends = [
{name : '陈小沫',age : '21'},
{name : '李小星',age : '21'},
{name : '田小爽',age : '24'},
{name : '李大淑',age : '23'},
{name : '孙小妞',age : '21'},
]
图片.png
跨元素的数据
<h1>跨元素的repeat</h1>
<table border="1" cellspacing="0" cellpadding="0">
<tr ng-repeat-start="movie in ctrl.movies">
<td>{{movie.title}}</td>
</tr>
<tr ng-repeat-end="">
<td>{{movie.name}}</td>
</tr>
</table>
//跨元素的数据
self.movies = [
{ title : 'NO.1',name : '西游记'},
{ title : 'NO.2',name : '功夫瑜伽'},
{ title : 'NO.3',name : '乘风破浪'}
]
如果你用传统的ng-repeat不能实现多行遍历，而ng-repeat-start和ng-repeat-end可以实现多行遍历
图片.png
15.文档
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl2 as ctrl">
<h1>表单提交</h1>
<form name="myForm" ng-submit="ctrl.submit()">
<input type="text" ng-model="ctrl.user.username" required="required" ng-minlength="3"ng-maxlength="10"/>
<input type="password" ng-model="ctrl.user.password" required="required" />
<input type="submit" value="提交" ng-disabled="myForm.$invalid" />
</form>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl2',[function(){
var self = this;
self.submit = function(){
//这里我们没有创建user对象，angular的特性是当输入框输入第一个字符开始，就会为我们创建user对象
console.log("用户名:" + self.user.username + ",密码:" + self.user.password);
}
}])
</script>
</body>
</html>
有几个属性我说一下required="required"必填项，不填提交不了，ng-disabled判断元素是否可以使用，$invalid返回是一个布尔值，如果表单所有验证都通过则返回true
图片.png
16. 文档
自定义指令在代码中很常见，有的然觉得它的指令还不够好，那么就自己定义一下指令
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js" ></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<!--标签形式-->
<xiao-xue></xiao-xue>
<hr />
<!--属性形式-->
<div xiao-xue></div>
<hr />
<!--class形式-->
<div class="xiao-xue"></div>
<hr />
<!--注释形式-->
<!-- directive:xiao-xue -->
<script type="text/javascript">
angular.module('myApp',[])
//指令的名字如果都是小写的话，就可以直接使用
//如果有大写字母的话，从那个位置开始使用“-”分隔开
//大写字母变成小写字母
//例如:xiaoxue 对应 xiao-xue
.directive('xiaoXue',[function(){
return {
//ECMAScript
//默认这个属性不设置的话，支持标签和属性形式
//如果要支持其他形式，必须这样设置
//如果都支持的话 restrict : "ECMA"
restrict : "ECMA",
//替换，如果是注释形式的话，必须设置这个属性方可生效
replace : true,
//模板:可以写任何内容
template:"<h1>我是h1元素</h1>"
}
}])
</script>
</body>
</html>
图片.png
还可以引入外部文件
templateUrl : "footer.html"
图片.png
模板URL,可以引入其他页面，但页面的外部不能使用注释和脚本
过滤器
1. 文件
AngularJS 过滤器可用于转换数据：
| 指令 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
先写一些假的数据
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl',[function(){
var self = this;
self.str = "abcde";
self.money = 12345;
self.arr = [33,22,55,44];
self.persons = [
{name : 'a',age : 18},
{name : 'c',age : 17},
{name : 'b',age : 20},
{name : 'ab',age : 21},
{name : 'ca',age : 25},
{name : 'cb',age : 16},
]
}])
</script>
货币格式处理
h1>货币格式处理</h1>
<!--currency过滤器默认是美元-->
<h2>{{ctrl.money | currency}}</h2>
<h2>{{ctrl.money | currency:"￥"}}</h2>
图片.png
字母大小写格式转换
<h1>字母大小写格式转换</h1>
<h2>{{ctrl.str | uppercase}}</h2>
<h2>{{"ABC" | lowercase}}</h2>
图片.png
限制字符串或数组的长度
<h1>限制字符串或数组的长度</h1>
<!--管道符可以连着使用，相当于继续过滤-->
<h2>{{ ctrl.str | limitTo : 3 | uppercase}}</h2>
<!--过滤数组后，截取2个长度，然后获取第一个元素-->
<h2>{{ (ctrl.arr | limitTo : 2)[0]}}</h2>
图片.png
给数字设置千分位
<h1>给数字设置千分位</h1>
<h2>{{1234567 | number}}</h2>
<!--保留两位小数点-->
<h2>{{1234567 | number : 2}}</h2>
<!--是四舍五入-->
<h2>{{1234567.896 | number : 2}}</h2>
图片.png
时间格式转换
<h1>时间格式转换</h1>
<h2>{{1486538802000 | date : " yyyy-MM-dd "}}</h2>
图片.png
普通数组排序
<h1>普通数组排序</h1>
<!--默认排序是升序排序-->
<h2>{{ctrl.arr | orderBy}}</h2>
<!--降序设置order:true-->
<h2>{{ctrl.arr | orderBy:order : true}}</h2>
图片.png
那么，接下来就要对persons的数据进行条件过滤
<h1>过滤排序小功能</h1>
条件过滤:
<input type="text" ng-model="ctrl.queryFilter" />
条件排序:
<select ng-model="ctrl.orderType">
<option value="name">按照名字排序</option>
<option value="age">按照年龄排序</option>
</select>
数据展示:
<ul>
<!--filter表示过滤条件-->
<!--filter : ctrl.queryFilter意思是按照input输入框输入的值去过滤-->
<!--orderBy : ctrl.orderType意思是按照下拉框选的条件进行升序排序-->
<li ng-repeat="person in ctrl.persons | filter : ctrl.queryFilter | orderBy : ctrl.orderType">{{person.name}}===={{person.age}}</li>
</ul>
GIF.gif
2. 文档
有朝一日，你可能需要使用自定义过滤器，幸运的是，你看到了我写的简书，哈哈
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js" ></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<!--使用自定义过滤器-->
<h1>{{ctrl.str | filterNum}}</h1>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl',[function(){
var self = this;
self.str = "hello123 world456"
}])
//在这里自定义过滤器
//这个过滤器的功能是根据某个字符串，过滤这个字符串中的数字
.filter('filterNum',[function(){
//filterNum是过滤器的名字
//在这个匿名函数中，必须返回一个函数
//返回的这个函数才是要处理过滤的逻辑
return function (str) {
//str就是要处理的字符串
return str.replace(/([0-9])/g,"");
}
}])
</script>
</body>
</html>
那么原来hello123 world456的数字就会被过滤掉
图片.png
服务和依赖注入
angularJS中的服务指的是一些函数或对象，它们可以在整个应用中持有某些行为和状态。每个服务都只有一个实例，无论从应用中何处访问该服务，指向的都是同一个对象实例。
依赖注入（Dependency Injection，简称DI）是一种软件设计模式
- 非依赖注入
- 依赖注入
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainCtrl">
<h1>tab页面切换,实现tab页面之间数据共享</h1>
<input type="button" ng-click="mainCtrl.open('first');" value="First Page" />
<input type="button" ng-click="mainCtrl.open('second');" value="Second Page" />
<div ng-switch on="mainCtrl.tab">
<!--第一个tab页-->
<div ng-switch-when="first" ng-controller="SubCtrl as ctrl">
<h2>First Page</h2>
<ul>
<!--ctrl.list() 是获取数据的方法-->
<li ng-repeat="item in ctrl.list()">
{{item.id}} === {{item.label}}
</li>
</ul>
<!--添加数据的按钮-->
<input type="button" ng-click="ctrl.add();" value="添加数据" />
</div>
<!--第二个tab页-->
<div ng-switch-when="second" ng-controller="SubCtrl as ctrl">
<h2>Second Page</h2>
<ul>
<li ng-repeat="item in ctrl.list()">
{{item.id}} === {{item.label}}
</li>
</ul>
<!--添加数据的按钮-->
<input type="button" ng-click="ctrl.add();" value="添加数据" />
</div>
</div>
<script type="text/javascript">
angular.module('myApp',[])
.controller('MainCtrl',[function(){
var self = this;
//初始化显示第一个页面
self.tab = 'first';
//切换页面的方法
self.open = function (tab) {
self.tab = tab;
}
}])
//这个控制器依赖于ItemService这个服务，通过依赖注入方式引入
.controller('SubCtrl',['ItemService',function(ItemService){
var self = this;
//获取数据的方法(委托方法)
self.list = function () {
//真正获取数据的方法，服务器中获取数据
return ItemService.list()
}
//获取数据的方法
self.add = function () {
//真正获取数据的方法，服务器中获取数据
ItemService.add({
id : self.list().length + 1,
label : 'Item' + (self.list().length + 1)
})
}
}])
//创建一个服务，提供数据的服务
//第一个参数是服务的名字
.factory('ItemService',[function(){
//模拟后台获取的数据
var list = [
{ id : 1,label : 'Item1'},
{ id : 2,label : 'Item2'}
]
//返回一个对象，这个对象就是这个服务的实例对象（单例）
//以上的list属于私有变量，在其他控制器或者服务中无法直接使用
//访问到list，我们可以通过在服务的对象中，设置一些方法进行数据访问
return{
//获取数据的接口
list : function () {
return list;
},
//添加数据接口
add : function (item) {
list.push(item);
}
}
}])
</script>
</body>
</html>
GIF.gif
路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../lib/angular.min.js" ></script>
<script type="text/javascript" src="../lib/angular-route.js" ></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<a href="#/first">First Page</a>
<a href="#/second">Second Page</a>
<!-- ng-view来指定路由切换的容器 -->
<!-- 在整个应用中最好就只有这一个ng-view -->
<div ng-view>
</div>
<script type="text/javascript">
//ngRoute是路由的模块，需要在这里引入
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/first',{
template : '<h1>First Page</h1>'
})
.when('/second', {
template : '<h1>Second Page</h1>'
})
.otherwise({
//如果不符合上诉路由规则，就走这里
//redirectTo 重定向到 /first
redirectTo : '/first'
})
}])
.controller('MainCtrl', [function () {
}])
</script>
</body>
</html>
GIF.gif
2. 结束语
写了这么多，要是你能看完，那说明你这人太狠了，不能惹啊，哈哈！！！
