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

Answer 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/