CODEWITHSUNDEEP
angularjsangular-ui-router
boooni
boooni

Reputation: 153

How to change navbar template on state change?

I am trying to build a web-app based on NG6-starter(https://github.com/AngularClass/NG6-starter) and I am facing some difficulties: I need to use different templates for navbar in different states, 'auth' and 'store', but I cannot figure out how to do it. Each component in the app is represented by 3 js and 1 html:

navbar.js: 

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import navbarComponent from './navbar.component';



let navbarModule = angular.module('navbar', [
  uiRouter
])

.component('navbar', navbarComponent);

navbarModule.$inject = ['$scope', '$location', '$rootScope'];
export default navbarModule;

navbar.component.js: 

import template from './navbar.html';
import controller from './navbar.controller';
import './navbar.scss';

let navbarComponent = {
  restrict: 'E',
  bindings: {},
  template: template,
  controller,
  controllerAs: 'vm'
};

export default navbarComponent;

and navbar.controller.js: 

class NavbarController {
  constructor() {
       this.name = 'navbar';
      }
}

export default NavbarController;

States are defined as following(e.g. 'auth' state, auth.js):

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import authComponent from './auth.component.js';

let authModule = angular.module('auth', [
  uiRouter
])

  .config(($stateProvider) => {
    "ngInject";
    $stateProvider
      .state('auth', {
        url: '/auth',
        template: '<auth></auth>'
      });
  })

  .component('auth', authComponent);


export default authModule;

Index html looks like this:

<body class="" ng-app="app" ng-strict-di ng-cloak>
    <app>
      Loading...
    </app>   
</body>

Is there any way to use uiRouter to pass the template to navbar? Thank you!

Upvotes: 2

Views: 975

Answers (1)

Himesh Suthar
Himesh Suthar

Reputation: 572

your html will be like.

<div ui-view="top">

</div>
<div ui-view="bottom">

</div>

state provider will like

$stateProvider.
    state('auth', {
            url: '',
            views: {
                'top': {
                    templateUrl: 'navBar.html',
                    controller: navBarController
                },
                'bottom': {
                    templateUrl: 'ViewA.html',
                    controller: ViewAController
                },
                            }
        });
        state('store', {
                url: '',
                views: {
                    'top': {
                        templateUrl: 'navBar2.html',
                        controller: navBar2Controller
                    },
                    'bottom': {
                        templateUrl: 'ViewB.html',
                        controller: ViewBController
                    },
                                }
            });

you can use multiple ui-views on your index page. you can change your nav bar with state change . tell me if i have miss interpreted your question. this might help you

Upvotes: 3

Related Questions