0

2 つの HTML ページfoo.htmlとbar.html.

内部foo.html:

<a href="/foo.html" class="selected">Open Foo</a>
<a href="/bar.html">Open Bar</a>
<!-- shared content -->
<div id="content">Nested HTML specific to Foo</div>
<!-- shared content -->

内部bar.html:

<a href="/foo.html">Open Foo</a>
<a href="/bar.html" class="selected">Open Bar</a>
<!-- shared content -->
<div id="content">Nested HTML specific to Bar</div>
<!-- shared content -->

予想どおり、いずれかのページのリンクをクリックすると、対応するページが開きます。今、私はこれを「AngularJSify」して、リンクをクリックしても更新されないようにしたいと考えていdiv#contentます。私はこれを試しました：

$routeProvider
.when('/foo.html', {templateUrl:'/foo.html?onlyContent=true'})
.when('/bar.html', {templateUrl:'/bar.html?onlyContent=true'})

<div id="content" ng-view>Nested HTML specific to Foo (or Bar, depending which page you're in)</div>

ただし、コンテンツが既にあるため不要なオープニングfoo.htmlもロードされます。foo.html?onlyContent=truefoo.html

「なぜ empty を使用しないのdiv#contentですか?」と疑問に思われるかもしれません。(1)余分なファイルの読み込みを減らしたい、(2)JSが無効になっていてもコンテンツを利用できるようにしたいからです。

Backbone.js では、次を使用できます。

Backbone.history.start({pushState:true, silent:true});

これは基本的に、「ページが既に読み込まれている場合は、ルートを再度呼び出さないでください」という意味です。AngularJS でそれを達成するにはどうすればよいですか?

4

1 に答える 1

0

内部foo.html:

<a href="/foo.html" class="selected">Open Foo</a>
<a href="/bar.html">Open Bar</a>
<div id="defaultTemplate">Nested HTML specific to Foo</div> <!-- note this -->
<div id="content" ng-view></div>

内部bar.html:

<a href="/foo.html">Open Foo</a>
<a href="/bar.html" class="selected">Open Bar</a>
<div id="defaultTemplate">Nested HTML specific to Bar</div> <!-- note this -->
<div id="content" ng-view></div>

JavaScript の場合:

function routing(path, controller, template) {
    var route = {templateUrl:'/templates/' + path, controller:controller};

    if (path === window.location.pathname) {
        var defaultTemplate = $('#defaultTemplate');

        route = {template:defaultTemplate.html(), controller:controller};
        defaultTemplate.remove();
    }

    $routeProvider.when(path, route);
}

本質的には、「開いているルートがアドレスバーのパスと同じ場合は、代わりに現在のページのテンプレートを使用する」ことを意味します。

于 2012-09-21T15:00:53.210 に答える