webapp框架AngularUI的demo改造之路_AngularJS

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