angular MVC框架具有模型,控制器,视图三者构成,具有双向数据绑定的特点,较传统dom相比减少操作DOM元素,具有一个些ng为前缀的方法,例如ng-if ,ng-repeat,ng-show,ng-hide,ng-click,ng-disabled,ng-class等,也可以自己定义指令(directive),方法(factory),亦可定义模板template,以下代码为demo,以供大家共同参考学习
1.demo1
<!DOCTYPE html>
<html ng-app="directiveModule">
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller='test'>
用户名:<input type="text" ng-model='name'>
<p say-hello name-attr="name" >{{name}}</p>
<!-- <say-hello>{{name}}</say-hello> -->
<!-- <say-hello name-attr="name"></say-hello> -->
<!-- <say-hello click-myFun></say-hello> -->
</div>
</body>
<script>
var app=angular.module('directiveModule',[]);
app.controller('test',function($scope){
// $scope.name='smith';
});
//@建立基于属性的绑定
//=建立双向数据绑定
//&调用父作用域中的方法
app.directive('sayHello',function(){
return {
restrict:'AE',
scope:{
name:'=nameAttr',
clickMyFun:'&clickMyFun'
},
link:function(scope,elem,attrs){
scope.name='shi';
scope.clickMyFun=function(){
console.log('测试我的函数');
}
},
transclude:true,
template:'<h3>hello ,{{name}}</h3><button ng-click="clickMyFun()">clickMyFun!</button><h1>hi <span ng-transclude></span>,welcome to you</h1>'
}
})
</script>
</html>
2.demo2
<!DOCTYPE html>
<html ng-app="directiveModule">
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller='test'>
<repeat-element style='color:red;' my-color='myColor'
<p>hi {{name}},welcome to you~~~~</p>
<repeat-element>
</div>
</body>
<script>
var app=angular.module('directiveModule',[]);
app.controller('test',function($scope){
$scope.name='shi';
});
app.directive('repeatElement',function(){
return {
restrict:'E',
transclude:true,
link:function(scope,elem,attrs,ctrl,transcludeFn){
for(var i=0;i<5;i++){
transcludeFn(function(clone){
elem.append(clone)
})
}
},
template:'<span ng-transclude></span>'
}
})
</script>
</html>
补:
1.angular,$watch 监听,unwatch()解除监听
2.setTimeout方法更新数据模型,angular无法触发 digest循环,需要手动调用 d i g e s t 循 环 , 需 要 手 动 调 用 apply(),或者使用$timeout
3.父作用域往子作用域 broadcast,子作用域往父作用域发用 b r o a d c a s t , 子 作 用 域 往 父 作 用 域 发 用 emit,接收用$on
4.$routeProvider 对象用于创建路由映射 .when .otherwise 把控制器,视图,url关联
5.url向控制器传参,直接在.when中/:orderId ,controller中使用$routeParam.orderId获取参数
6.ng-include 引入一段html,
7.$location.path(‘/view’)进行视图切换
8.ui-router 根据当前状态改变路由,.state方式实现,使用场景:出现嵌套层级子视图,html中使用ui-self指定定义的状态名进行跳转
9.自定义service
var app=angular.module('myApp',[]);
app.service('myService',function($interval){
this.outputMsg=function(){
var i=0;
$interval(function(){
i++
console.log(i);
},1000)
}
})
app.controller('test',function($scope,myService){
myService.outputMsg();
});
10.factory 和service类似,service方法调用了factory,同样注入到controller中,但是factory是return 的对象
var app=angular.module('myApp',[]);
app.factory('myService',function(){
return {
sayHello:function(){
alert('hello');
}
}
})
app.controller('test',function($scope,myService){
myService.sayHello();
});
11.angular animate 动画,angular cookie
12.promise,
http,
h
t
t
p
,
resource
13.模块:angular-file-upload,ngFile Upload,Flow.js,ngUpload
14.videogular模块实现视频播放器
15.angular Masonry实现照片墙
16.ngDialog实现对话框