AngularJS UI-Router default views

Question

Here's the example code.

http://plnkr.co/edit/jXEQ9xemL1A5b9KKKcAw?p=preview

var app = angular.module('npAdmin', ['ui.router']);

app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider',
  function($httpProvider, $stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('common', {
        templateUrl: 'tpl.common.html',
        abstract: true,
        // views: {
        //   'footer': {
        //     templateUrl: 'footer.html'
        //   }
        // }
      })
      .state('common.dashboard', {
        url: '/dashboard',
        views: {
          'content': {
            template: '<div><h4>dashboard</h4></div>'
          },
          'footer': {
            templateUrl: 'footer.html'
          }
        }
      })
      .state('common.crm', { 
        url: '/crm',
        views: {
          'content': {
            template: '<div><h4>CRM</h4></div>'
          },
          'footer': {
            templateUrl: 'footer.html'
          }
        }
      })
      .state('common.abc', {
        url: '/abc',
        views: {
          'content': {
            template: '<div><h4>ABC</h4></div>'
          },
          'footer': {
            templateUrl: 'newfooter.html'
          }
        }
      })
      .state('landing', {
        templateUrl: 'tpl.login.html',
        abstract: true,
      })
      .state('landing.login', {
        url: '/login',
        template: '<div><h4>Wow</h4></div>',
      });

    $urlRouterProvider.otherwise('/crm');
  }
]);

The default 'templateUrl' of 'footer' is 'footer.html', but it's 'newfooter.html' for some state.

Is there a good way to set default footer in this case?

I tried to use 'templateUrl' and 'views' at the same time, but it doesn't work.

Community · Accepted Answer · 2020-06-20 09:12:55Z

There is updated plunker. We can use absolute naming in the parent 'common':

  .state('common', {
    
    abstract: true,
     views: {
      '': {
        templateUrl: 'tpl.common.html',   
      },
       'footer@common': {
         templateUrl: 'footer.html'
       }
     }
  })

And override it only if needed ('dashboard' and 'crm' will use the parent footer, while the 'abc' is defining an override - special one: newfooter.html)

  .state('common.dashboard', {
    url: '/dashboard',
    views: {
      'content': {
        template: '<div><h4>dashboard</h4></div>'
      },
      // provided by parent
      //'footer': {
      //  templateUrl: 'footer.html'
      //}
    }
  })
  .state('common.crm', { 
    url: '/crm',
    views: {
      'content': {
        template: '<div><h4>CRM</h4></div>'
      },
      // provided by parent
      //'footer': {
      //  templateUrl: 'footer.html'
      //}
    }
  })
  .state('common.abc', {
    url: '/abc',
    views: {
      'content': {
        template: '<div><h4>ABC</h4></div>'
      },
      'footer': {
        templateUrl: 'newfooter.html'
      }
    }

Check it here

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

Collectives™ on Stack Overflow

AngularJS UI-Router default views

1 Answer 1

View Names - Relative vs. Absolute Names

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related