僅加載頁面更改

在我的網站上，我在每個頁面上顯示相同的頁眉，我想知道是否有AngularJS/jQuery或簡單的JS解決方案只加載正文的內容而不是頁眉頁面更改。僅加載頁面更改

<html ng-app="headerApp" ng-controller="HeaderCtrl"> 
    <head> 
    <!-- here I load my JS and css ... --> 
    <div ng-include="'templates/Header.tpl.html'"></div> 
    </head> 
    <body> 
    <div ng-include="'templates/IndexBody.tpl.html'"></div> 
    </body> 
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer> 
</html>

所以我的HTML看起來像這樣我有每個部分單獨的模板。但現在我爲每個頁面創建一個html文件。所以我認爲有一種方法可以在體內改變ng-include。

感謝您的幫助！

來源

2014-11-14 Nicolas Charvoz

這是單頁應用程序背後的想法。 Angular提供了一個內置的路由器，可以爲您提供這個功能，並且還有流行的ui-router插件。

您將您的視圖更改爲：

<html ng-app="headerApp"> 
    <head ng-controller="HeaderCtrl"> 
    <div ng-include="'templates/Header.tpl.html'"></div> 
    </head> 
    <body> 
    <div ng-view></div> 
    </body> 
    <footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer> 
</html>

和app.js對路由器進行配置：

angular.module('headerApp', ['ngRoute']).config(function($routeProvider){ 
    $routeProvider.when('/', { 
    templateUrl: 'templates/IndexBody.tpl.html', 
    controller: 'IndexBodyCtrl' 
    }); 
});

請注意，您需要在您的index.html angular-route.js。更多閱讀：https://docs.angularjs.org/api/ngRoute

來源

2014-11-14 15:24:32

如果這是一個Angular應用程序，你會不會使用ng-view？視圖之外的所有東西都是模板，而靜態就是這樣。如果你沒有建立一個spa，那麼Angular可能不是最好的方法。

如果這是jQuery的，那麼你可以只是做：

$("article").load('templatefiletoload.html');

提防裝載在你的內容一樣，這是從一個角度SEO角度差。如果可能的話，使用服務器端包括

來源

2014-11-14 15:19:59

僅加載頁面更改

回答

相關問題