/*
angular
MVVM模式
M ：model
V ：view
VM ：ViewModel
模块
ng-app='' //html中调用模块
angular.module // js中声明模块
控制器
ng-controller='' //html中调用控制器
模块.controller('控制器名', ['依赖1',function(形参1,必须一一对应){ }]) //js声明控制器
指令
内置指令
ng-show/hide/if
ng-show/hide //原理 css: display
显示隐藏一段内容
ng-show: true 显示
ng-hide: true 隐藏
原理 css: display
ng-if: 操作节点
显示隐藏一段内容
ng-if: true 显示
ng-if: false 隐藏(移除节点)
如:<div ng-if='条件'></div>
ng-app ng-controller //也是内置指令
ng-class
改变元素类名:
1. html中: ng-class='变量a'
js中: $scope.a = 'active'
例： div ng-class='a' => div class="active"
2. ng-class='{情况1:'类1', 情况2:'类2'...}[表达式,数据]'
如 :选项卡, 轮播
关键代码
ng-class="{true:'active'}[now==$index]"
ng-style
改变样式
如: ng-style='{ CSS属性:值 }'
ng-repeat
通过遍历数组, 创建元素/节点
注意:
track by 序号($index, i.id...不重复)
[1,23,4] 不写track by 正常
[1,1, 2,2,2, 3,3,3] 不写track by 报错
ng-model
绑定表单中表单域value值/ textarea: html
替换原始表单中 name 属性
ng-src
ng-href
ng-bind
显示scope中的变量 ==> 类似于{{ }}
ng-bind与{{}}的区别?
{{}}会闪屏, 会显示出 {{a}}
解决办法:
额外加: ng-cloak
<p ng-cloak>{{a}}</p>
=> 换成 ng-bind
=> 路由中加入 resolve
ng-include(同php中 require)
引入其他html页面
ng-include="'资源路径'"
<div ng-include="'a.html'"></div>
自定义指令
将一段 html和js一起封装到指令中
js声明:
模块.directive('指令名', function(){
return {
配置对象：
templateUrl:'index-directive.html',
replace: true //默认是 false 注意: 如果设置为true, html模板只能有一个父节点,同时原标签的属性和类会继承到这个节点上
restrict：‘AECM’ //默认: AE 规定指令以何种方式 A:属性，E:元素，C: 类，M: 注释
scope：与外界交互的属性，默认: false，false: 直接引用父级中的变量
true: 复制父级中的变量, 当改变自身变量时, 断开与父级关系
scope{ a: '=属性名' } : 独立作用域
注释：{ 指令中变量名 : '=html中的属性名' a : '=b(驼峰)' }
将 html中的属性名对应的变量 双向绑定给 指令中变量名
如: <div b(烤串)='父级变量'>
指令中控制器的scope.a = 父级变量
compile：function(element,attrs){ } // $attrs与外部交互的对象之一
link：function(scope,element,attrs){
pre: function () {
console.log('link-pre')
},
post: function () {
console.log('link-post')
} } }
注意: compile 没有scope,
link和compile一起使用, link不执行
compile和 ngRepeat一起使用时,
a. 绑定事件无效, 动画无效
b. compile只执行一次, link出现几次指令, 就执行几次
执行顺序:
compile
controller
link: pre, post
})
html调用:
<div 作为属性的指令>
<作为标签的指令></作为标签的指令>
注意:
命名指令: js中声明 指令名时, 为驼峰模式, 到html调用时, 转为烤串模式
服务
内置服务
$http //与服务器进行数据交互 == ajax
.get(url,{ params:{get方式参数,}, cache:true }).success(fn).error(fn)
cache:true 可以缓存内容
.post(url,{ 参数 }).success（）//.post区别: 不用放入 params 中
.jsonp(url,{ 参数 }).success（）
原生js ajax 实现缓存
如: 发出之前进判断:
if(!templateCache[url]){
success:function(result){
templateCache[url] = result
}
}else{
return templateCache[url]
}
$scope
$watch //监听变量
var watcher = $watch('变量名', function( 新数值, 旧数值, scope ){ }, 是否深度监听)
取消监听
watcher();
$apply
手动扫描各个变量是否改变
实际调用的是 digest
$digest
脏数据检查
$emit
向上发送 $scope.$emit(主题, 数据)
//addEventListener('事件名', fn, true:冒泡 ,false:捕获)
$broadcast
向下广播 $scope.$broadcast(主题, 数据)
$on
接受发送/广播的消息 发布订阅模式
$scope.$on(主题，function（）{ })
$interval
间隔执行 var interId = $interval(fn, 时间ms)
取消间隔 $interval.cancel(interId)
$timeout
自定义服务
$q
deffer
resolve：{ 写在路由中，相当于初始化内容 }
return deffer.promise
将一段代码封装到服务中,减少控制器中的代码,与控制器中scope无关
.constant('resolveUrl', { //声明常量
PROVINCE_URL: '../../php/list_pro.php',
CITY_URL: '../../php/list_city.php',
TOWN_URL: '../../php/list_town.php'
})
1. factory('服务名', function(){
var 私有变量;
return {
方法1:function
数据1:数据
}
})
2. service('服务名', function(){
var 私有属性;
//构造函数
this.方法1 = fn;
this.属性1 = 数据;
})
3. provider('服务名',function(){
this.$get=function(){
return {服务内容}
}
})
4. provider('服务名',{
$get:function(){
return {服务内容}
}
})
路由
ngRoute 一级路由 基于 url
a href='#/url'
ng-view 将路由目标显示的位置
ui.router
多级路由 基于 state
ui-view 同 ng-view
ui-sref='状态' 同href
ui-sref-active='类名' //当前状态激活时, 显示的类
配置路由:
angular.module('routeApp', ['resolveApp', 'resolveTestApp', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
$urlRouterProvider.otherwise('/resolve'); //初始化开始的页面
$stateProvider
.state('resolve', {
url: '/resolve',
templateUrl: 'resolve-template.html',
controller: 'resolveCtrl',
resolve: { //进入 路由指向页面前, 需要执行的内容
gameList: function () {//自定义服务
var a = 'hello 红色预警';
return a;
},
gameListFromPHP: function ($http) {
return $http.get('../../php/game_roles.php');
}
}
})
stateProvider.state():配置参数
urlRouterProvider.otherwise('/状态')
路由实现原理:
pjax: history.pushstate + ajax
onpopstate 事件: 前进或后退时触发
过滤器
{{ 变量 | 过滤器名：条件 }}
自定义过滤器
模块.filter('名'，function(){
return function(参数){
代码
}
})
ngAnimate 动画
引入版本要一致
类名
.ng-hide-remove{ 样式 }
.ng-hide-remove-active{ 样式 }
.ng-hide-add{ 样式 }
.ng-hide-add-active{ 样式 }
<!--
JS
性能 减少操作在文档中的节点次数
先生成临时节点, 给临时节点添加子节点, 最后插入到 dom树(只进行一次插入操作)
document.createDocumentFragment();
使用 DocumentFragment 文档碎片作为临时节点进行操作
Think in Angular
生成节点
删除节点
ng-repeat='i in arr'
arr.push => html中自动生成一套节点
arr.splice/pop => html中自动删除对应数组的元素
*/