angular - Switch navbar when view is changed

Question

I am using angular-route.min.js and I have two designs for my navbar.

The First one is the landing page navbar that will appear first on my index.html. enter image description here

The second navbar is when the user is routed to the /signin page. enter image description here

I am unsure on how to go about this. I see a lot of different ways that this could be done, but none really that explain how I could change the entire header view when another route is chosen. They just show how to change the links that are contained inside of it. Like this Stack

how can I switch out the header when it is routed to the /signin page?

also, I am working with another person who is doing the backend with Django. That is why I changed the "{{ }}" to "[[ ]]".

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

app.config(function($interpolateProvider, $routeProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');

  $routeProvider

    .when('/', {
    templateUrl: 'pages/LandingPage.html',
  })

  .when('/signin', {
      templateUrl: 'pages/SignIn.html'
    })
    .when('/contact', {
      templateUrl: 'pages/contact.html'
    });
});

<!DOCTYPE html>
<html lang="en" data-ng-app="app">

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
  </script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js">
  </script>
</head>

<body>
  <div ng-view></div>
</body>

</html>

Can you provide the codes of your html files?

Alberto I.N.J.
– Alberto I.N.J.

2015-06-25 01:03:19 +00:00
Commented Jun 25, 2015 at 1:03 — Alberto I.N.J.
– Alberto I.N.J., Commented Jun 25, 2015 at 1:03
no they are too large.

Austin Perez
– Austin Perez

2015-06-26 16:54:46 +00:00
Commented Jun 26, 2015 at 16:54 — Austin Perez
– Austin Perez, Commented Jun 26, 2015 at 16:54

yazaki · Accepted Answer · 2015-06-25 22:14:42Z

3

I think ng-include directive could solve the situation you are facing.

In controller code.

.controller('HeaderCtrl', function($scope, $location) {
    $scope.$on('$locationChangeSuccess', function(/* EDIT: remove params for jshint */) {
        var path = $location.path();
        //EDIT: cope with other path
        $scope.templateUrl = (path==='/signin' || path==='/contact') ? 'template/header4signin.html' : 'template/header4normal.html' ;
    });
})

In Html.

<body>
    <div ng-controller="HeaderCtrl">
        <div ng-include="templateUrl"></div>
    </div>
    <div ng-view></div>
</body>

I hope this could help you. :)

edited Jun 25, 2015 at 22:14

answered Jun 25, 2015 at 2:07

yazaki

1,6421 gold badge13 silver badges17 bronze badges

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

3 Comments

Austin Perez Over a year ago

This worked great! How can I add other pages? like if I also wanted the '/contact' page to have that alternate header? I thought you would just add a Logical "or" which is | |, but that did not work.

app.controller('HeaderCtrl', function($scope, $location) {     $scope.$on('$locationChangeSuccess', function(event, newurl, prevurl) {         $scope.templateUrl = $location.path()==='/signin' || '/contact' ? 'pages/SigninHeader.html' : 'pages/NormalHeader.html' ;     }); });

Austin Perez Over a year ago

also, I keep getting JSHint issues saying that "event, newurl, and prevurl are defined but never used." Is this an issue that I need to fix? if so how do I go about doing that?

yazaki Over a year ago

Thanks for you to accept my answer! I edited my answer which includes EDIT: comments.

Joy · Accepted Answer · 2015-06-25 04:31:50Z

0

The difference of your two navbars are not significant. An alternative is just use ng-class and ng-show to give different styles.

For example, in the navbar.html:

<nav>
    <span ng-show="isNormalPage">Inn</span>
    <img ng-class="{align-center: isNormalPage}">Logo</img>
    <span ng-show="isNormalPage">Sing in</span>
</nav>

In your JS file, add a flag to mark singin page:

.when('/signin', {
  controller: [$scope, function ($scope) {
      $scope.isNormalPage = false;
    };
  }]
})

answered Jun 25, 2015 at 4:31

Joy

9,60011 gold badges50 silver badges99 bronze badges

1 Comment

Austin Perez Over a year ago

Thanks for your answer, but I was not looking to change the css. I just wanted to change the html of the header to the alternate one.

Collectives™ on Stack Overflow

angular - Switch navbar when view is changed

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related