Question

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

感谢您的帮助！

Answer 1

这是单页应用程序背后的一种想法。 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

Answer 2

如果是Angular应用程序你不会使用ng-view吗？视图外的所有内容都是模板，因此是静态的。如果你没有建立一个水疗中心，那么Angular可能不是最好的方法。

如果是Jquery那么你可以这样做：

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

请注意，从SEO的角度来看，加载这样的内容很差。尽可能使用服务器端包含

在页面更改时仅加载正文

2 个答案: