仅加载页面更改

在我的网站上，我在每个页面上显示相同的页眉，我想知道是否有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

仅加载页面更改

回答

相关问题