PollRoutes.coffee
$stateProvider.state 'polls.new',
url: '/new'
views:
"":
templateUrl: 'polls/form.html'
controller: 'PollController'
"page_title":
template: "<h1 class='page-header'>Create a new poll</h1>"
resolve:
auth: ["Auth", (Auth)-> Auth.currentUser()]
$stateProvider.state 'polls.edit',
url: '/:id/edit'
views:
"":
templateUrl: 'polls/form.html'
controller: 'PollController'
"page_title":
template: "<h1 class='page-header'>Edit poll \"{{poll.title}}\"</h1>"
resolve:
auth: ["Auth", (Auth)-> Auth.currentUser()]
insert in polls/form.html.slim
div ng-view='page_title'
I tried various view formats: "page_title", "page_title#", "page_title#polls.edit" and none of them work
Application link
Your $state should be like this.
$stateProvider
.state('polls', {
url: '/',
data: {pageTitle: 'Edit poll.'},
resolve: {//here your functions},
views: {
'navbar': {
templateUrl: null, //here your template
controller: null //here your controller
},
'body': {
templateUrl: "polls/form.html",
controller: 'PollController'
}
}});
and your views like this,
<div ng-view='navbar'></div>
<div ng-view='body'></div>
and your tittle can be loaded like this,
<title ng-bind="title">My tittle</title>
Related
I have the following code:
$stateProvider.state('dm', {
template: '<div ui-view></div>'
}).state('dm.start', {
url: '/',
templateUrl: 'test.html'
}).state('dm.view', {
url: '/view',
template: '<div ui-view></div>',
controller: 'ViewCtrl',
controllerAs: "$ctrl"
}).state('dm.view.deposit', {
url: '/deposit',
templateUrl: 'components/view/view_deposit.html'
}).state('dm.view.lot', {
url: '/lot',
templateUrl: 'components/view/view_lot.html'
}).state('dm.add', {
url: '/add',
template: '<div ui-view></div>',
controller: 'AddCtrl',
controllerAs: "$ctrl"
}).state('dm.add.deposit', {
url: '/deposit',
templateUrl: 'components/add/add_deposit.html'
}).state('dm.add.lot', {
url: '/lot',
templateUrl: 'components/add/add_lot.html'
}).state('dm.add.lot.main', {
url: '/:id',
templateUrl: 'components/add/add_lot_main.html',
controller: 'AddLotMainCtrl',
controllerAs: "$ctrl"
});
When I try to navigate to add/lot/1234, though, it shows that in the URL box but I get the page components/add/add_lot.html. How do I go to components/add/add_lot_main.html?
All the settings seem to be ok. Assure, that template 'components/add/add_lot.html' really contains a target for its child
<div ui-view=""></div>
Try changing to url for lot/:id
JS
.state('dm.add.lot.main', {
url: '/lot/:id',
templateUrl: 'components/add/add_lot_main.html',
controller: 'AddLotMainCtrl',
controllerAs: "$ctrl"
});
This will resolve it.
Trying to get the following url structure to work:
/page/
/page/article
/page/article/third-level-1
/page/article/third-level-2
Ive tried the follow but it doesn't render the article view at all. The page view renders fine:
<section ui-view></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
})
.state('page.article', {
url: '/article/',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html'
});
I then tried everything under the sun, and managed to get the second view to render with the following, however the Controller doesnt run on the article view:
<section ui-view="app"></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
views: {
'app': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
}
}
})
.state('page.article', {
url: '/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
});
How can i get the child view to render and use the/a controller? Haven't even gotten down to the third level.
It should be this.
.state('page.article', {
url: '/page/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
I'm trying to display a nested template using ui-view.
AngularJS routing config
angular.module('myApp')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '',
abstract: true
})
.state('home.default', {
parent: 'home',
url: '/home',
data: {
pageTitle: 'Homepage'
},
views: {
'content#': {
templateUrl: 'app/default/default.html',
controller: 'defaultController',
controllerAs: 'defaultController'
}
}
})
.state('default.subview', {
parent: 'default',
url: '/default/subview',
data: {
pageTitle: 'Homepage - subview'
},
views: {
'content#': {
templateUrl: 'app/subview/subview.html',
controller: 'subviewController',
controllerAs: 'subviewController'
}
}
})
;
}]);
Home: /#/home
<!-- this URI should be #/home -->
<h2>Homepage</h2>
<select>
<option>Subview</option>
</select>
<hr>
<!-- nested subview -->
<div ui-view=""></div>
Subview: /#/home/subview
<h2>Subview</h2>
So basically, I want the parent view (home) and subview's content to be included when I visit (/#/home/subview). However, only the subview content is being displayed.
Any tips on how to correctly utilize ui-view and nested subviews in AngularJS?
Your subview has to be a child of home and you set the subview with 'content#' to an defined ui-view wich replaces your view from home.
And I edited some copy paste issue since it looks like your home route was called default before
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract: true,
template: '<ui-view/>'
})
.state('home.default', {
url: '/home/default',
data: {
pageTitle: 'Homepage'
},
views: {
'': {
templateUrl: 'home.html',
controller: 'defaultController',
controllerAs: 'defaultController'
}
}
})
.state('home.subview', {
parent: 'home',
url: '/subview',
data: {
pageTitle: 'Homepage - subview'
},
views: {
'': {
templateUrl: 'subview.html',
controller: 'subviewController',
controllerAs: 'subviewController'
}
}
});
}]);
Edit:
I created a Plunker with an working configuration, there was some more issues with that abstract home state (I never get it to work as expected) but if you click the links everything appears as expected.
Plunker
There really is no need for the views section if you have only one ui-view
angular.module('myApp')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '',
abstract: true,
template: '<ui-view></ui-view>'
})
.state('home.default', {
// parent: 'home', // No need to set parent if you already prefixed state name
url: '', // The default subview of an abstract view should have '' for url
data: {
pageTitle: 'Homepage'
},
templateUrl: 'app/default/default.html',
controller: 'defaultController',
controllerAs: 'defaultController'
})
.state('home.default.subview', {
// parent: 'default', // No ned for parent
url: '/subview', // Only pu the part of the url here that is added to the parent'ls url
data: {
pageTitle: 'Homepage - subview'
},
templateUrl: 'app/subview/subview.html',
controller: 'subviewController',
controllerAs: 'subviewController'
})
;
}]);
In addition I've also changed the ui-sref in index.html
<a ui-sref="home.default.subview">Subview Route</a>
And the ui-view in home.html
<!-- nested subview -->
<ui-view></ui-view>
Check this plunker:
https://plnkr.co/edit/vEDYvXhp5mNjVT0yLRJN?p=preview
Im transitioning from one state to another using $state.go() like below:
$state.go('menuItem.list');
This causes following error.
Could not resolve 'menuItem.list' from state 'branches.view'
Below are the state providers for menuItem and branch modules.
module : branch
.state('branches', {
abstract: true,
url: '/branches',
template: '<ui-view/>'
})
.state('branches.list', {
url: '',
templateUrl: 'modules/branches/client/views/list-branches.client.view.html',
controller: 'branchesListController',
controllerAs: 'vm'
})
.state('branches.view', {
url: '/:branchId',
templateUrl: 'modules/branches/client/views/view-branch.client.view.html',
controller: 'branchesController',
controllerAs: 'vm'
})
module : menuItem
.state('menuItems', {
abstract: true,
url: '/menuItems',
template: '<ui-view/>'
})
.state('menuItems.list', {
url: '',
templateUrl: 'modules/menuItems/client/views/list-menuItems.client.view.html',
controller: 'menuItemsListController',
controllerAs: 'vm'
})
This way you can all modules in new module file
angular.module('branches.modules', [
'branches', 'branches.list', 'branches.view', 'menuItems','menuItems.list'
]);
and add that in your main app.js or app.module.js
angular.module('app', ['ui.router', 'branches.modules']);
yo can use code below :
module : branch
.state('branches', {
abstract: true,
url: '/branches',
template: '<ui-view/>'
})
.state('branches.list', {
url: '',
views: {
templateUrl: 'modules/branches/client/views/list-branches.client.view.html',
controller: 'branchesListController',
controllerAs: 'vm'
}
})
.state('branches.view', {
url: '/:branchId',
views: {
templateUrl: 'modules/branches/client/views/view-branch.client.view.html',
controller: 'branchesController',
controllerAs: 'vm'
}
})
module : menuItem
.state('menuItems', {
abstract: true,
url: '/menuItems',
template: '<ui-view/>'
})
.state('menuItems.list', {
url: '',
views:{
templateUrl: 'modules/menuItems/client/views/list-menuItems.client.view.html',
controller: 'menuItemsListController',
controllerAs: 'vm'
}
})
you must use views in state
Good Luck
I tryed simple layout but it seems nothing gets render. Layout.html is being loaded and that is all. There are no errors in console.
This is part of my config file
$stateProvider
.state('layout', {
url: '',
abstract: true,
templateUrl: viewsRoot + "layout.html",
controller: 'LayoutController',
})
.state('layout.sidebar', {
abstract: true,
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController'
})
.state('layout.mainview', {
abstract: true,
templateUrl: viewsRoot + "container.html",
})
.state('layout.mainview.object-details', {
url: '/object-details',
templateUrl: viewsRoot + "object-details.html",
controller: 'ObjectDetailsController'
})
.state('layout.mainview.home', {
url: '/',
templateUrl: viewsRoot + "home.html",
controller: 'HomeController'
})
$urlRouterProvider.otherwise('/');
This is layout.html:
<div ui-view="sidebar">
</div>
<div class="page-content-wrapper">
<div class="page-content" style="min-height: 1227px">
<!-- END PAGE SPINNER -->
<div ui-view="mainview">
</div>
<!-- END PAGE CONTENT-->
</div>
</div>
This is container.html
<ui-view></ui-view>
Should I use nested views instead of nested states?
You need to identify what renders where. You have two areas, "siderbar" and "mainview", but you are not identifying what template goes to what view in your state configs
$stateProvider
.state('layout.home',{
views: {
'mainview': {
templateUrl: '...',
controller: ...
},
'siderbar': {
templateUrl: '...',
controller: ...
}
}
})
See https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views for more information