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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 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中for循环语句的几种变型
2006/11/26 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
深入浅析Python中的yield关键字
2018/01/24 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
"引用"与多态的关系
2013/02/01 面试题
保护动物倡议书
2014/04/15 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
工作保证书范文
2014/04/29 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
python基础之模块的导入
2021/10/24 Python
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
基于Python实现西西成语接龙小助手
2022/08/05 Golang