webapp框架AngularUI的demo改造之路

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

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

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

步驟如下：

按功能表修改demo界面

學(xué)習(xí)angularUI如何加載全部頁(yè)面，為了設(shè)置自定義加載模板，在demo/demo.js中找到這一段

復(fù)制代碼代碼如下:

//當(dāng)#為/,/scroll等等，請(qǐng)求index.html中<base href=""> + home.html的頁(yè)面

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í)行腳本

   拖拽項(xiàng)消失
   拖拽切換圖片
   主要控制器

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

改換原來(lái)bootstrap模板

1.由上面步驟2知道頁(yè)面加載有兩個(gè)因素決定：

復(fù)制代碼代碼如下:

1 base路徑 =＞ base_url()

2 hash對(duì)應(yīng)的頁(yè)面路徑 => 控制器/方法

3 隱藏index.php

/config/config.php $config['index_page'] = ''; //L29設(shè)置為空

.htaccess

RewriteEngine on   

RewriteCond $1 !^(lightapp|lightapp\.php|index\.php|public|robots\.txt)   #允許lightapp|lightapp.php訪問(wèn)

RewriteRule ^(.*)$ /index.php/$1 [L]

config.yaml

- rewrite: if( !is_file() && !is_dir()) goto "index.php?%{QUERY_STRING}"

# 如果 url 既不是文件，也不是目錄，跳轉(zhuǎn)至 index.php?%{QUERY_STRING} 不能放在cron后面

4 修改demo.js中菜單路由

2.替換資源路徑<?=__PUBLIC__?>，拷貝2個(gè)js，3個(gè)css文件

3.新建style,script目錄，存放項(xiàng)目的js和css

4.拷貝字體目錄fonts到public下

5.拷貝home.html,sidebar.html頁(yè)面到視圖目錄下

總結(jié)：至此，項(xiàng)目的模板就應(yīng)用了angularUI。

您可能感興趣的文章: