webapp框架AngularUI的demo改造之路

更新時間：2014年12月21日 15:01:37 投稿：hebedich

這篇文章主要介紹了webapp框架AngularUI的demo改造之路,需要的朋友可以參考下

目的：把AngularUI的模板應用到現(xiàn)有項目上

步驟如下：

按功能表修改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});

});

繼續(xù)閱讀demo.js的執(zhí)行腳本

   拖拽項消失
   拖拽切換圖片
   主要控制器

L195 $rootScope.$on('$routeChangeStart', function(){}); 和 L199 $rootScope.$on('$routeChangeSuccess', function(){});學到用.$on()來綁定事件和改變hash的事件可以觸發(fā)這里的代碼，對比后，發(fā)現(xiàn)兩個基本方法一樣。不同的一點就是先觸發(fā)routeChangeStart，后觸發(fā)routeChangeSuccess。
        滾動列表頁：滾動欄加載數(shù)據(jù) $scope.scrollItems = scrollItems; scrollItems是一個列表數(shù)組；滾動到底部事件（需要做下拉刷新）
        右邊聊天側欄的json數(shù)據(jù)，顯示在線還是不在線，對我來說暫時沒有這個能力做聊天功能
         表單頁面

改換原來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。

您可能感興趣的文章: