angularjs ngSanitize ngRoute ngAnimate 插件
2015-11-05 16:48
513 查看
angularjs ngSanitize ngRoute ngAnimate 插件
学习要点：
1. Angularjs 中的 ngSanitize
2. Angularjs 中的 ngRoute
3. Angularjs 中的 ngAnimate
1． Angularjs 中的 ngSanitize
让浏览器简析 html 标签
1. 引入 js angular-sanitize.min.js
2. 在 module 中引入一下插件 var app = angular.module("myApp", ['ngSanitize']);
3. 使用<div ng-bind-html="text"></div> 绑定数据
2． Angularjs 中的 ngRoute
AngularJS 路由介绍：
AngularJS 路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。
后台路由，通过不同的 URL 会路由到不同的控制器上(controller)，再渲染(render)
到页面(HTML)。 AngularJS 的前端路由，需求提前对指定的(ng-app)，定义路由规
则(routeProvider)，然后通过不同的 URL，告诉(ng-app)加载哪个页面(HTML)，再
渲染到(ng-app)视图(ng-view)中。
AngularJS 的前端路由，虽然 URL 输入不一样，页面展示不一样，其实完成的单
页(ng-app)视图(ng-view)的局部刷新。这样来看， AngularJS 做单页应用就有点标
配的感觉了。
AngularJS 路由使用：
引入 js 依赖注入
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/aaa/:num',{
template : '<p>首页的内容</p>`name`', //templateUrl
controller : 'Aaa'
})
.when('/ccc',{
template : '<p>课程的内容</p>`name`',
controller : 'Ccc'
})
.otherwise({
redirectTo : '/aaa'
});
}]);
数据显示:
<div ng-view></div>
$routeParams 获取参数
路由事件:
$on
$routeChangeStart
$routeChangeSuccess/Error
m1.run(['$rootScope',function($rootScope){
$rootScope.$on('$routeChangeStart',function(event,current,pre){
console.log(event);
console.log(current);
console.log(pre);
});
}]);
页面跳转:
1.$location.path('aaa/123')
2.<a href=”#div1”></a>
[b]ionic 路由插件
https://github.com/angular-ui/ui-router[/b]
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/aaa/:num',{
template : '<p>首页的内容</p>`name`',
controller : 'Aaa'
})
.when('/bbb',{
template : '<p>学员的内容</p>`name`',
controller : 'Bbb'
})
.when('/ccc',{
template : '<p>课程的内容</p>`name`',
controller : 'Ccc'
})
.otherwise({
redirectTo : '/aaa'
});
}]);
m1.run(['$rootScope',function($rootScope){
$rootScope.$on('$routeChangeStart',function(event,current,pre){
console.log(event);
console.log(current);
console.log(pre);
});
}]);
m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$r
outeParams){
$scope.name = 'hello';
$scope.$location = $location;
console.log( $routeParams );
}]);
m1.controller('Bbb',['$scope',function($scope){
$scope.name = 'hi';
}]);
m1.controller('Ccc',['$scope',function($scope){
$scope.name = '你好';
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<a href="" ng-click="$location.path('aaa/123')">首页</a>
<a href="" ng-click="$location.path('bbb')">学员</a>
<a href="" ng-click="$location.path('aaa/456')">课程</a>
<div ng-view></div>
</div>
</body>
</html>
[b]3． Angularjs 中的 ngAnimate
[/b]
[b][b]1. 引入 js
<script
src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>
2. var m1 = angular.module('myApp',['ngAnimate']);
3. 使用下面的几种方式
[/b][/b]
[b]使用说明：
当我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接
会将一个试图滑出，同时将另一个试图滑入。 就会用到 [b]ngAnimate
1. 使用 ngRoute 来为我们的页面路由
2. 使用 ngAnimate 来为页面创建动画效果
[/b][/b]
[b]3. 对页面使用 CSS Animations
4. 当我们离开或进入试图时，我们的每一个页面会有不同的动画效果
[b]ngAnimate CSS3 的方式（ 1）：
ng-enter
ng-enter-active
ng-leave
ng-leave-active
支持的指令
if,view,repeat,include,swtich
repeat： ng-enter-stagger animation-delay
ngAnimate CSS3 的方式（ 2）：
[/b][/b]
[b]ng-hide-add
ng-hide-add-active
ng-hide-remove
ng-hide-remove-active
[/b]
[b]支持的指令
class,show,hide,model 等
[b]ngAnimate JS 方式
animation()
enter/leave
removeClass/addClass
[/b][/b]
[b]m1.animation('.box',function(){
return {
addClass : function(element,sClass,done){
//console.log(element);
//console.log(sClass);
//console.log(done);
$(element).animate({width:0,height:0},1000,done);
},
removeClass : function(element,sClass,done){
$(element).css({width:0,height:0});
$(element).animate({width:200,height:200},1000,done);
}
};
});
[/b]
[b]
[/b]
学习要点：
1. Angularjs 中的 ngSanitize
2. Angularjs 中的 ngRoute
3. Angularjs 中的 ngAnimate
1． Angularjs 中的 ngSanitize
让浏览器简析 html 标签
1. 引入 js angular-sanitize.min.js
2. 在 module 中引入一下插件 var app = angular.module("myApp", ['ngSanitize']);
3. 使用<div ng-bind-html="text"></div> 绑定数据
2． Angularjs 中的 ngRoute
AngularJS 路由介绍：
AngularJS 路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。
后台路由，通过不同的 URL 会路由到不同的控制器上(controller)，再渲染(render)
到页面(HTML)。 AngularJS 的前端路由，需求提前对指定的(ng-app)，定义路由规
则(routeProvider)，然后通过不同的 URL，告诉(ng-app)加载哪个页面(HTML)，再
渲染到(ng-app)视图(ng-view)中。
AngularJS 的前端路由，虽然 URL 输入不一样，页面展示不一样，其实完成的单
页(ng-app)视图(ng-view)的局部刷新。这样来看， AngularJS 做单页应用就有点标
配的感觉了。
AngularJS 路由使用：
引入 js 依赖注入
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/aaa/:num',{
template : '<p>首页的内容</p>`name`', //templateUrl
controller : 'Aaa'
})
.when('/ccc',{
template : '<p>课程的内容</p>`name`',
controller : 'Ccc'
})
.otherwise({
redirectTo : '/aaa'
});
}]);
数据显示:
<div ng-view></div>
$routeParams 获取参数
路由事件:
$on
$routeChangeStart
$routeChangeSuccess/Error
m1.run(['$rootScope',function($rootScope){
$rootScope.$on('$routeChangeStart',function(event,current,pre){
console.log(event);
console.log(current);
console.log(pre);
});
}]);
页面跳转:
1.$location.path('aaa/123')
2.<a href=”#div1”></a>
[b]ionic 路由插件
https://github.com/angular-ui/ui-router[/b]
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/aaa/:num',{
template : '<p>首页的内容</p>`name`',
controller : 'Aaa'
})
.when('/bbb',{
template : '<p>学员的内容</p>`name`',
controller : 'Bbb'
})
.when('/ccc',{
template : '<p>课程的内容</p>`name`',
controller : 'Ccc'
})
.otherwise({
redirectTo : '/aaa'
});
}]);
m1.run(['$rootScope',function($rootScope){
$rootScope.$on('$routeChangeStart',function(event,current,pre){
console.log(event);
console.log(current);
console.log(pre);
});
}]);
m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$r
outeParams){
$scope.name = 'hello';
$scope.$location = $location;
console.log( $routeParams );
}]);
m1.controller('Bbb',['$scope',function($scope){
$scope.name = 'hi';
}]);
m1.controller('Ccc',['$scope',function($scope){
$scope.name = '你好';
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<a href="" ng-click="$location.path('aaa/123')">首页</a>
<a href="" ng-click="$location.path('bbb')">学员</a>
<a href="" ng-click="$location.path('aaa/456')">课程</a>
<div ng-view></div>
</div>
</body>
</html>
[b]3． Angularjs 中的 ngAnimate
[/b]
[b][b]1. 引入 js
<script
src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>
2. var m1 = angular.module('myApp',['ngAnimate']);
3. 使用下面的几种方式
[/b][/b]
[b]使用说明：
当我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接
会将一个试图滑出，同时将另一个试图滑入。 就会用到 [b]ngAnimate
1. 使用 ngRoute 来为我们的页面路由
2. 使用 ngAnimate 来为页面创建动画效果
[/b][/b]
[b]3. 对页面使用 CSS Animations
4. 当我们离开或进入试图时，我们的每一个页面会有不同的动画效果
[b]ngAnimate CSS3 的方式（ 1）：
ng-enter
ng-enter-active
ng-leave
ng-leave-active
支持的指令
if,view,repeat,include,swtich
repeat： ng-enter-stagger animation-delay
ngAnimate CSS3 的方式（ 2）：
[/b][/b]
[b]ng-hide-add
ng-hide-add-active
ng-hide-remove
ng-hide-remove-active
[/b]
[b]支持的指令
class,show,hide,model 等
[b]ngAnimate JS 方式
animation()
enter/leave
removeClass/addClass
[/b][/b]
[b]m1.animation('.box',function(){
return {
addClass : function(element,sClass,done){
//console.log(element);
//console.log(sClass);
//console.log(done);
$(element).animate({width:0,height:0},1000,done);
},
removeClass : function(element,sClass,done){
$(element).css({width:0,height:0});
$(element).animate({width:200,height:200},1000,done);
}
};
});
[/b]
[b]
[/b]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS基础教程之简单介绍
- angularJS 中$attrs方法使用指南
- 简述AngularJS相关的一些编程思想
- AngularJS的一些基本样式初窥
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- angularJS与bootstrap结合实现动态加载弹出提示内容
- angularjs中的e2e测试实例
- 简介AngularJS中使用factory和service的方法
- AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
- 举例讲解AngularJS中的模块
- 使用AngularJS处理单选框和复选框的简单方法
- AngularJS+Node.js实现在线聊天室
- AngularJS的内置过滤器详解
- 详解AngularJS中自定义指令的使用
- 使用Raygun来自动追踪AngularJS中的异常
- angularJS结合canvas画图例子
- 教你用AngularJS框架一行JS代码实现控件验证效果