Overriding named view templates while using angular-ui-router

StackOverflow https://stackoverflow.com//questions/25042764

Question

Inside the root.app.work state or /work url, how do I change it's page template to <div>wtf</div>.

UPDATE: I cant get root.app.work.show to properly route? it goes to 404

//routes.js

.config(function ($stateProvider, $urlRouterProvider, $locationProvider ) {

    // $provide.decorator('$sniffer', function($delegate) {
    //   $delegate.history = false;
    //   return $delegate;
    // });
    $urlRouterProvider.otherwise('/404');
    $urlRouterProvider.when('/', '/menu');


    $stateProvider
    .state('root', {
      url: '/',
      abstract: true,
      views: {
        '': {
          templateUrl: 'components/main.html',
          controller: 'MainCtrl'
        },

      }
    })
    .state('root.app', {
      url: '',
      views: {
        'menu': {
          templateUrl: 'components/menu/menu.html',
          controller: 'MenuCtrl'
        },
        'page': {
          templateUrl: 'components/page/page.html',
          controller: 'PageCtrl'

        },
        'post': {
          templateUrl: 'components/post/post.html',
          controller: 'PostCtrl'
        },
      }
    })
    .state('root.app.menu', {
      url: 'menu',

    })
    //***********        UPDATEEEE **********//
    //*********** I wnat to change this one here **********//
    .state('root.app.work', {
  url: 'work',
  data: {
    pageTitle: 'work',
    description: 'work desc'
  },
  views: {
    'page@root': {
      template: 'work template view',

    },

  }
})
.state('root.app.work.show', {
  url: ':workSlug',
  data: {
    pageTitle: 'work',
    description: 'work desc'
  },
  views: {
    'page@': {
      template: 'work template view',

    },
    'post@root': {
      template: 'work post template view',

    },

  }
})
    .state('root.app.portfolio', {
      url: 'portfolio'
    })
    .state('root.app.blog', {
      url: 'blog'
    })
    .state('root.app.contact', {
      url: 'contact'
    });
    $locationProvider.html5Mode(false).hashPrefix('!');
  })

HTML:

//index.html
<body>

  <div ui-view></div>
</body>
//main.html
<div ui-view="menu"></div>
<div ui-view="page"></div>
<div ui-view="post"></div>
//all templates
<p>This is the {{view.name}} view.</p>
Was it helpful?

Solution

Changing page@ to page@root might do it for you

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top