webapp框架AngularUI的demo改造之路


Posted in Javascript onDecember 21, 2014

目的:把AngularUI的模板应用到现有项目上

步骤如下:

按功能表修改demo界面

webapp框架AngularUI的demo改造之路

webapp框架AngularUI的demo改造之路

学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段

//当#为/,/scroll等等,请求index.html中<base href=""> + home.html的页面

app.config(function($routeProvider) {

  $routeProvider.when('/',              {templateUrl: 'home.html', reloadOnSearch: false});

  $routeProvider.when('/scroll',        {templateUrl: 'scroll.html', reloadOnSearch: false}); 

  $routeProvider.when('/toggle',        {templateUrl: 'toggle.html', reloadOnSearch: false}); 

  $routeProvider.when('/tabs',          {templateUrl: 'tabs.html', reloadOnSearch: false}); 

  $routeProvider.when('/accordion',     {templateUrl: 'accordion.html', reloadOnSearch: false}); 

  $routeProvider.when('/overlay',       {templateUrl: 'overlay.html', reloadOnSearch: false}); 

  $routeProvider.when('/forms',         {templateUrl: 'forms.html', reloadOnSearch: false});

  $routeProvider.when('/dropdown',      {templateUrl: 'dropdown.html', reloadOnSearch: false});

  $routeProvider.when('/drag',          {templateUrl: 'drag.html', reloadOnSearch: false});

  $routeProvider.when('/carousel',      {templateUrl: 'carousel.html', reloadOnSearch: false});

});

继续阅读demo.js的执行脚本

   拖拽项消失
   拖拽切换图片
   主要控制器

 L195 $rootScope.$on('$routeChangeStart', function(){}); 和 L199 $rootScope.$on('$routeChangeSuccess', function(){});学到 用.$on()来绑定事件和改变hash的事件可以触发这里的代码,对比后,发现两个基本方法一样。不同的一点就是 先触发routeChangeStart, 后触发routeChangeSuccess。
        滚动列表页:滚动栏加载数据 $scope.scrollItems = scrollItems;  scrollItems是一个列表数组;滚动到底部事件(需要做下拉刷新)
        右边聊天侧栏的json数据,显示在线还是不在线,对我来说暂时没有这个能力做聊天功能
         表单页面

改换原来bootstrap模板

1.由上面步骤2知道页面加载有两个因素决定:

1 base路径 => base_url()

2 hash对应的页面路径 => 控制器/方法

3 隐藏index.php

/config/config.php $config['index_page'] = ''; //L29设置为空

.htaccess

RewriteEngine on   

RewriteCond $1 !^(lightapp|lightapp\.php|index\.php|public|robots\.txt)   #允许lightapp|lightapp.php访问

RewriteRule ^(.*)$ /index.php/$1 [L]

config.yaml

- rewrite: if( !is_file() && !is_dir()) goto "index.php?%{QUERY_STRING}"

# 如果 url 既不是文件,也不是目录,跳转至 index.php?%{QUERY_STRING} 不能放在cron后面

4 修改demo.js中菜单路由

2.替换资源路径<?=__PUBLIC__?>,拷贝2个js,3个css文件

3.新建style,script目录,存放项目的js和css

4.拷贝字体目录fonts到public下

5.拷贝home.html,sidebar.html页面到视图目录下

总结:至此,项目的模板就应用了angularUI。

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
浅析webapp框架AngularUI的demo
Dec 21 #Javascript
AngularJS基础知识
Dec 21 #Javascript
javascript关于继承的用法汇总
Dec 20 #Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 #Javascript
jQuery的text()方法用法分析
Dec 20 #Javascript
jQuery中click事件的定义和用法
Dec 20 #Javascript
javascript中String对象的slice()方法分析
Dec 20 #Javascript
You might like
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
自我查摆剖析材料
2014/10/11 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers