第十讲 angularjs中的 ngSanitize ngRoute ngAnimate插件

2015-11-1 16:35| 发布者: admin| 查看: 3650| 评论: 0

摘要: AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-a ...

第十讲免费视频教程下载地址：http://bbs.phonegap100.com/thread-2047-1-1.html

学习要点：

1.   Angularjs中的 ngSanitize
2.   Angularjs中的 ngRoute
3.   Angularjs中的 ngAnimate

主讲教师：（树根）
合作网站：www.phonegap100.com (PhoneGap中文网)
合作网站：www.itying.com (IT营)

一、Angularjs中的 ngSanitize

让浏览器简析html标签
1.    引入js angular-sanitize.min.js
2.    在module 中引入一下插件 var app = angular.module("myApp", ['ngSanitize']);
3.    使用

绑定数据

二、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路由使用：

1.引入js 依赖注入
< script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js">

2.依赖注入ngRoute

var m1 = angular.module('myApp',['ngRoute']);

3.在config中配置

m1.config(['$routeProvider',function($routeProvider){

    $routeProvider
        .when('/aaa/:num',{
            template : '

首页的内容

{{name}}', //templateUrl
            controller : 'Aaa'
        })
        .when('/ccc',{
            template : '

课程的内容

{{name}}',
            controller : 'Ccc'
        })
        .otherwise({
            redirectTo : '/aaa'
        });

}]);

数据显示:

$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.

ionic 路由插件

https://github.com/angular-ui/ui-router

三．Angularjs中的 ngAnimate

1.    引入js
< script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js">

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

ng-enter-stagger结合 animation-delay(repeat独有)

支持的指令
if,view,repeat,include,swtich
repeat：支持css   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);
        }
    };
});

第十讲免费视频教程下载地址：http://bbs.phonegap100.com/thread-2047-1-1.html