Web アプリ フレームワーク AngularUI_AngularJS のデモ変換への道

目的: AngularUI テンプレートを既存のプロジェクトに適用します

手順は次のとおりです:

メニューをクリックしてデモ インターフェイスを変更します

angularUI がすべてのページをロードする方法を学び、カスタム読み込みテンプレートを設定するには、demo/demo.js でこの段落を見つけてください。

コードをコピーします コードは次のとおりです:

// # が /、/scroll などの場合、index.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(){});イベントのバインドとハッシュ イベントの変更により、ここでコードがトリガーされる可能性があります。比較した結果、2 つの基本的なメソッドは同じであることがわかりました。違いは、routeChangeStart が最初にトリガーされ、次にrouteChangeSuccess がトリガーされることです。

スクロール リスト ページ: スクロール バーはデータを読み込みます $scope.scrollItems =scrollItems;scrollItems はリスト配列です (プルダウンの更新が必要です)。 右側のチャット サイドバーの json データは、オンラインかどうかを示します。私の場合、当面チャット機能を使用できません
。 フォームページ

元のブートストラップ テンプレートを変更します


1. 上記のステップ 2 から、ページの読み込みは次の 2 つの要素によって決定されることがわかります。

コードをコピーします

コードは次のとおりです:

1 つのベースパス =>base_url() 2 ハッシュに対応するページパス => コントローラー/メソッド 3 Index.phpを非表示にします /config/config.php $config['index_page'] = '' //L29 は空に設定されます; .htaccess

の RewriteEngine RewriteCond $1 !^(lightapp|lightapp.php|index.php|public|robots.txt) #lightapp|lightapp.php に
へのアクセスを許可します RewriteRule ^(.*)$ /index.php/$1 [L]
config.yaml
- 書き換え: if( !is_file() && !is_dir()) goto "index.php?%{QUERY_STRING}"
# URL がファイルでもディレクトリでもない場合は、index.php?%{QUERY_STRING} にジャンプし、cron
の後に置くことはできません 4.demo.js
のメニュールーティングを変更します。

2. リソース パス を置き換え、2 つの js ファイルと 3 つの css ファイルをコピーします

3. プロジェクトの js と css を保存する新しいスタイルとスクリプトのディレクトリを作成します

4. フォント ディレクトリのフォントをパブリックにコピーします

5. home.html ページとsidebar.html ページをビュー ディレクトリにコピーします
概要: この時点で、プロジェクト テンプレートは angularUI を適用しました。