Angular:
框架： 对程序员的限制高
库： jquery，bootstrap —— 使用灵活，对程序员的限制少
它是MVC框架 精确定义是MVVM框架 mv*
SPA (single page application) 移动端
MVC:
M: Model 模型——数据
V: View 视图
C: Controller 控制器
MVC 分离:
1.数据、逻辑、 表现层代码的分离
2.分工
**学好:它最核心的核心的东西就是数据
以前写JS:存在大量的重复劳动
window 事件 .....
Angular：避免了重复劳动，让程序员更加关注需求的本质和实现。
版本：
官网：https://angularjs.org/
混乱：
1.2 以下
1.3 以上 上课
2.x 没人用 angular2
3.x 消失
4.x 即将要出来
基本用法：
Angular指令：
以 ng 开头。
是否需要服务器环境——最好
oninput是input值改变的时候触发
1、ng-app
angular管辖的范围
2、ng-model
数据，数据模型—— 数据从哪来
3、ng-bind
数据绑定 —— 数据到哪去
4、表达式{{a}}
*Angular 和 原生的JS——不互通（事件、函数），可以解决。
5、ng-click
事件： ng-mouseover ....
* 只关注数据
6、ng-init
数据初始化
7、ng-repeat 循环
循环数组：
ng-repeat="item in arr"
{{item}} —— 数组中的每一项
循环JSON：
ng-repeat="(key,value) in json"
{{key}} —— json中的key
{{value}} —— json中的value
8、数组的索引： $index 获取本元素的索引
*在数组里，默认情况下不允许出现重复的数字 如果有重复的会报错
track by 重新指定数组中的key
以前:(key,value) in arr
现在:item in arr track by $index
9、过滤器 filter
currency : 货币的filter
参数： currency:'￥'
date:
date:'yyyy MM dd HH(hh) mm ss'
放 | 后面
Angular特性：
1).双向绑定
ng-bind: 不好 一开始清空内容
*Angular——接管了 UI
*Angular——扩展了html
Angular:
1、和原生的JS 是不互通 —— 可以得解决
2、和传统的开发方式完全不同——只要盯住数据，数据是核心
不互通：
1）函数不互通
Number 示例
2）变量不互通
全局变量示例
3）事件不互通
Angular:
1）双向绑定
2）依赖注入
Controller:
1）放代码
2）原生和angular之间的桥梁 —— 在controller中可以使用原生代码
*一个页面中，可以有多个模块
*在一个模块中，可以有多个控制器
*为什么不互通：因为angular的东西都在$scope身上。
控制器： Controller
1）定义模块
angular.module(模块名,所依赖的其它模块);
let mod = angular.module('mod1',[]);
2）引用模块
ng-app="模块名"
3）定义Controller
mod.controller('控制器名',回调函数($scope){
//控制器的代码
});
4）引用controller
ng-controller="ctr1"
*所有的数据都放在$scope
$scope ： 依赖项
交互:
1、文本框中输入图片地址，img标签加载图片 
过程：
浏览器看到img标签，试图去加载src里的图片文件
现在给的图片文件地址： {{a}}
—— 404 错
Angular 出来了 —— 开始干活： 它认识： {{a}}
—— 翻译成文本框中输入的真实的图片地址
解决方案：
ng-src
因为：浏览器不认识 ng-src
1、请求一个文本文件，内容显示到页面
发现问题：
jquery的ajax请求数据——正常
请求回来的数据放到 $scope.arr —— 正常
问题： 没有显示在页面
因为： angular 比较封闭，和其它框架、库配合不好。
2、angular提供了自己的做数据交互的方式：
$http —— 依赖项
依赖项： $scope $http
用法：
$http.get();
$http.post();
$http.jsonp();
$http.get('请求地址').then(成功的回调，失败的回调);
$http.get('a.txt').then(r=>{
//r 就是成功后的返回对象 ***r完整的angular http返回对象
// r.data 才是数据
},err=>{
//err 失败信息对象
});
ng-src
$http.get('接口/地址').then((r)=>{
r//完整的对象
//{data: Array[4], status: 200, config: Object, statusText: "OK"}
r.data
},(r)=>{
console.log(r)
})
3、Promise
回调函数 —— 恶梦 噩梦
2015年，ES6——Promise
1）用法——基本用法：
resolve: 成功
reject: 失败
let pro = new Promise((resolve,reject)=>{
$.ajax({
url:'',
dataType:'json',
success:r=>{
resolve(r);
}，
error:err=>{
reject(err);
}
});
});
pro.then(成功的回调，失败的回调);
pro.then((r)=>{
//r 成功后返回结果 ，处理成功的数据信息
},(err)=>{
//err 失败对象，处理失败信息
});
2）用法 —— 常规用法
Promise.all();
批量处理异步请求，统一处理成功的回调
Promise.all([
//请求1 的 Promise
//请求2 的 Promise
]).then(成功回调，失败回调);
全部成功才算成功，有一个失败就是整体失败。
Promise
1）基本用法，发一个请求
new Promise((resolve,reject)=>{
$.ajax({
url:
dataType:
success(r){
resolve(r);
},
error(err){
reject(err);
}
});
}).then((r)=>{
//成功了
},(e)=>{
//失败了
});
2）Promise.all()
Promise.all([
//发请求的Promise对象
new Promise(),
new Promise(),
....
]).then(r=>{
//以上数组中，指定的所有的请求，全部都成功，才是成功
},err=>{
//以上数组中，指定的所有的请求，只要有一个失败，就是失败
});
3）发现 jquery 的 $.ajax 返回值，返回一个Promise对象
Promise.all([
$.ajax({url:'1',dataType:'json'}),
$.ajax({url:'2',dataType:'json'}),
$.ajax({url:'3',dataType:'json'}),
]).then(r=>{
//r : 数组，多次请求返回结果的数组
//单独处理每次请求的结果
let [arr1,arr2,arr3] = r;
console.log(arr1); —— 第一个请求的返回值
...
},err=>{});
4）
Promise.race([
$.ajax(),
$.ajax()....
]).then(r=>{
r —— 以上所有的请求，最快的那个
},err=>{});
怎么知道一个变量发生了改变？
1.添加一个方法(set()) 设置变量的值 set 被调用时候 比较一下
2.一般脏检查，将对象复制一份快照，在某个时间 比较现在对象与快照的值
如果不一样就表明发生变化 这个策略要保留两份变量 而且要遍历对象
比较属性 这样会有 一定性能问题
3.它的策略
1.不会脏检查所有对象 当对象被绑定到html中 这个对象添加为检查对象
2.不会脏检查所有的属性，同样当属性被绑定后 这个属性会被列为检查的属性
在它初始化时 会将绑定的对象的属性添加为监听对象 也就是说一个对象绑定N个属性
就会添加N个watcher (意思是 绑定一个name属性 然后n个地方用 就会添加n个watcher)；
什么时候去脏检查
angular所系统的方法中都会触发比较事件
比如：controller初始化的时候 所有ng-开头的事件执行后 都会触发脏检查
不要在conroller中做以下事情
1.不要在controller中做DOM操作 大大影响了应用逻辑的可测试性 可以把表现逻辑抽取到directive(指令中)；
2.输入格式化 使用angular form controls代替 (去看)
3.输出格式化 使用angular filter 代替
4.执行无状态或者有状态的、controller共享的代码 angular service(去看)代替
在Angular 中使用 Promise:
1、angular中，使用原生的 Promise，出问题了
在then里处理数据的时候，$scope.nums = arr1 生效，但是页面无法使用
2、angular 自己提供了一个 Promise，
新的依赖项： $q
jQuery Ajax另几种写法：
1、$.get('data/a.txt',{a:1},r=>{
console.log(typeof r);
});
返回值是string类型
2、$.post('data/a.txt',{a:1},r=>{
console.log(typeof r);
});
返回值是string类型
3、$.getJSON().....
返回值是 json 对象
Angular和其它库或原生的很多东西不通用：
1） $.ajax jquery
2） Promise 原生 $q
3）定时器
原理：因为函数，在Angular中，它认为所有的东西都应该出现在自己的controller函数里，
对于其它地方回调函数里的值的处理，不认
定时器：
$interval
$timeout
解决以上问题的另外一个方法：
$scope.$apply();
——通俗地说： 告诉、通知 Angular ， 来看一下数据是不是变了
一、模块化
Angular中的模块化 —— 比较弱
let mod = angular.module('mod',[]);
例1：
1） 在一个新的JS文件里定义了一个模块
let mod1 = angular.module('mod1',[]);
mod1.controller('mod1_ctr1',($scope)=>{
$scope.a = 200;
});
2）在我的html文件中，自身的模块依赖于以上定义的模块： mod1
3）在html文件中，可以同时使用自己的controlloer和模块中的controller：mod1_ctr1
二、依赖注入
把决定权交给消费者。
函数参数：由调用者来决定 —— 被动的地位
function show(a,b){
alert(arguments.length);
}
Angular：函数的拯救者
let mod = .....;
mod.controller('ctr1',($scope,$q)=>{
$scope.a=12;
});
想用谁，就把谁注入到函数。
三、过滤器
系统的过滤器： date currency
time|date:'yyyy-MM-dd'
price|currency —— $
|currency:'￥' —— ￥
要求：
给定一个数字，显示一下是中文的星期几。
let n = 3;
{{n|cnDay}} —— 星期三
自定义过滤器：
angular.module('app',[])
.filter('cnDay',function(){
return function(input){
//input 就是要处理的输入的数据
//输入的数据——要对谁使用这个过滤器
//对input进行处理
return '返回值——就是最终要使用的内容';
};
});
四、自定义指令
指令： ng-bind ng-model....
以ng-开头的都是系统提供的指令
自定义一个指令：hehe-haha
angular.module('myapp',[])
.directive('heheHaha',()=>{
return {
template:'<span>欢迎你</span>'
};
})
指令名称：
驼峰命名法： 第一个字母小写，以后每个单词首字母大写
限制选项：restrict —— 默认值 A E
restrict：字符串
A: Attribute 属性
E: Element 元素
C: Class 类，样式中的class
M: coMment 注释 ： 需要配合 replace:true
***M的时候 两边要留空格
自定义指令中常用的几个选项：
template： 输出的模板
restrict: 限制、约束
ECMA
replace: 默认是false，
设置true，替换原有的标签
网友评论