webapp框架AngularUI的demo改造之路
2014-12-21 00:00
489 查看
目的:把AngularUI的模板应用到现有项目上
步骤如下:
按功能表修改demo界面
学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段
继续阅读demo.js的执行脚本
拖拽项消失
拖拽切换图片
主要控制器
L195 $rootScope.$on('$routeChangeStart', function(){}); 和 L199 $rootScope.$on('$routeChangeSuccess', function(){});学到 用.$on()来绑定事件和改变hash的事件可以触发这里的代码,对比后,发现两个基本方法一样。不同的一点就是 先触发routeChangeStart, 后触发routeChangeSuccess。
滚动列表页:滚动栏加载数据 $scope.scrollItems = scrollItems; scrollItems是一个列表数组;滚动到底部事件(需要做下拉刷新)
右边聊天侧栏的json数据,显示在线还是不在线,对我来说暂时没有这个能力做聊天功能
表单页面
改换原来bootstrap模板
1.由上面步骤2知道页面加载有两个因素决定:
2.替换资源路径<?=__PUBLIC__?>,拷贝2个js,3个css文件
3.新建style,script目录,存放项目的js和css
4.拷贝字体目录fonts到public下
5.拷贝home.html,sidebar.html页面到视图目录下
总结:至此,项目的模板就应用了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。
相关文章推荐
- 历代显卡精彩演示DEMO赏析点评之NV篇_7(转载)
- ThreadLocal示例Demo 代码分离
- zookeeper创建目录节点DEMO
- 用原生JS实现一个简单的计时器demo
- 注释的bootstrap的demo
- XGBoost调参demo(Python)
- 随便写了个GUI--简单的八皇后DEMO,【转】算法
- spring aop注解Demo
- UI基础-iOS黑马-UITableViewCell的常见属性3-LoLdemo
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
- python爬虫学习(10) —— 专利检索DEMO
- trait 继承的Demo
- 发布我的第一款DemoScene作品.
- Android 抽屉效果Demo
- Android-Sqlite数据库_创建数据库操作Demo
- 【Android开发】Android跨进程通讯(AIDL)官方文档及官方Demo讲解
- 阿里云直播服务 sdk demo php
- ARKit开发-简介及Demo展示
- demo
- Silverlight中Datagrid控件自定义列头样式Demo