第十讲免费视频教程下载地址:http://bbs.phonegap100.com/thread-2047-1-1.html 学习要点: 1. Angularjs中的 ngSanitize 2. Angularjs中的 ngRoute 3. Angularjs中的 ngAnimate 一、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}}', //templateUrlcontroller : '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 |
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.