Twitter Bootstrap Question posted in

Have a navbar not reload on every page load – Twitter bootstrap

Sorry if this is too basic a question, Angular + jQuery + HTML/CSS noob here.

I have a website (www.blog.nishantkelkar.org) that has a navbar. It has a few tabs, one of which is “About Me”. I’d like the page to not reload when the user clicks on the “About Me” tab. I presume this is inefficient, and saving up on load-time for the navbar (which is going to remain constant at all times on my website) is a good thing?

I’m using Twitter’s Bootstrap open source library for styling on my webpage, and AngularJS to control actions (like tab clicks).

My effort: I have a controller that sets ng-class = “active” based on whether a tab is clicked. However, it loads the entire href for that tab (whole html) instead of just the difference in html.

Thanks and any/all help is appreciated!

Tags:

2

Answers


  1. 0

    ng-view and ng-route will get the work done for you.

    Just define your views using the $routeProvider.

    Here is a sample code

    Main page

    <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 (route config)

    (function () {

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

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

    and the HeaderController to highlight the active tabs

    (function () { 

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

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

    Here is the plunker demo

    Login or Signup to reply.
  2. 0

    You have a few options, but the better one is to use routing.

    Angular have a built-in client-side routing (ng-route), as well as a third-party ui-router (it’s better, but more complicated for understand).

    That mean you should have few separate files: mail.html and a few page.html.

    in main.html you should add your header. And a ng-view (for ng-route) directive.
    It’s would work like a placeholder where you would render your pages.

    And In page.html you should just add an basic page info.

    It’s similar to use includes in other languages.

    But important: all client-side routing have bad deal with search engine. So, SEO for all Single-Page Applications, like an angular-based, it’s a bit problematic.

    So, in other words if SEO is important for you, may be you should prefer backend-based routing (at least like old-school php or whatever, to render your pages)

    Bonus (offtop) If you just want a static-based blog (without backend) but easy for maintenance, you are able to use something like Jekyl. It’s a tool, that will generate static pages from json on build-time. You can find a few alternatives of jekyl for different platforms (ruby, nodejs, etc.). In this case you would be able to host yor pages on any static hosting, like pages.github.com. This is how to use jekyl with gh-pages: link.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search