CODEWITHSUNDEEP
angularjs
user1811660
user1811660

Reputation: 125

AngularJS page navigation

What approach do you recommend to navigate pages from nav menu using angularjs? Pages will have footer and header html using ng-include to have common templates. I found ng-view to navigate between pages.

Upvotes: 0

Views: 662

Answers (2)

sesispla
sesispla

Reputation: 300

Angular router is what you need:

https://github.com/angular-ui/ui-router/blob/master/README.md

Upvotes: 1

brute_force
brute_force

Reputation: 1171

In this example, there's a module named navList and a controller and a method navClass inside it. Using a special service in angular.js, $location which parses the URL in the browser and makes the URL available in the application. Finally, just match the URL hash with the parameter passed.

var navList = angular.module('navList', []);

navList.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
    $scope.navClass = function (page) {
        var currentRoute = $location.path().substring(1) || 'home';
        return page === currentRoute ? 'active' : '';
    };        
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="well sidebar-nav" ng-app="navList">
    <ul class="nav nav-list" ng-controller="navCtrl">
        <li ng-class="navClass('home')"><a href='#/home'>Home</a></li>
        <li ng-class="navClass('about')"><a href='#/about'>About Us</a></li>
        <li ng-class="navClass('contact')"><a href='#/contact'>Contact Us</a></li>
    </ul>
</div>

JsFiddle Link

Upvotes: 1

Related Questions