假设我有 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=true
这是不必要的,因为foo.html
已经有内容了!
您可能会问,“为什么不使用 empty div#content
?” 因为我想(1)减少加载额外文件,以及(2)即使 JS 被禁用也使内容可用。
在 Backbone.js 中,我可以使用:
Backbone.history.start({pushState:true, silent:true});
这基本上意味着,“如果页面已经加载,不要再次调用路由。” 我如何在 AngularJS 中实现这一点?