目的：把AngularUI的模板應用在現有項目上
步驟如下：
依功能表修改demo介面
學習angularUI如何載入全部頁面，為了設定自訂載入模板，在demo/demo.js中找到這段
//當#為/,/scroll等等，請index.html中 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。
