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。
相關文章
AngularJS 獲取ng-repeat動態(tài)生成的ng-model值實例詳解
這篇文章主要介紹了AngularJS 獲取ng-repeat動態(tài)生成的ng-model值實例詳解的相關資料,這里提供實例代碼及實現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Angular4學習筆記之根模塊與Ng模塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼
這篇文章主要介紹了AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼的相關資料,需要的朋友可以參考下2016-01-01
這篇文章主要為大家介紹了AngularJs動態(tài)加載模塊和依賴注入，感興趣的小伙伴們可以參考一下2016-01-01
AngularJS入門（用ng-repeat指令實現(xiàn)循環(huán)輸出
這篇文章主要介紹了AngularJS入門（用ng-repeat指令實現(xiàn)循環(huán)輸出,需要的朋友可以參考下2016-05-05
本篇文章主要介紹了angular第三方包開發(fā)整理(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本文通過一個案例給大家介紹angularJs解決跨域問題，非常具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
這篇文章主要介紹了AngularJS的臟檢查深入分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
本文主要介紹AngularJS ng-include 指令,這里對ng-include的基本知識做了整理,并附有代碼實例,有需要的朋友可以參考下2016-08-08
@angular前端項目代碼優(yōu)化之構建Api Tree的方法
這篇文章主要介紹了@angular前端項目代碼優(yōu)化之構建Api Tree的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12