Display content on click of navigation menu in angularjs

Question

My html page contain two sections. Left side I have navigation(code is below) and right side is to display contents for respective navigation menu.

On click of each navigation menu, particular section should be rendered on my content part.

I have done it using ng-show/ng-hide by setting flag in my js file. But since I am setting flags for each sections and show/hide , my js code file looks very odd. I know this is not the correct way to do it.

I am new to angularjs. Kindly help me to achieve this efficiently.

HTML code: (only navigation part)

<div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#Home" data-toggle="collapse" data-target="#Login">Home</a></li>
        <div class="collapse" id="Login">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-log-in" href="#" ng-click="LoginScreen()">Login</a></li>
                <li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
            </ul>
        </div>
        <li><a href="#Contact" data-toggle="collapse" data-target="#Contact">About</a></li> 
        <div class="collapse" id="Contact">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-save" href="#" ng-click="LoadUserDetailsScreen()">LoadUserDetails</a></li>
                <li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
            </ul>
        </div>
    </ul>
</div>

JS code:

var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {

  $scope.FlagHomeScreen = true;
  $scope.LoadData=false;
  $scope.showtable=false;
  $scope.showstatus=false;
  $scope.FlagLoginScreen = false;
  $scope.RegisterScreenFlag= false;

  $scope.menuitems =[10,20,30];

  $scope.LoginScreen = function(){
    $scope.FlagLoginScreen = true;
    $scope.FlagHomeScreen =false;
    $scope.LoadData=false;
    $scope.RegisterScreenFlag=false;
  };

  $scope.LoadUserDetailsScreen =function(){
    $scope.LoadData=true;
    $scope.FlagLoginScreen = false;
    $scope.FlagHomeScreen =false;
    $scope.RegisterScreenFlag=false;
  };

  $scope.RegisterScreen=function(){
    $scope.RegisterScreenFlag=true;
    $scope.LoadData=false;
    $scope.FlagLoginScreen = false;
    $scope.FlagHomeScreen =false;
  };
});

use an angular router like ngRoute or ui-router. Your approach won't allow bookmarking content "pages" but using a router will — charlietfl
– charlietfl, Commented Jul 8, 2015 at 13:11

Alexandre Aimbiré · Accepted Answer · 2018-09-19 01:15:23Z

1

You can handle your navigation in your app using ui-router. For your case you need a main template which includes your navigation bar and in each state of your app you want to show a different view.

Here is a fiddle which shows you how you can use ui-router to handle your views. For clarity I only implemented login and user details in the example below. You can add remaining parts yourself, it would be a good practice for you.

Define your states as such:

var myApp = angular.module('myApp', ['ui.router'])
    .config(['$stateProvider', function ($stateProvider) {

    $stateProvider.state('home', {
        url: "/",
        template: '<div ui-view=""/>' // templates of child states will fill components with ui-view attribute
    })
    .state('home.userDetails', {
        url: "userDetails",
        template: '<div>user details</div>',
        controller: "UserDetailsCtrl"
    })
    .state('home.login', {
        url: "login",
        //templateUrl: "path/to/login.html" // instead of giving inline templates as below, you can include your template into a html file, and use it in your state by templateUrl property
        template: '<div>user login</div>',
        controller: "LoginCtrl"
    })
}])

And you can navigate within your states using ui-sref instead of using ng-show and ng-click.

<div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#Home" data-toggle="collapse" data-target="#Login">Home</a></li>
        <div class="collapse" id="Login">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-log-in" ui-sref="home.login">Login</a></li>
                <li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
            </ul>
        </div>
        <li><a href="#Contact" data-toggle="collapse" data-target="#Contact">About</a></li> 
        <div class="collapse" id="Contact">
            <ul class="nav nav-pills nav-stacked">
                <li><a class="glyphicon glyphicon-save" ui-sref="home.userDetails">LoadUserDetails</a></li>
                <li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
            </ul>
        </div>
    </ul>
</div>
<div ui-view=""/>

Don't forget to check documentation of ui-router: http://angular-ui.github.io/ui-router/site/#/api

JSFiddle: http://jsfiddle.net/7tzXh/48/

edited Sep 19, 2018 at 1:15

Alexandre Aimbiré

1,6492 gold badges15 silver badges26 bronze badges

answered Jul 8, 2015 at 13:26

cubbuk

7,9284 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sarath Over a year ago

So the best way would be creating separate html form for each section and render it inside template. Is that right?

Sarath Over a year ago

But it seems like templateUrl is not working. Created Login.html page and mapped to ui-router like templateUrl:'Login.html'. But no response.

cubbuk Over a year ago

Yes you should create different html files for your each section, make sure you give the correct path for your url, for example if your templates is under app/sections/Login.html your template should be app/sections/Login.html

Sarath Over a year ago

Actually I am trying the functionality with notepad. So I have my Login.html file in my local path say(C:\Users\xxxx\Desktop\Try\Login.html). I have tried with templateUrl:'C:\Users\xxxx\Desktop\Try\Login.html'. But still I did not get any response.

Collectives™ on Stack Overflow

Display content on click of navigation menu in angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related