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