1.认识AngularJS
MVx——数据、表现分离
angular确切的说是一个mvvm的库，也属于mvc
mvc:三层模式，三层架构，三层模型
m module 模型 --- 数据
v view 视图 --- 表现层，展示数据
c controller 控制器 ---业务逻辑，从m里拿数据，到v里面展示
Angular是什么？
扩展了HTML的功能
颠覆性、可扩展
为什么使用angular？
避免重复劳动，专心于业务逻辑
2.AngularJS基本使用
两个词重点：
双向绑定：
依赖注入：
函数——参数由调用方决定
依赖注入——参数由定义方决定
最简单的例子
ng-model
ng-bind
ng-app——范围、共存
Angular的特点
双向绑定——可输入、可输出
依赖注入
由接收方决定要什么——饭店的例子
ng-bind并不好
整个都得变
使用AngularJS的两个重点：
1.angular和JavaScript不互通
不互通：
------函数不互通
------变量也不互通
------事件也不互通
2.Angular的开发模式和传统开发模式完全不同——只需要盯住数据
------数据是核心
3.模板技术
{{}}
可以修改，一般不用
angular和JS不互通
变量不互通、函数不互通、事件不互通
事件
onclick不行
ng-click
重复：angular必须用ng-的这一套
如果想要angular和JS互通，需要Controller——后面说
ng-init初始化数据
ng-repeat循环
value、(key,value)
数组、json
嵌套数据
不适合放太复杂的数据
4.Controller
什么是Controller
控制器——业务逻辑都应该写在这里（HTML里就不应该出现大段代码，这和过去一致）
Controller用法1：放数据
$scope——只能叫这个名字
原因：依赖注入
Controller用法2：放函数
桥梁
依赖注入的两种方式
写名字——不能乱写
app.controller(name, function ($1, $2){});
数组
app.controller(name, ['$1', '$2', function (a, b){}]);
过滤器-filter
例子：item.price | currency 货币
例子：item.time | date:"yyyy-MM-dd HH:mm:ss" 日期
过滤、转换
链接、图片
ng-src：ng-src 指令覆盖了 <img> 元素的 src 属性。
如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。
ng-src 指令确保的 AngularJS 代码执行前不显示图片
ng-href
其他常用指令：ng-show、ng-hide、ng-clack
5.常用依赖项
$scope
$location
$location.absUrl() 整个绝对路径
$location.url() path部分
$location.protocol() 协议部分-http
$location.host() 域名(不含端口)
$location.port() 端口
----------------------------------------------------
$location.search() => {xx, xx}
$location.search('a') => {a: xxx}
$location.search('a', 'b') => {a: xxx, b: xxx}
6.ajax数据交互——$http
方法一：
$http.get(url, {}).then(succ, error);
返回res：data
eg：
app.controller('cont1', function ($scope, $http){
//$http.get(url, 参数);
//$http.post();
//a.php?a=xxx&b=xxx =>
$http.get('a.php', {
params: {a: 12, b: 5},
/*返回类型转换*/
responseType: 'json'
}).then(function (res){
alert(typeof res.data);
}, function (){
alert('失败了');
});
方法二：
$http.get(url, {
params: json,
timeout: number,
responseType: ""/"text"/"json"/"blob"/...
cache: boolean
})
----------------------------------------------------
$http.get/post/header/put/delete...
promise引用方式、jsonp
success/error——直接出结果
$http.get(url, {params: {}}).success().error();
$http.post(url, {params: {}}).success().error();
$http.jsonp(url, {params: {}}).success().error();