Question

很抱歉，如果这是一个非常基本的问题，Angular + jQuery + HTML / CSS noob就在这里。

我有一个有导航栏的网站（www.blog.nishantkelkar.org）。它有几个标签，其中一个是＆＃34;关于我＆＃34;。当用户点击＆＃34;关于我＆＃34;我想要不重新加载的页面。标签。我认为这是低效的，并且节省导航栏的加载时间（在我的网站上始终保持不变）是一件好事吗？

我使用Twitter的Bootstrap开源库在我的网页上设置样式，而使用AngularJS来控制操作（如标签点击）。

我的努力：我有一个设置ng-class =＆＃34; active＆＃34;根据是否单击选项卡。但是，它会加载该选项卡的整个href（整个html），而不仅仅是html中的差异。

谢谢，感谢任何/所有帮助！

Answer 1

ng-view和ng-route将为您完成工作。

只需使用$routeProvider定义您的观看次数即可。

以下是示例代码

主页

<body>
<header>
<nav class="navbar navbar-default" ng-controller="HeaderController">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Sample App</a>
    </div>
    <ul class="nav navbar-nav">
      <li ng-class="{ active: isActive('/')}"><a href="#/">Home</a></li>
      <li ng-class="{ active: isActive('/about')}"><a href="#/about">About</a></li>
    </ul>
  </div>
</nav>
</header>
<ng-view></ng-view>
</body>

app.js （路线配置）

(function () {

var app = angular.module('sampleApp',['ngRoute']);

app.config(function ($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl:'home.html'
        })
        .when('/about',{
            templateUrl:'about.html'
        })
        .otherwise({ redirectTo:'/'});
});
})();

和 HeaderController 以突出显示活动标签

(function () { 

 var headerController = function ($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
};

angular.module('sampleApp').controller('HeaderController',headerController);
}());

以下是plunker demo

Answer 2

您有几个选项，但越好就是使用路由。

Angular有一个内置的客户端路由（ng-route），以及第三方ui-router（它更好，但理解起来更复杂）。

这意味着你应该有几个单独的文件：mail.html和一些page.html。

在main.html中，您应该添加标题。还有一个ng-view（用于ng-route）指令。它会像占位符一样用于渲染页面。

在page.html中，您只需添加基本页面信息。

与使用其他语言包含类似。

但重要：所有客户端路由与搜索引擎都有不妥协。因此，所有单页应用程序的搜索引擎优化，如基于角度的，它有点问题。

所以，换句话说，如果搜索引擎优化对你很重要，可能你应该更喜欢基于后端的路由（至少像老式的php或其他什么，来呈现你的页面）

奖金（offtop）如果您只想要一个基于静态的博客（没有后端）但易于维护，则可以使用Jekyl之类的内容。它是一个工具，它将在构建时从json生成静态页面。您可以为不同的平台（ruby，nodejs等）找到一些jekyl的替代品。在这种情况下，您将能够在任何静态托管like pages.github.com上托管您的页面。这是如何使用jekyl和gh-pages：link。

每个页面加载时都不会重新加载导航栏

2 个答案: