This is part of my state provider:
$stateProvider.state('root', {
url: '',
abstract: true,
templateUrl: viewsRoot + "layout.html",
controller: 'LayoutController',
views: {
'container': {
templateUrl: viewsRoot + "container.html",
},
'sidebar': {
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController'
}
}
})
.state('layout.sidebar', {
abstract: true,
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController'
})
.state('layout.container', {
abstract: true,
templateUrl: viewsRoot + "container.html",
// controller: 'ObjectDetailsController'
})
.state('root.object-details', {
url:'object-details/:objectId',
templateUrl: viewsRoot + "object-details.html",
controller: 'ObjectDetailsController',
Some content on sidebar should change depending on objectId. I can access $stateParams.objectId in ObjectDetailsController but I would like to access them in sidebar controller. Maybe pass them to parent, and then parent should pass value to sidebar.
Did you try to pass the data via the params options in $stateProvider?
The API can be found here.
So your code can look like this:
.state('layout.sidebar', {
abstract: true,
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController',
params: {id: 'value'}
})
You can pass the param inside the view:
<a ui-sref="layout.sidebar({id: 'object.Id'})></a>
Related
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',
}
}
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 have state as follow. I can navigate from app to app.child1. But I cannot navigate from app.child1 to app.child1.child2. There is no error in browser console. Do note that I am developing an ionic application but i dont think that this is ionic issue.
app.state('app', {
url: '/app',
abstract: true,
templateUrl: '',
controller: ''
})
.state('app.child1', {
url: '/app',
views: {
'menuContent': {
templateUrl: '',
controller: ''
}
}
})
.state('app.child1.child2', {
url: '/app/child1/child2',
views: {
'menuContent': {
templateUrl: '',
controller: ''
}
}
})
Navigation:
<button ui-sref="app.child1.child2">Change Page</button>
There is a working plunker
There are few issues with the state definition, which are covered in comments below:
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'app.tpl.thml',
controller: 'appCtrl'
})
.state('app.child1', {
// child1 should have url part /child1
// while the /app is inherited from parent
//url: '/app',
url:'/child1',
views: {
'menuContent': {
templateUrl: 'child1.tpl.html',
controller: 'child1Ctrl'
}
}
})
.state('app.child1.child2', {
// all parts are inherited from parents
// so just /child2 is enough
//url: '/app/child1/child2',
url: '/child2',
views: {
// we target named view in a grand parent
// not in parent, we need to use the absolute name
// 'menuContent': {
'menuContent#app': {
templateUrl: 'child2.tpl.html',
controller: 'child2Ctrl'
}
}
})
These links will work now
<a href="#/app/child1">
<a href="#/app/child1/child2">
<a ui-sref="app.child1">
<a ui-sref="app.child1.child2">
Check it in action here
Your states don't have a template (templateUrl: ''). They should have a template with ui-view directive where it's child state can be injected.
I am using ui-router and my states are:
$stateProvider.state('app', {
url: "/app",
templateUrl: "assets/views/app.html",
abstract: true
}).state('app.dashboard', {
url: "/dashboard",
templateUrl: "assets/views/pages_timeline.html",
title: 'Dashboard',
controller: 'TimelineCtrl'
}).state('app.user.services', {
url: "/user/services",
templateUrl: "assets/views/user_services.html",
title: 'Service Integrations'
})
.state('login', {
url: '/login',
template: '<div ui-view class="fade-in-right-big smooth"></div>',
abstract: true
}).state('login.signin', {
url: '/signin',
templateUrl: "assets/views/login_login.html",
controller: 'AuthenticationCtrl'
}).state('login.forgot', {
url: '/forgot',
templateUrl: "assets/views/login_forgot.html"
}).state('login.registration', {
url: '/registration',
templateUrl: "assets/views/login_registration.html"
})
I am currently in the app.dashboard state, and I have a link:
<a ui-sref="app.user.services">
Service Integrations
</a>
However, when I click it, I get an error: Error: Could not resolve 'app.user.services' from state 'app'
What am I doing wrong?
The dot . notation is used to specify a parent relationship in ui-router, so the parent of state dashboard is state app.
With app.user.services there is no parent state app.user. So you need to define it (you can make it abstract):
.state("app.user", {
abstract: true,
template: "<div ui-view></div>"
})
I have states defined as below in my angularjs app using angular ui router state provider. And, I would like to define multiple states with the same configuration ie. with the same template and controller.
$stateProvider
.state('parent', {
templateUrl: 'parent.html',
abstract: true,
parent: 'apm'
})
.state('parent.list', {
abstract: true,
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('parent.list.closed', {
url: '/q',
templateUrl: 'closed.html'
})
.state('parent.list.details', { // would like to have same template, controller on different state parent.details without list
url: '/:id/:name',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
})
.state('parent.list.details.data', { // would like to have same template, controller on different state parent.details.data without list
url: '/details',
views : {
'view1' : {
templateUrl : 'view1.html'
},
'view2' : {
templateUrl : 'view2.html',
controller : 'View2Ctrl'
},
'view3' : {
templateUrl : 'view3.html'
},
'view4' : {
templateUrl : 'view4.html'
}
}
})
Is it possible to do something like
.state(['parent.list.details', 'parent.details'], {
url: '/:id/:name',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
})
Any help or suggestions?
Each state needs to be defined in it's own .state() method. You will run into multiple problems trying to do it the way you listed above. Most importantly would be the url.
You can simply do this:
.state('parent.list', {
url: '/list',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
.state('parent.list.details', {
url: '/:id/:name',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
})
While the code is not condensed or efficient in the sense you have to declare the controller and partial used on each state, it is necessary because each state needs its own .state() method
I wanted the same and made it like this:
//add a new Function to the object $stateProvider
$stateProvider.states = (statesArr, obj) => {
for (var i in statesArr) {
var state = statesArr[i];
$stateProvider.state(state, obj);
}
return $stateProvider;
};
//use the new function
$stateProvider
.states(["main", "main.test"], {
url: '/main',
templateUrl: 'modules/ViewContainer.html',
controllerAs: 'currentCtrl',
controller: 'MainCtrl'
})