angularjs ngSanitize ngRoute ngAnimate 插件
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>
ionic 路由插件
https://github.com/angular-ui/ui-router
<!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>
3． Angularjs 中的 ngAnimate
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. 使用下面的几种方式
使用说明：
当我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接
会将一个试图滑出，同时将另一个试图滑入。 就会用到 ngAnimate
1. 使用 ngRoute 来为我们的页面路由
2. 使用 ngAnimate 来为页面创建动画效果
3. 对页面使用 CSS Animations
4. 当我们离开或进入试图时，我们的每一个页面会有不同的动画效果
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）：
ng-hide-add
ng-hide-add-active
ng-hide-remove
ng-hide-remove-active
支持的指令
class,show,hide,model 等
ngAnimate JS 方式
animation()
enter/leave
removeClass/addClass
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);
}
};
});
