Question

我想在不重新加载整个网站的情况下更改页面内容但我还想更改网址<title>标记，并在页面更改期间添加浏览历史记录。像YouTube上的东西

任何人都可以告诉我我应该怎么做以及我应该使用什么（可能AngularJS或其他什么）？

Answer 1

AngularJS是一个将支配您的代码架构的框架。但是，这是解决路由问题的一种方法：您有几个状态，每个状态都包含一个HTML模板。如果切换到其他状态，页面内容将会更改。如果您是一位经验丰富的JavaScript开发人员，您可能希望学习并深入了解AngularJS的世界，但请确保您想要采用相当陡峭的学习曲线。

如果您的唯一目的是切换页面内容，您也可以使用jQuery。只需在页面上选择一个元素并删除其内容即可。然后，将另一个HTML模板添加到该元素。以下是一些示例代码：

$(document).ready(function() {
    $('.pageElement').empty().html('<h2>Title</h2><p>This is some content.</p>');
});

您还可以使用jQuery .load()函数将现有HTML模板文件注入元素：

$(document).ready(function() {
    $('.pageElement').empty().load('/template.html');
});

Answer 2

你可以使用这个$ stateProvider。在 routes.js 设置状态

.config([
  '$stateProvider',
  '$urlRouterProvider',
  '$httpProvider',
  '$locationProvider',
 function($stateProvider, $urlRouterProvider, $httpProvider,  $locationProvider) {
        $urlRouterProvider.otherwise('home');   
        $stateProvider
        .state('login', {
            url: '/login',
            data: { isPublic: true },
            templateUrl: 'templates/AdminUser/login.html',
            controller: 'AdminUserController'
        });
    }]);

并在控制器中，当您重定向到登录时，请使用此

$state.transitionTo('login');

这是一个简短的例子，你可以像这样使用多重状态。并重定向到网址而不重新加载。

Answer 3

你可以使用pjax。它来自它的github page。

pjax是一个jQuery插件，它使用ajax和pushState来提供快速   使用真实永久链接，页面标题和工作的浏览体验   后退按钮。

pjax的工作方式是通过ajax从服务器获取html并替换   使用ajax＆＃39; h html在页面上创建容器的内容。然后呢   使用pushState更新浏览器的当前URL而不重新加载   您的页面布局或任何资源（JS，CSS），给出了外观   快速，整页加载。但实际上它只是ajax和pushState。

考虑这个eaxmple。

Like.findAndCountAll({ 
    where: { userId: req.authSession.user.id },
    include: [ { model: models.post } ]
});

你的剧本。

<!DOCTYPE html>
<html>

<head>
  <!-- styles, scripts, etc -->
</head>

<body>
  <h1>My Site</h1>
  <div class="container" id="pjax-container">
    Go to <a href="/page/2">next page</a>.
  </div>
</body>

</html>

当点击发生在$(document).pjax('a', '#pjax-container')时，它会在a上播放并向该链接发送ajax请求，整个href将替换为新内容pjax-container }。对于sublit形式也是如此。

pjax-container

什么是更改页面内容而不重新加载的最佳方法？

3 个答案: