1
1.认识AngularJS
MVx概念
Angular是什么
扩展了HTML的功能
颠覆性、可扩展
为什么使用angular
避免重复劳动，专心于业务逻辑
2.AngularJS基本使用
最简单的例子
ng-model
ng-bind
ng-app——范围、共存
Angular的特点
双向绑定——可输入、可输出
依赖注入
由接收方决定要什么——饭店的例子
ng-bind并不好
整个都得变
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-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
$http.get(url, {
params: json,
timeout: number,
responseType: ""/"text"/"json"/"blob"/...
cache: boolean
})
----------------------------------------------------
$http.get/post/header/put/delete...
promise引用方式、jsonp
success/error——直接出结果
实例：PC端小页面（新浪微博）
2
第一部分、基础知识
--------------------------基础知识--------------------------
1.AngularJS基础环境搭建
服务器配置
2.AngularJS程序基本结构
ng-app AngularJS接管的范围(子元素)
ng-model 数据模型(双向绑定)
ng-bind 输出
{{}} 模板(输出)
实例：文章预览
3.AngularJS表达式
{{表达式}}
*是NG自己的一套解析程序，不完全和JS一样
**ng和JS环境不互通(ng变量都是$scope的一部分)
数据初始化：ng-init="名字=值;名字=值;"
class和style的另一种写法
ng-class="arr"
ng-style="json"
判断写法
ng-if <xxx ng-if="条件"></xxx>
如：i==index、arr2.indexOf(v)!=-1
实例：下拉搜索框
三目 {{条件?成立:不成立}}
4.事件
ng-xxx
5.循环
ng-repeat="value in arr/json"
ng-repeat="(k,v) in arr/json"
实例：angular选项卡
内置下标：$index
ng-repeat和ng-click 用函数，而非表达式
核心：只关心数据；完全不关心UI的事
--------------------------应用知识--------------------------
1.控制器
作用：放置大段、核心程序
定义：
var app=angular.module("app名字", [依赖模块]);
app.controller("控制器名称", function (){
//控制器代码
});
使用：
<xxx ng-controller="名字">
...
</xxx>
2.$scope作用域对象
可添加、可获取
可监视：
$scope.$watch("名称", function (){
//变了干什么
}, 深度监视);
3.$http数据交互
$http.get(url, {params}).success(function (数据){}).error();
$http.post...
$http.jsonp(url, {params: {..., cb: 'JSON_CALLBACK'}}).success().error();
注意：在Angular方法之外修改数据，视图不会更新
实例：原生Ajax使用
实例：ajax留言板
实例：百度下拉提示
实例：定时器的使用
强制更新：$scope.$apply();
另一种方法：Angular定时器
var timer=$interval(fn, 时间);
var timer=$timeout(fn, 时间);
清除：
$interval.cancel(timer);
$timeout.cancel(timer);
实例：时钟
3
一、过滤器
使用过滤器
currency
date:"yyyy-MM-dd HH:mm:ss"
自定义过滤器：
app.filter('名字', function (){
return function (value, arg){};
});
{{value|名字:参数}}
实例：会计计数法
*适合对文本等数据进行简单处理，不适合放置过于复杂的功能(如获取数据等)
二、指令
指令(directive)：*自定义标签、自定义组件
例子1：最简单的directive
//定义
app.directive('名字', function (){
return {
restrict: 'E',
template: "<strong>aaa</strong>" //不一定有标签
};
});
<!--使用-->
<znstest></znstest>
<znstest/> 单标签也行，但最好别用
=============解析=============
restrict: 'E' 使用限制
E(Element) 元素型 <xxx></xxx>
A(Attribute) 属性型 <div xxx=""></div>
C(Class) Class型 <div class="xxx"></div>
M(coMment) 注释型 <!-- directive:xxx -->
*加上replace: true
**两边的空格是必须的
例子2：transclude(嵌入)
*将原始内容嵌入到新内容里面
restrict: 'E',
template: "aa <span ng-transclude></span> bbb",
transclude: true
ng-transclude：定位符，原始内容会出现在里面
<!--使用-->
<znstest>
<span>12+5</span>
</znstest>
例子3：directive、transclude和controller整合
//第一步
app.controller('cont1', function ($scope){
$scope.arr=[12, 5, 8, 99];
});
<ul>
<li ng-repeat="v in arr">{{v}}</li>
</ul>
//第二步
app.controller('cont1', function ($scope){
$scope.arr=[12, 5, 8, 99];
});
app.directive('znstest', function (){
return {
restrict: 'E',
template: "aa <span ng-transclude></span> bbb",
transclude: true
};
});
<ul>
<li ng-repeat="v in arr"><znstest>{{v}}</znstest></li>
</ul>
实例：收缩展开组件
实例：下拉列表组件
*适合做表现层的组件
三、AngularJS模块化技术
1.最简单的模块使用
定义模块：
var mod=angular.module(名称, [依赖模块]);
引用模块：
ng-app="名称"
2.向模块中添加东西
mod.controller(名称, function);
mod.filter(名称, function);
mod.directive(名称, function);
3.Controller继承
子Controller使用父Controller中的数据(父子关系体现在HTML中)
总结：
1.Controller
适合：数据的获取、整理、过滤
不适合：任何表现层功能
2.Filter
适合：简单的文本、数据输出前处理
不适合：数据交互、任何复杂的功能
3.Directive
适合：表现层的功能组件
不适合：数据相关操作
4.Module
组件，一个组件可以包含很多Controller、Filter和Directive；而一个程序又可以包含很多组件
四、自定义注入与通信
创建自定义依赖注入：
mod.factory(名称, function (){
return 注入项;
});
实例：返回数据-类似于json
*数据只保存一份，可以共享数据
实例：放回方法集
实例：返回函数-类似于$interval
controller间通信
1.父子级之间
注意：父子级scope直接修改，无法实现修改
2.自定义依赖注入(可以实现任意对象间通信)
3.消息机制
$scope.$emit('名称', 数据); 自己+父级
$scope.$broadcast('名称', 数据); 自己+子级
$scope.$on('名称', function (event, 数据){ 监听
})
创建依赖注入的3种方式：
1.最简单的-factory
mod.factory(名称, function (){
return 依赖项;
});
2.增强版-provider
mod.provider(名称, function (){
//初始化部分-执行1次
this.$get=function (){
return 依赖项;
};
});
3.创建版-service
mod.service(名称, function (){
this.xxx=xxx;
});
*类似于JS的构造函数
4.常量-constant
mod.constant(名字, 值);
5.变量-value
mod.value(名字, 值);
特殊的一种：decorator，修饰一个现成的依赖项(constant除外)
*不能修饰常量(不然怎么叫常量)
testMod.decorator('名称', function ($delegate){ //必须叫$delegate
$delegate.xxx
return $delegate; //新的返回出来
});
*随便修饰多少次都可以
区分：
1.constant和value只是个值，其中constant不能修改
2.factory最简单，provider可以配置，service是new出来的
五、路由、多视图
路由：
1.根据不同的URL，调用不同的代码；把数据直接放到#后面(hash)，当刷新页面时也能保存状态
2.特别适合App这种单页应用
1.引入Angular库和Route
<script src="angular.js"></script>
<script src="angular-route.js"></script>
2.创建模块
var app=angular.module('page1', ['ngRoute']);
*ngRoute是来自angular-route.js的模块，route就是通过这个实现的
3.配置app
app.config(function ($routeProvider){
$routeProvider提供路由相关配置功能
});
4.配置Route
$routeProvider
.when('地址1', {配置1})
.when('地址2', {配置2})
.when('地址3', {配置3});
5.添加插入点
<ng-view></ng-view>
Route配置说明：
template-HTML模板
例如：'<div>{{a}}</div>'
templateUrl-HTML模板地址
例如：'views/v2.html'
controller-route所依赖的控制器
例如：'userCont'
例子：最简单的路由使用
HTML部分：
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<div ng-controller="cont1">
<a href="#/user/">用户中心</a>
<a href="#/article/">文章管理</a>
<ng-view></ng-view>
</div>
JS部分：
var app=angular.module('page1', ['ngRoute']);
app.controller('cont1', function (){
}).controller('userCont', function ($scope){
$scope.a=12;
}).controller('artCont', function ($scope){
$scope.b=55;
});
//配置部分
app.config(function ($routeProvider){
$routeProvider
.when('/user/', {
templateUrl: 'views/v1.html',
controller: 'userCont',
})
.when('/article/', {
templateUrl: 'views/v2.html',
controller: 'artCont'
});
});
延迟加载：
resolve参数，用promise方式实现页面数据的延迟加载
resolve: {
delay: function($q) {
var delay=$q.defer();
setTimeout(function (){
delay.resolve(); //resolve执行
}, 3000);
return delay.promise;
}
}
Route事件
$routeChangeStart
$routeChangeSuccess
$routeChangeError
$scope.$on("$routeChangeStart",function(event,next,current){
});
Route参数
/user/?id=432223
$routeParams
模板的另一种写法
定义模板：
<script type="text/ng-template" id="v3.html">
模板内容...
</script>
使用模板-和文件一样：
.when('/blog/', {
templateUrl: 'v3.html',
controller: 'blogCont'
});
4
class两种写法
1.直接写 class="{{xxx}}"
2.数组 ng-class="arr"
style两种写法
1.直接写 style="{{xxx}}"
2.json ng-style="json"
ng-if="条件" 删除元素
ng-show="" 显示
ng-hide="" 隐藏
控制器——Controller
1.数据
ng-repeat、ng-事件、赋值 不能见面——用函数倒一下
$http.get(url, {params: {}}).success().error();
$http.post(url, {params: {}}).success().error();
$http.jsonp(url, {params: {}}).success().error();
5
1.Angular：UI自动更新
2.ng-app
3.ng-model——双向绑定
4.{{}}——输出
5.Controller
filter-过滤器
1.输出数据之前-处理一下
2.参数
自定义过滤器：
app.controller('名字', function (){
//controller的代码
});
app.filter('名字', function (){
//filter的代码
});
花了5块钱 -5
赚了100块钱 100
会计：
-5 -> (5)
+100 -> 100
filter_name:参数
app.xxxx('名字', function (){
干什么的代码
});
<span></span>
restrict
E Element 元素
A Attribute 属性
C Class 类
M Comment 注释
*必须加上replace
**必须两边空格
abc
<div abc=""></div>
replace:false <div abc=""><span>987654321</span></div>
replace:true <span>987654321</span>
指令：增强HTML的功能
最简单的——指令出现在哪儿，模板的内容就到哪儿
transclude-嵌入、包裹
1.transclude: true
2.占位符——原始内容
<ng-transclude></ng-transclude>
transclude：
1.标签 <ng-transclude></ng-transclude>
2.属性
指令
app.directive('名字', function (){
return {
restrict: E/A/C/M 标签/属性/class/注释
template: '插入的内容'
};
});
<xxx></xxx>
<div xxx></div>
<div class="xxx"></div>
replace:true
指令——自定义组件(重用)
1.创建一堆元素
2.重用
添加：controller、filter、directive
app.directive('名字', function (){
return {
restrict: 'AEC',
template: '插入的内容'
};
});
<名字>
<div 名字>
<div class="名字">
HTML里：中划线 my-close
JS里：驼峰命名 myClose
模块化：重用
1.按需加载、动态加载
2.封装、隔离
3.依赖
1.定义模块
var app=angular.module('名字', [依赖模块]);
app.controller
app.filter
app.directive
2.使用(调用)模块
<div ng-app="名字">
1.angular也有模块
模块身上有：Controller、Filter、Directive
2.angular模块依赖
module('名字', [依赖的模块])
3.使用模块
ng-app="名字"
angular.module('page1', ['commonFilter', 'commonDirective']);
angular.module('名字', [])
.controller()
.filter();
1.页面引用
ng-app="名字"
2.模块依赖
angular.module('名字2', ['名字']); //同名：后面的模块会覆盖前面的模块
$scope
$http
$interval
$timeout
自定义依赖注入——乱、多
创造依赖：
1.最简单——factory
app.xxx('name', function (){})
app.factory('sum', function (){
return 内容;
});
2.强大——provider
provider提供东西的
app.provider('name', function (){
this.$get=function (){
};
});
//factory：
app.factory()->1个
app.factory()->2个
//angular会：
var pro=new provider(); //
pro.$get()->1个
pro.$get()->2个
3.服务——service
factory——简单
app.factory(xx, function (){
return {...};
});
provider——强大：可配置的
app.provider(xx, function (){
this.$get=function (){
return {...};
};
});
service——类似于构造函数
app.service(xx, function (){
this....
});
4.constant——常量(不可装饰)
5.value——变量
修改依赖
*会修改原始的依赖，原来的依赖就变了
app.decorator('依赖的名字', function ($delegate){
$delegate 依赖项的东西
return 修改后的依赖;
});
1.创造依赖项
factory：简单
provider：可配置
service：类似构造函数
constant：常量-不可修饰
value：变量
2.修改现有的依赖
app.decorator(依赖的名字, function ($delegate){
$delegate——原始的依赖
return 修饰过的;
});
*所有依赖项只会创建一次——好事：依赖项的状态在不同的地方是共享的
数据共享——多个Controller之间
1.父子Controller
$scope能继承——复制了$scope
*不能叫同步，只是复制
消息机制(事件)：
$scope.$emit('名字', 数据); 触发：自己+父级，向上发送
$scope.$broadcast('名字', 数据); 触发：自己+子级，向下放松
$scope.$on('名字', 数据); 接收
2.无关Controller
用自定义依赖来存储数据
*factory、service、provider——创建的依赖只有一个
Router——多视图
*根据URL来切换视图
例子：用户信息+文章列表+文章详情页面+配置页面
引入Route
1.引入文件
<script src="js/angular-route.js"></script>
2.引入ngRoute模块
var app=angular.module('test', ["ngRoute"]);
Router：根据地址的不同会显示不同内容
1.引入文件
<script>
module('xx', ['ngRoute'])
2.配置route
app.config(function ($routeProvider){
$routeProvider.when(
'地址',
{配置信息}
);
});
template: ''
promise请求序列化
1.请求数据
2.过滤
3.展现
ajax('...', {success: function (){
for(var if...
ajax('...', function (){
xxxx
ajax
});
}});
promise.then().then().then();
Route：分离多视图、多Controller
1.引入
<script>
module('xxx', ['ngRoute'])
2.配置
app.config(function ($routeProvider){
$routeProvider
.when(
地址,
{
templateUrl: 'view地址',
controller: 'controller名字'
}
);
});
模板：
1.template
template: '模板HTML'
2.templateUrl
templateUrl: './views/xxx.html'
3.ng-template
<script type="text/ng-template" id="ID">
模板内容
</script>
templateUrl: 'ID'
controller
数据操作
filter
过滤：文字处理
directive
表现层的组件(选项卡、显示更多)
route
分离视图、控制器
Module
