webapp框架—学习AngularUI2(demo改造)

时间:2022-09-24 21:32:55

目的:把AngularUI的模板应用到“桂电在线”上

步骤如下:

  1. 按功能表修改demo界面webapp框架—学习AngularUI2(demo改造)webapp框架—学习AngularUI2(demo改造)
  2. 学习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});
    });
  3. 继续阅读demo.js的执行脚本
    1. 拖拽项消失
    2. 拖拽切换图片
    3. 主要控制器
      1. L195 $rootScope.$on('$routeChangeStart', function(){}); 和 L199 $rootScope.$on('$routeChangeSuccess', function(){});学到 用.$on()来绑定事件和改变hash的事件可以触发这里的代码,对比后,发现两个基本方法一样。不同的一点就是 先触发routeChangeStart, 后触发routeChangeSuccess。
      2. 滚动列表页:滚动栏加载数据 $scope.scrollItems = scrollItems;  scrollItems是一个列表数组;滚动到底部事件(需要做下拉刷新)
      3. 右边聊天侧栏的json数据,显示在线还是不在线,对我来说暂时没有这个能力做聊天功能
      4. 表单页面

改换原来bootstrap模板

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

1 base路径 => base_url()

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

3 隐藏index.php

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

.htaccess

RewriteEngine on
RewriteCond $ !^(lightapp|lightapp\.php|index\.php|public|robots\.txt) #允许lightapp|lightapp.php访问
RewriteRule ^(.*)$ /index.php/$ [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。记录一下接下来的开发计划:

1.显示我的菜单 有登录和没登录(注册登录界面)

2.显示学校公告新闻列表,和详情