PhoneGap中文网

 找回密码
 立即注册
PhoneGap中文网 视频教程 angularjs教程 查看内容

第十讲 angularjs中的 ngSanitize ngRoute ngAnimate插件

2015-11-1 16:35| 发布者: admin| 查看: 3762| 评论: 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




    


头晕

难过

扯淡

不解

搞笑

支持

超赞

欠扁

相关阅读

最新评论

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-11 06:48 , Processed in 0.045092 second(s), 20 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部