在AngularJS中加載模板除了當前頁面

Question

假設我有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已經有內容！

您可能會問：「爲什麼不使用空div#content？」因爲我想（1）減少加載額外的文件，並且（2）即使JS被禁用也使得內容可用。

在Backbone.js的，我可以使用：

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

這基本上意味着，「如果該頁面已經被加載，不要再調用的路線。」我如何在AngularJS中實現這一點？

Answer 1

內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); 
} 

實際上意味着，「如果你打開路由是相同的地址欄中的路徑，使用當前頁面中的模板「。