提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

webapp框架AngularUI的demo改造之路

框架 Demo 改造 webapp
2023-06-13 09:15:37 时间

目的：把AngularUI的模板应用到现有项目上

步骤如下：

按功能表修改demo界面

学习angularUI如何加载全部页面，为了设置自定义加载模板，在demo/demo.js中找到这一段

复制代码代码如下:


//当#为/,/scroll等等，请求index.html中<basehref="">+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知道页面加载有两个因素决定：

复制代码代码如下:


1base路径=＞base_url()
2hash对应的页面路径=>控制器/方法
3隐藏index.php
/config/config.php$config["index_page"]="";//L29设置为空
.htaccess
RewriteEngineon  
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。

相关文章