3

現在、AngularJS を使用して 2 つのプロジェクトに取り組んでおり、両方で同じ問題に直面しています。

問題は、インデックス ページがどの内部ページともまったく異なって見えることですng-view。つまり、ページ全体で構成される必要があります。これにより、ルートが変更されるたびに、メイン コンテンツ領域だけでなくページ全体をリロードする必要があります。これにより、ヘッダーやサイドバーなどが一瞬点滅します。

インデックス ページをアプリから分離するために考えられる唯一の良い方法は、文字通り、個別の静的index.htmlページとすべての angularJS ページを個別のフォルダー内に配置して、より焦点を絞った .xml ファイルを使用できるようにすることng-viewです。

これが唯一の/最良のアプローチですか？誰かがこれを達成しましたか、またはその方法について何かアイデアがありますか? ありがとう。

4

1 に答える 1

5

この問題を解決する方法は、UI-Routerを使用することです。

例えば：

app.htmlすべてのアプリケーション ビューを保持するページである を持つことができます。その中に次を追加します。

<body>
    <div ui-view></div>
</body>

アプリケーション全体で必要なスタイル/スクリプト。

ビューを含むすべてのビューがそこに移動しindex.htmlます。

インデックスを除くページに、実際のページに応じて本文が変化するある種のヘッダー/本文/フッター レイアウトがあると仮定すると、次のように構成を使用できます。

var app = angular.module('app', [])
.config(['$stateProvider', function ($stateProvider)
{
    $stateProvider
        .state('index', {
            url: '/index',
            templateUrl: 'index.html',
            controller: 'IndexController'
        })
        .state('root', {
            templateUrl: 'root.html',
            controller: 'RootController'
        })
        .state('root.somePage', {
            url: '/some-page',
            templateUrl: 'some-page.html',
            controller: 'SomePageController'
        })
        .state('root.anotherPage', {
            url: '/another-page',
            templateUrl: 'another-page.html',
            controller: 'AnotherPageController'
        });
}

これroot.htmlは、ASP.NET Web フォームのマスターページのようになるため、次の形式になります。

<!-- header markup here -->

<div ui-view></div>

<!-- footer markup here -->
于 2013-07-19T08:35:24.327 に答える