webapp框架AngularUI的demo改造之路

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