webapp框架AngularUI的demo改造之路

前端技术 2023/09/09 JavaScript

目的：把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。

本文地址：https://www.stayed.cn/item/24227

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案