This is the configuration i'm using for my ui-router:
.state('parent', {
url: '/child1'
controller: ParentController,
abstract: true
})
.state('parent.child1', {
url: ''
})
.state('parent.child2', {
url: '/child2'
})
What I want to acheive ?
I want a /child1 url that I wanted to be default so I made the parent as abstract with child state url as 'empty'.
So I want that when user visits child2 state, the parent url gets replaced rather than appending it. How can i achieve that ?
If I understand you right, (please correct me if I'm wrong) you are looking to setup a routing service to achieve the following routes:
/, /child1 and /child2 and you want all states to be bound with ParentController
If that is correct you can achieve this with the following:
.state('parent', {
url: '/',
controller: ParentController,
})
.state('parent.child1', {
url: '^/child1'
})
.state('parent.child2', {
url: '^/child2'
})
For example if we were running https://localhost:3000 we could navigate as such:
parent or / would give us https://localhost:3000/
parent.child1 or /child1 would give us https://localhost:3000/child1
parent.child2 or /child2 would give us https://localhost:3000/child2
The ParentController would be invoked by all states.
Related
I'm trying to create a structure for creating, reading, updating and destroying that consists on indenting params:
/items/create
/items/1/view || /items/1/edit || /items/1/remove
The states for those are like this in $stateProvider:
.state('items.create', {
url: '/create',
templateUrl: 'item/create.html'
})
.state('items.item', {
abstract: true,
url: '/:_id',
templateUrl: 'item/itembody.html'
})
.state('items.item.view', {
url: '/view',
templateUrl: 'item/item.html'
})
.state('items.item.edit', [... and so on ...]
I'm also redirecting /1 to /1/view using $urlRouterProvider:
.when('/items/:_id', '/items/:_id/view');
Problem is when trying to reach /items/create I'm being redirected to /items/create/view. Is there a way to protect or make an exception to this word so I can reach its URL?
I think your problem is that the urls are being combined, like so:
Appended Routes (default)
When using url routing together with nested states the default behavior is for child states to append their url to the urls of each of its parent states.
$stateProvider
.state('contacts', {
url: '/contacts',
...
})
.state('contacts.list', {
url: '/list',
...
});
So the routes would become:
'contacts' state matches "/contacts"
'contacts.list' state matches "/contacts/list". The urls were combined.
Try using different state names.
This is a syntax error, change this url: '/item/:_id.view' for this url: '/item/:_id'.
we have three pages in our app which can be classified under one parent page as below.
1)Parent
I)Child1
II)Child2
III)ChildIII
.state('Parent', {
url: '/Parent/:ID',
templateUrl: 'parent.html',
controller:'parentcontroller'
})
.state('Parent.Child1', {
url: '/Child1',
templateUrl: 'Child1.html'
})
.state('Parent.Child2', {
url: '/Child2',
templateUrl: 'Child2.html'
})
.state('Parent.Child3', {
url: '/Child3',
templateUrl: 'Child3.html'
})
sometimes we need to call this child pages sequentially one after another from child1 to child3 without parameters and sometimes we need to call those child pages individually but requests needs to go through parent controller so that we do not have to instantiate new controller instance for each one of those child pages. to accomplish this i'm using href but i want to be able to call parent and child with out passing any params.
working href ex: <a href='../Parent/{{ID}}/child1'
Not working ex: <a href='../Parent/child1'
can anyone please guide me to accomplish this?? Thanks!!
solution:
.state('Parent', {
url: '/Parent/:ID',
templateUrl: 'parent.html',
controller:'parentcontroller',
params:{ID:null}
})
.state('Parent.Child1', {
url: '/Child1',
templateUrl: 'Child1.html'
})
.state('Parent.Child2', {
url: '/Child2',
templateUrl: 'Child2.html'
})
.state('Parent.Child3', {
url: '/Child3',
templateUrl: 'Child3.html'
})
From HTML:<a ui-sref="(Parent.Child1{ID:{{value}}})">Home</a>
i wasn't aware that if we use SREF as above and controller declared at parent value can still read the params but gave a shot and it worked!!
Yes, you can do this. First you should define your params in your .state(), if you are passing params to child1 state, then it should defined by like below,
.state('Parent.Child1', {
url: '/Child1',
templateUrl: 'Child1.html',
params: {
paramName: '' //here paramName can be named by your wish.
}
})
after this you should pass the call the state and pass param in ui-sref like below,
<a ui-sref="Parent.Child1({paramName: scopeName})">Click</a>
here scopeName is the name of the scope which have the value to param, if you want hard code a string, then you can pass in qoutes, ({paramName: 'some string'})
I'm a little confused about what you're asking, but the way it sounds is that all the pages use the same controller. If that's the case, just let them. Controllers will eventually be destroyed when they are no longer needed, so instantiating a new one is fine. If you're routing to a new page, it's going to look for the accompanying controller.
--Edit based on OP's comment--
If the goal is to only get data once, you can store that in a service. Every service is a singleton, so if you grab data and save it in your service, you can inject that service elsewhere and have access to it.
I have app with many main states, one of them is user profile:
$stateProvider.state('profile', {
url: '/profile/',
templateUrl: 'profile/profile.html',
controller: 'Profile',
});
But this is just an container for nested pages with different profile settings. It's template only contains main menu and ui-view for nested states. Controller is only for that menu handling.
One of nested views should be default url and have same URL as parent, so there shouldn't be any suffixes added into url, but I can't achieve that.
Here's what I tried:
$stateProvider.state('profile.details', {
url: '',
templateUrl: 'profile/details.html',
controller: 'ProfileDetails',
});
this is not working at all, at url /profile/ only menu appears and an empty ui-view element. Second approach:
$stateProvider.state('profile.details', {
url: '/',
templateUrl: 'profile/details.html',
controller: 'ProfileDetails',
});
This matches on url /profile// (with 2 slashes at end). At url /profile/ there is still menu and empty ui-view element.
How can I achieve that result? Is this even possible using angular-ui-router?
Make your parent state abstract. This will prevent from going into that state, and force to go to child states only. Abstract states are perfect as templates for child ones. Also get rid of url:
$stateProvider.state('profile', {
abstract: true,
templateUrl: 'profile/profile.html',
controller: 'Profile',
});
Now for your child state define absolute URL
$stateProvider.state('profile.details', {
url: '^profile',
templateUrl: 'profile/details.html',
controller: 'ProfileDetails',
});
That should work.
I am using Angular UI Router , and I have setup two routes
One for all the content pages like /about, /terms etc
$stateProvider.state('sidebarPages.page', {
url: ':slug',
views : {
...
}
});
And now I want to add another for other pages like our-team
$stateProvider.state('sidebarPages.page', {
url: 'our-team',
views : {
...
}
});
The problem is that the second state is ignored when I go to page /our-team and the first one is executed instead which is :slug , and could accept everything.
Is there a way that I can create these two states, one for specific pages , and one that will accept everything and put it in slug param , and based on param I can then bring it from DB.
I created working plunker here. The order decides. Create states with known names, then the one with the slug:
// States
$stateProvider
.state('home', {
url: "/home",
templateUrl: 'tpl.html',
})
.state('other', {
url: "/other",
templateUrl: 'tpl.html',
})
.state('slug', {
url: "/:slug",
templateUrl: 'tpl.html',
})
;
Check it here
I have been struggling for sometime for following scenario to work right.
I am using ui-router with angularjs and I need something like:
Parent state : .state('parent', { url: '/parent/:someUserId' }
Child state as : .state('parent.child', { url: '/child' }
My requirement is child state should take route such as 'parent/:someUserId/child'
How would I be able to achieve this?
It should be simple as this:
state('parent', {
url: "/parent/:someUserId",
templateUrl: "parent.html"
}).
state('parent.child', {
url: "/todo",
templateUrl: "parent/child.html"
}).
reference: https://github.com/angular-ui/ui-router