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 相关文章推荐
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
AngularJS表单基本操作
Jan 09 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
Vue vm.$attrs使用场景详解
Mar 08 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
优化php效率,提高php性能的一些方法
2011/03/24 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
python简单读取大文件的方法
2016/07/01 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python内置模块collections知识点总结
2019/12/19 Python
python和php哪个容易学
2020/06/19 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
python如何运行js语句
2020/09/09 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
岗位职责的构建方法
2014/02/01 职场文书
空乘英文求职信
2014/04/13 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL