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>
