angular中的模块化
//定义模块 []为依赖的模块 moduleName可以使用[]模块中定义的controller filter ..
var app=angular.module('moduleName',['moduleName1','moduleName2','commonFilter','commonDirective'])
ng-app="moduleName" //使用模块
MV* 数据和表现分离的模式
M-Model 数据
V-View 视图
C-Controller 控制层（业务逻辑）
1.angular和javascript不互通（标签里）,controller是桥梁里面可以写原生js
不互通：
一、函数不互通
eg->
//parseInt不行
<input type="text" ng-model="a"/>
<span>{{parsetInt(a)}}</span>
二、变量不互通
eg->
//访问不到b
<script>
var b=10;
</script>
</head>
<body>
<input type="text" ng-model="a"/>
<span>{{a*b}}</span>
三、事件也不互通
eg->
//onclick事件 alert函数都不行
<input type="text" ng-model="a"/>
<button onclick="alert(a)">按钮</button>
//+= ++ 等普通js里的在angular里都不行
<input type="text" ng-model="a"/>
<button ng-click="a=a+=1">按钮</button>
2.angular的开发模式和传统开发模式完全不同，只需要关注数据
3.ng-clack 在模板的值还没出现之前先隐藏模板
4.anagulr里的ajax数据请求
var test=angular.module('test',[]);
test.controller('ctrl1',function($scope,$http){
//这种写法,res是整个响应对象，数据在data里
$http.get('data.json',{
"params":{"height":175},//提交的数据
responseType:"json" //解析数据为json
}).then(function(res){ //返回的数据是字符串
console.info(res.data.age+7+"成功了！")
},function(){
console.info(res.data+"失败了！")
});
//这种写法 res就是数据
$http.get('data.json',{ "params":{"height":175}}).success(function(res){
console.info(res.age+7+"成功了！")
}).error(function(){
console.info(res.data+"失败了！")
})
})
5.ng-class和ng-style的写法
class={{}}
ng-class=arr
<div ng-init='arr=["aa","bb"];class2="cc"'>
<span ng-class="arr">1212</span>
<span class="{{class2}}">1212</span>
</div>
style={{}}
ng-style=json
<div ng-init='str={"color":"red"};str2="color:green"'>
<span ng-style="str">1212</span>
<span style="{{str2}}">1212</span>
</div>
6.ng-事件 ng-repeat 赋值不能同时出现（不能写成表达式），需要通过controller里定义函数过渡一下
<div ng-init="arr=[1,2,3,4,5];a=0">
{{a}}
<button ng-click="a=5">按钮</button>
//点击不起作用
<button ng-repeat="item in arr" ng-click="a=5">按钮{{$index}}</button>
</div>
<script>
var test=angular.module('test',[]);
test.controller('ctrl1',function($scope,$http){
$scope.changeVal=function(index){
$scope.a=index;
}
})
</script>
<body ng-controller="ctrl1">
<div ng-init="arr=[1,2,3,4,5];a=0">
{{a}}
//这样就可以，通过changeVal函数桥梁中转
<button ng-repeat="item in arr" ng-click="changeVal($index)">按钮{{$index}}</button>
</div>
</body>
7.$watch监控
$scope.num=10;
$scope.arr=[1,2,3];
//监控
$scope.$watch("num",function(){
alert("监控内容发生变化！");
})
//深度监控，监控内容
$scope.$watch("arr",function(){
alert("监控内容发生变化！");
},true)
8.$apply $interval $timeout
不用angular自带的$http模块请求数据，可会发生数据不更新的问题
用原生js的setInterval setTimeout也会发生这个问题
//原生的会出现问题,需要强制更新才行
$scope.num=0;
setInterval(function(){
$scope.num++;
//强制更新
$scope.$apply();
});
//用angular自带的模块
$scope.num=0;
var timer=$interval(function(){
$scope.num++;
if($scope.num==100){
$interval.cancel(timer); //ag里的关闭定时器
}
})
9.angular里jsonp的使用
$scope.search="";
$scope.results=[];
$scope.$watch("search",function(){
$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
params:{'wd':$scope.search,"cb":"JSON_CALLBACK"}
}).success(function(rps){
$scope.results=rps.s;
console.info( $scope.results)
}).error(function(){
alert("出错了！");
})
});
10.angaulr过滤器的写法
test.filter("toUpperCase",function(){
//只执行一次
//可以写一些初始化操作
return function(input,args){//第二个参数是过滤器的参数
//过滤器用几次执行几次
return input.toUpperCase()+args;
}
});
<span ng-repeat="item in results">{{item|toUpperCase:'改成大写了！'}}</span>
11.指令(组件)
//restrict值有ECMA 方便记 E->element元素 C->class类 M->comment注释 A->attribute属性
test.directive("aa",function(){
var config={
restrict:"E",//约束（指令激活的条件）,可以一次写多个
template:"<span>123</span>"
};
return config;
})
test.directive("bb",function(){
var config={
restrict:"A",//约束（指令激活的条件）
template:"<span>123</span>"
};
return config;
})
test.directive("cc",function(){
var config={
restrict:"M",//约束（指令激活的条件）
template:"<span>123</span>",
replace:true//注释指令比较特殊有这个值
};
return config;
})
test.directive("dd",function(){
var config={
restrict:"C",//约束（指令激活的条件）
template:"<span>123</span>"
};
return config;
})
<aa></aa>
<span bb=""></span>
<!-- directive: cc --> //两边有空格
<span class="dd"></span>
//嵌入
test.directive("ff",function(){
var config={
restrict:"A",//约束（指令激活的条件）
//transclude可以是标签来激活占位<ng-transclude></ng-transclude>占位符(原始内容)
template:"<ng-transclude></ng-transclude><a href='javascript:;'>X</a>",
//transclude也可是属性来激活
//template:"<span ng-transclude=""></span><a href='javascript:;'>X</a>",
transclude:true//打开嵌入模式
};
return config;
});
<span ff="">11223343</span>
test.directive("more",function(){
var config={
restrict:"E",//约束（指令激活的条件）
//<ng-transclude></ng-transclude>占位符(原始内容)
template:'<div class="{{show?\'more2\':\'more\'}}">' +
"<a href='javascript:;' ng-click='show=!show'>{{show?'收起内容':'查看更多'}}</a><ng-transclude></ng-transclude>" +
"</div>",
transclude:true//打开嵌入模式
};
return config;
})
12.自定义依赖注入（所有的依赖项只会创建一次）
var test=angular.module('test',[]);
test.controller('ctrl1',function(testFactory,testProvider,testService,testConstant,testValue){
alert(testFactory(10,20));
alert(testProvider.name);
alert(testService.petName);
alert(testConstant);
alert(testValue);
});
//1.factory
test.factory('testFactory',function(){
//return '内容(字符串、json、函数..)'
return function(num1,num2){
return num1+num2
}
});
//2.provider
//专门给外面提供东西的
test.provider('testProvider',function(){
this.$get=function(){
return {
"name":"qiezijiucai"
}
}
});
//3.service 服务
test.service('testService',function(){
this.petName='leyi';
});
//4.constant 常量
test.constant('testConstant','red');
//5.value
test.value('testValue','hello');
13.修饰decorator
//修饰(继承)，会修改原始的依赖testService $delegate指向原来的依赖项testService
test.decorator('testService',function($delegate){
$delegate.petName='new-leyi';
return $delegate;
})
13.controller间的通信-父子controller继承
//父子controller 子级继承父级的值（只是子级在创建的时候复制了一遍父级的值），当子级修改值，父controller的值不变，父子值不同步
test.controller('parentCtrl',function($scope,$timeout){
$scope.num=10;
$timeout(function(){
console.info( $scope.num);//10
},100);
});
test.controller('childCtrl',function($scope){
$scope.num++; //11
});
<div ng-controller="parentCtrl">
{{name}}
<div ng-controller="childCtrl">
{{name}}
</div>
</div>
14.controller间的通信-父子级controller 消息机制
$scope.$emit('name','value');向父级controller和自己发送数据
$scope.$broadcast('name','value');向子级controller和自己发送数据
$scope.$on('name',function(event,data){
console.info(data); //接受数据
})
test.controller('parentCtrl',function($scope){
$scope.toChildAndSelf=function(){
$scope.$broadcast('value',100);//给子级发送数据
};
$scope.$on('value',function(v,data){
$scope.hello=data;//自己接收数据
});
$scope.$on('value2',function(v,data){
$scope.world=data;//自己接收数据
});
});
test.controller('childCtrl',function($scope){
$scope.toParentAndSelf=function(){
$scope.$emit('value2',200)
};
$scope.$on('value',function(v,data){
$scope.hello=data;
});
$scope.$on('value2',function(v,data){
$scope.world=data;
});
});
<button ng-click="toChildAndSelf()">给自己和子级发送数据</button>
{{hello}}
{{world}}
<div ng-controller="childCtrl">
<button ng-click="toParentAndSelf()">给自己和父级发送数据</button>
{{hello}}
{{world}}
</div>
15.controller间的通信-通过自定义依赖项 无关的controller的数据共享
factory service provider
test.provider('dataShare',function(){
this.$get=function(){
return {
"name":"jicaiqiezi"
}
}
});
test.controller('parentCtrl',function($scope,dataShare){
console.info(dataShare.name)
});
test.controller('childCtrl',function($scope,dataShare){
});
浙公网安备 33010602011771号