导航栏不会在每次加载页面时重新加载

debugcn 发表于 Dev

尼桑特·凯尔卡（Nishant kelkar）

抱歉，如果这是一个太基本的问题，请点击这里Angular + jQuery + HTML / CSS noob。

我有一个带有导航栏的网站（www.blog.nishantkelkar.org）。它有几个标签，其中一个是“关于我”。我希望在用户单击“关于我”选项卡时不重新加载页面。我认为这是低效的，并且节省导航栏的加载时间（在我的网站上始终保持不变）是件好事吗？

我正在使用Twitter的Bootstrap开源库在网页上进行样式设置，并使用AngularJS来控制操作（例如单击标签）。

我的工作：我有一个控制器，它根据是否单击选项卡将ng-class =“ active”设置为。但是，它将加载该选项卡的整个href（整个html），而不只是html中的差异。

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

萨钦·卡里亚汀（Sachin Kariyattin）

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);
}());

这是小矮人演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。