---恢复内容开始---
一、angular是什么
一款非常优秀的前端高级js框架，由谷歌团队负责开发
angular是通过新的属性和表达扩展了html
angular可以构建一个单一页面应用程序（spa:single page applications ），使我们做单页面应用更加容易。
angular自身有很多颠覆性特征，改变了前端的编码方式，简化了我们操作
传统网站
框架与库
无论是angular还是jquery都是用原生js封装的
库:对代码进行封装，调用封装的方法，简化操作 针对某一具体的领域提出的解决方案。
jquery针对dom操作的requery.js模块
框架：虽然也是调用封装方法，但是更多的框架会提供代码书写的规范，我们要按照规则去写代码框架会帮助我们事先相应的功能，针对整个行业提出的解决方案。
二、angular核心思想（write less do more）
其核心思想是通过指令扩展html，通过表达式绑定数据到html,angular不推崇dom操作，也就是说NG中几乎找不到任何的dom操作，一切操作以数据为中心，用数据驱动dom。
获取angular的方式
在官网上下载 通过cdn方式引入到页面中
三、angular 快速入门
+ 在使用了angular的页面，以ng-开头的属性，都可以称之为指令
+ ng-app
* 告诉angular它在页面中所要控制的范围
* 页面加载完成angular会自动在页面中查找这个指令
* 如果页面中没有这个指令,angular将不会启动
+ ng-model
* 实现双向数据绑定
+ ng-click
* 点击事件(和原生JS中的onclick事件作用一样)
+ ng-init
* 初始化数据
+ 表达式介绍
* {{}} 这种双大括号的形式称之为插值表达式
* 在表达式中可以写ng中的变量
* 可以显示字符串
* 在表达式中可以进行计算
* 可以在表达式中写三目运算符
angular模块化开发的好处
- 模块化开发带来的好处
+ 方便管理, 复用,后期维护方便
+ 解决代码冲突,方便多人协作开发
- 分析模块和控制器与页面之间的关系
- 定义模块的语法规则
- 定义模块时第二个参数加与不加的区别
+ 加第二个参数是创建模块
+ 不加第二个参数是获取模块
- 报错信息分析
+ Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
+ 'myApp' 这个模块是不可获取的！ 你要么拼写错误 要么忘了加在他 你要确保一个有效的模块 做为了第二个参数的依赖
angular中如何使用控制器
- 控制器的作用
+ 向页面中赋初始值
+ 向页面中展示数据
+ 代码分类
单页面应用程序介绍
单页面应用程序的特点
+ 整个网站由一个页面构成
+ 公共部分只加载一次
+ *利用Ajax局部刷新达到页面切换的目的*
+ 不会发生页面跳转白屏的现象
+ *锚点与页面对应*
angular中的路由
+ [官方说明文档](https://docs.angularjs.org/api/ngRoute)
+ 如何获取路由模块
* [通过CDN的方式引入到页面中](https://cdn.bootcss.com/angular.js/1.6.4/angular-route.min.js)
+ 在html页面中通过script标签的方式引入路由模块文件
+ 在应用主模块中依赖路由模块ngRoute
+ 配置路由
* 通过config方法注入$routeProvider
* 介绍配置中常用的参数
+ 路由和控制器的整合
+ 使用templateUrl方式载入模板需要在http环境下(本地file协议下不支持)
控制器中$scope不能改成其他名字，angular是根据形参的名字去传递实参
angular常用指令
指令分类：内置指令（普通指令，事件指令）自定义指令
- 普通指令
+ ng-repeat 遍历数据
```html
<body ng-app="myApp" ng-controller="demoCtrl">
<h4>遍历 一维数组</h4>
<ul>
<!--
ng-repeat 遍历数据 类似于for in 循环
in 是固定写法
in 后面加上要遍历的数据
item 是遍历的当前项(item这个词可以随意写)
这个指令可以加在任何标签上
-->
<li ng-repeat="item in data">
{{item}}
</li>
</ul>
<hr />
<h4>遍历 数组中混合对象</h4>
<p ng-repeat="item in person">{{item.name}} {{item.age}}</p>
<hr />
<h4>遍历 对象</h4>
<!--
key代表对象的键值
val代表对象键值对应的值
-->
<div ng-repeat="(key,val) in obj">
{{key}} {{val}}
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
angular.module('myApp',[])
.controller('demoCtrl',['$scope',function($scope){
// 一维数组
$scope.data = ['小明','小红','小黑','小琴'];
// 数组中混合对象(最常用的形式)
$scope.person = [
{name:'小明',age:18},
{name:'小红',age:28},
{name:'小红',age:28},
{name:'小黑',age:38},
{name:'小琴',age:48}
]
// 对象
$scope.obj = {
name:'小明',
age:35,
hobby : '吃饭'
}
}])
</script>
</body>
```
+ ng-repeat 补充
```html
<body ng-app="myApp" ng-controller="demoCtrl">
<!--
在遍历的过程中
$index : 遍历过程中的索引
$first : 布尔类型的值 当前是否是第一项 是返回true 不是返回false
$last : 布尔类型的值 当前是否是最后一项 是返回true 不是返回false
$middle : 布尔类型的值 第一项和最后一项返回false 其余返回true
$even : 偶数项返回true 否则返回false
$odd : 奇数项返回true 否则返回false
我们可以利用这些值在循环的过程中做各种判断 达到我们想要的目的
-->
<ul>
<li ng-repeat="item in person" class="{{$first ? 'first' : ''}} {{ $last ? 'last' : ''}}">
<p>名字：{{item.name}}</p>
<p>年龄：{{item.age}}</p>
<p>索引：{{$index}}</p>
<p>是否是第一项：{{$first}}</p>
<p>是否是最后一项：{{$last}}</p>
<p>是否是中间项：{{$middle}}</p>
<p>是否偶数项：{{$even}}</p>
<p>是否奇数项：{{$odd}}</p>
</li>
</ul>
<!--
默认情况下遍历的数组中不能有重复类型的值(基本数据类型) 否则会报错 信息如下
[ngRepeat:dupes] ng-repeat指令被愚弄(调戏)了
解决: 在遍历的数据后面写上track by 一个唯一(不重复)的值 一般会写$index
-->
<hr />
<div ng-repeat="item in data track by $index">
{{item}}
</div>
<hr />
<div ng-repeat="(key,val) in data track by key">
{{val}}
</div>
<hr />
<!-- 通过奇偶数做隔行变色 -->
<style>
.even{background:pink;}
.odd{background:lightblue;}
</style>
<ul>
<li ng-repeat="item in person" class="{{$even ? 'even' : 'odd'}}">
<p>名字：{{item.name}}</p>
<p>年龄：{{item.age}}</p>
<p>索引：{{$index}}</p>
<p>是否是第一项：{{$first}}</p>
<p>是否是最后一项：{{$last}}</p>
<p>是否是中间项：{{$middle}}</p>
<p>是否偶数项：{{$even}}</p>
<p>是否奇数项：{{$odd}}</p>
</li>
</ul>
<script src="node_modules/angular/angular.min.js"></script>
<script>
angular.module('myApp',[])
.controller('demoCtrl',['$scope',function($scope){
$scope.person = [
{name:'小明',age:18},
{name:'小红',age:28},
{name:'小红',age:28},
{name:'小黑',age:38},
{name:'小琴',age:48}
]
// 数组中存在重复的值
$scope.data = ['小明','小红','小明','小红'];
}])
</script>
</body>
```
+ 在循环的过程中如果有重复项 需要加上 track by $index
+ ng-class指令 用来操作类名
```html
<body ng-app="myApp" ng-controller="demoCtrl">
<style>
button {
width: 120px;
height: 40px;
border: none;
outline: none;
color: #FFF;
font-size: 16px;
}
.red {
background: red;
}
.green {
background: green;
}
</style>
<!--
ng-class指令：专门用来操作类名的
1.指令的值以对象的形式存在
2.对象的属性值转化为布尔值是true时,将当前的属性名作为类名添加到class属性中
3.对象的属性值转化为布尔值是false时,将当前的属性名从class属性中删除掉
4.属性值可以是数据模型,也可以是JS表达式
注意：angular不推崇DOM操作,在当前例子中并没有直接操作类名的JS语句,
而是通过数据模型isGreen的值是true还是false来确定添加哪个颜色的类名,
至于如何添加到class属性中,由angular替我们完成。
-->
<button ng-class="{'green':isGreen,'red':!isGreen}" ng-click="setColor()">按钮</button>
<script src="node_modules/angular/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('demoCtrl', ['$scope', function($scope) {
// isGreen用来控制当前按钮是绿色还是非绿色
$scope.isGreen = true;
// 用来切换按钮的颜色
$scope.setColor = function(){
// 让isGreen在每次点击按钮的时候跟当前值取反
// 也就是一次是true 一次是false
// 以达到切换颜色的目的
$scope.isGreen = !$scope.isGreen;
}
}])
</script>
</body>
```
+ ng-bind ng-bind-template ng-cloak 数据绑定 解决表达式闪烁问题
```html
<body ng-app="myApp" ng-controller="demoCtrl">
<!--
在angular没有被加载进页面之前,浏览器会将下面的
表达式当作普通字符串显示在页面中,angular在被加
载进页面之后,才会将下面的表达式替换成了对应的数
据,这样就会存在闪烁问题
-->
{{msg1}}
<!--
用指令ng-bind绑定数据解决这个问题
ng-bind指定是专门用来做数据绑定的
-->
<div ng-bind="msg1"></div>
<!--
除此之外,还有一个指令ng-cloak,也可以解决表达式闪烁的问题
angular会隐藏有ng-cloak指令或样式的元素,在做完解析之后又会
移除元素身上的ng-cloak样式和指令,从而解决表达式闪烁的问题
但是！angular在页面的最后才被引用进来,所以不能很好的解决这
个问题需要我们手动在页面顶部加上隐藏元素的样式
-->
<style>
.ng-cloak,[ng-cloak]{display:none;}
</style>
<div class="ng-cloak">
{{msg2}}
</div>
<div ng-cloak>
{{msg2}}
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
angular.module('myApp',[])
.controller('demoCtrl',['$scope',function($scope){
$scope.msg1 = '指令ng-bind解决表达式闪烁问题';
$scope.msg2 = '指令ng-cloak解决表达式闪烁问题';
}])
</script>
</body>
```
+ ng-non-bindable 不解析表达式
+ ng-show、ng-hide 通过样式的方式控制元素显示隐藏
```html
<body ng-app="myApp" ng-controller="demoCtrl">
<!--
ng-show ：控制元素显示隐藏(通样式的方式)
当值为true时 元素显示
当值为false时 元素隐藏
ng-hide ：控制元素显示隐藏(通样式的方式)
当值为true时 元素隐藏
当值为false时 元素显示
-->
<h3>例子1 当没有数据的时候显示 '暂无数据'</h3>
<ul>
<li ng-repeat="data in list">
<span>{{data.id}}</span>
<a href="#">{{data.title}}</a>
<div>
{{data.description}}
</div>
</li>
</ul>
<!--
当没有数据的时候显示 "暂无数据"
可以通过ng-show指令 如果存放数据的数组长度为0
也就是没有数据 表达式返回true 当前div显示
如果存放数据的数组不为0 表达式返回false 当前div隐藏
也可以用ng-hide="list.length" 达到相同效果(自行思考)
-->
<div ng-show="list.length == 0">暂无数据</div>
<a href="javascript:;" ng-click="resetData()">清空数据</a>
<hr />
<h3 ng-init="isToggle=true">例子2 选项卡切换</h3>
<button ng-click="isToggle=true">显示1</button>
<button ng-click="isToggle=false">显示2</button>
<div ng-show="isToggle">1</div>
<div ng-show="!isToggle">2</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
angular.module('myApp',[])
.controller('demoCtrl',['$scope',function($scope){
$scope.list = [
{
id:'1',
title:'有人在微信QQ上拉你搞投资？那都是骗子！',
description : '喜欢炒股的朋友或许经常在微信或者QQ收到各种“业务员”的推广，有的介绍老师给你，有的介绍私募给你，有的是亲自操刀上阵，通常情况下是在操作获利之后五五分成，在操作一段时间之后，“业务员”会告诉你最近股市不好做，不好赚钱，而“我们有新的业务”，可以快速地获得利润，再给你发一些高收益的截图。'
},
{
id:'2',
title:'女子被"男友"骗150万 相处3年不知对方系闺蜜假扮',
description : '时报讯 今年2月，杭州市滨江警方接到一起报警，报警人林芬（化名）称2014年至2017年间，自己被男友高鹏（化名）骗了共计150多万元。近日，民警抓获了该案嫌疑人，一看，这高鹏啊，不仅是个女的，还是林芬的闺蜜。'
}
]
// 删除数据方法
$scope.resetData = function(){
// 快速清空数组
$scope.list.length = 0;
// 也可以将数组重新复制为空数组
// $scope.list = [];
}
}])
</script>
</body>
```
+ ng-if 控制元素显示隐藏
* 和ng-show用法相同
* 区别是ng-if是通过DOM节点的添加和删除使得元素显示和隐藏
+ ng-switch、ng-switch-when
```html
<!--
ng-switch ng-switch-when 是一对指令类
似于JS中 switch case 语句
匹配到哪项 哪项就显示 其他项就隐藏
常用于 做多个选项卡的显示和隐藏
-->
<body ng-app ng-init="showNum=1">
<div ng-switch="showNum">
<button ng-click="showNum=1">显示1</button>
<button ng-click="showNum=2">显示2</button>
<button ng-click="showNum=3">显示3</button>
<div ng-switch-when="1">1</div>
<div ng-switch-when="2">2</div>
<div ng-switch-when="3">3</div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
</body>
```
+ ng-options 生成select下拉列表 需要配合ng-model指令使用 否则报错
```html
<body ng-app="myApp" ng-controller="demoCtrl">
<!--
ng-options ：生成下拉框列表 需要和ng-model指令配合使用
ball in balls 类似于ng-repeat
balls 是要进行循环的数据
in 固定写法
ball 是每次循环的当前项
ball.name for
for 固定写法
ball.name 将要显示在option标签内的值
ball.value as
as 固定写法
ball.value 将要显示在option标签value属性中的值
-->
<select ng-model="likeBall" ng-options="item.value as item.name for item in balls"></select>
{{likeBall}}
<script src="node_modules/angular/angular.min.js"></script>
<script>
angular.module('myApp',[])
.controller('demoCtrl',['$scope',function($scope){
// 给下拉列表设置默认值 和options标签value属性的值对应
$scope.likeBall = "001";
// 下拉列表的数据源
$scope.balls = [
{
name:'足球',
value:'001'
},
{
name:'篮球',
value:'002'
},
{
name:'橄榄球',
value:'003'
},
{
name:'排球',
value:'004'
},
{
name:'乒乓球',
value:'005'
}
];
}])
</script>
</body>
```
- 事件指令
+ ng-click
+ ng-dblclick
+ ng-blur
+ ng-focus
+ ng-change
- 其他指令
+ ng-href
+ ng-src
+ ng-value
四、mvc mvvm介绍
mvc思想源于后端
m model模型 数据和数据相关的方法（直接操作数据库的方法）
v view视图 用户界面
c controller控制器 网站的业务逻辑都写在控制器里面
对代码进行分类，便于管理
mvc思想并不完全适用于前端
mvc里面的控制器做的事情太多了 代码又变得冗余
mvvm思想
它并不是一个全新的思想 是对mnv思想的改进 升级
m model模型 数据和数据相关的方法 ajax请求
v view视图 用户界面
vm 它都是根据数据双向绑定有关系$scope
angular 就是基于mvvm这样的一个前端框架
五、angular中数据请求方式
- angular中提供了一些方法,我们可以用这些方法向后台发送请求,获取数据
- 语法：
+ 标准的请求方式(通过例子说明)
* $http()
+ 简化的请求方式(通过例子说明)
* $http.get()
* $http.post()
- [ng-bind-html](https://cdn.bootcss.com/angular.js/1.6.4/angular-sanitize.min.js)
六、angular中的过滤器
我们从后台请求的数据，有时候不是我们想要的格式 。
过滤器的概念：angular为我们提供的处理数据格式的方式
过滤器的分类：内置过滤器 自定义过滤器
- 使用过滤器的语法：
+ {{ 数据模型 | 过滤器的名字:过滤器的参数:多个参数以冒号隔开 }}
- 内置过滤器介绍
+ currency 货币过滤器
+ date 日期过滤器
+ filter 将数据按照某种规则进行过滤
* 模糊过滤
* 精确过滤
+ limitTo 限制
+ orderBy 排序
angular自身只是提供了一些常用的过滤器，在实际项目中，我们往往会遇到一些比较具体的需求，这是我们需要自定义过滤器
- 语法：
+ 如何定义自定义过滤器
```javascript
模块对象.filter('自定义过滤器名字',[function(){
return function(要处理的数据,滤过器参数1,滤过器参数2,...){
// 具体处理数据的代码
return 处理后的数据;
}
}])
```
以上是个人对angular学习的认识，大家有更好的知识欢迎留言，谢谢