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 相关文章推荐
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
浅析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
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
php实现图片压缩处理
2020/09/09 PHP
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
深入了解Python中pop和remove的使用方法
2018/01/09 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python猴子补丁知识点总结
2020/01/05 Python
python selenium 获取接口数据的实现
2020/12/07 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
法学毕业生自荐信
2013/11/13 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
文案策划专业自荐信
2014/07/07 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
公证书格式
2015/01/23 职场文书
期中考试后的感想
2015/08/07 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
导游词之江南周庄
2019/12/06 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
python基础之类方法和静态方法
2021/10/24 Python