How to create dynamic route when using ui router,
if we define:
$stateProvider.state('page1', {
url: '/page1/:id',
views:{}
}
It works fine,
But if we try to add dynamic id first and then page name then it gives error,
ERROR:
$stateProvider.state('page1', {
url: '/:id/page1',
views:{}
}
How to resolve this issue, can anyone help me into this?
Ok so based on your comment you should use something like this:
$stateProvider
.state('page1', {
url: '/:id/page1'
});
The part above was just fine. But in your link you should use something like this:
<a ui-sref="page1({id: '1234'})">page1</a>
You can also set a variable to the ui-sref like:
<a ui-sref="page1({id: page.id})">page1</a>
Related
I need to dynamically construct a link to another route on an angular app using ui-sref with both params and query params. Example:
<a class="clr-secondary" ui-sref="app.topic.individual.conversation.single
({cid:comment.activityItemId, cid:itemId})">{{comment.subject}}</a>
This constructs a link that looks something like
www.website.com/pass/11/conversations/178
I need to also add a query parameter to the end of this so the entire url will look like
www.website.com/pass/11/conversations/178?comment_id=126
Add the query parameters to the url in the ui router config:
.state('yourstate', {
url: '/pass/:activityId/conversations/:conversationId?comment_id',
templateUrl: 'path/to/template',
controller: 'YourController'
});
Then pass the comment_id just like you pass the other params:
<a class="clr-secondary" ui-sref="app.topic.individual.conversation.single
({activityId:comment.activityItemId, conversationId:itemId, comment_id: 126})">{{comment.subject}}</a>
I am trying to build a simple app, which goes the following way:
I have 2 menu items in the navbar: home and contact.
The home should be a unique URL only once from the server, at initialisation, read from a QR code (i got this covered, that is no problem to me) and the contact should always be the same.
I got the contact done in the following way:
$stateProvider.state('contact', {
url: '/contact',
templateUrl: 'src/views/contact.html',
controller: 'contactController'
})
The problem is with the home, which should keep the unique URL received by the server. How should i write the state for that one?
.state('home', {
url: '/:uid',
templateUrl: 'src/views/home.html',
})
Also, the home should keep it's unique url generated by the server after refresh and while navigating from contact to home.
In the HTML i would have something like
<a ui-sref="home({uid: --some dynamic uid?--})">Home</a>
this is the part which also requires help.
Set the home state to
.state('home', {
url: /{uid},
templateUrl: 'src/views/home.html',
})
and you could grab the parameters by injecting $stateParams into the controller. $stateParams.uid would return the parameters and store that in local storage or cookies.
Check this link out
https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
UPDATE:
for example, this is the sample controller that is attached to the home page
app.controller('homeCtrl', function($stateParams) {
var id = $stateParams.uid; //this is how you retrieve the uid
});
by going to your home page e.g. http://www.example.com/abcd12345, the above $stateParams.uid would return abcd12345
Now to set the url. simply use ui-sref instead of href on the <a> tag. ui-router will automatically generate href for you.
e.g.
<a ui-sref="home({uid:'abcd12345'})">Home</a>
You have to create a custom provider and inject it into the config.
eg:- .config($stateProvider, $urlRouterProvider,yourprovider) .
I am not sure about this. But please check this way too..
I am writing a CRUD app with AngularJS + UI Router.
I want to be able to parse the current location in the browser URL and determine if a ui-router state should be applicable for the current url.
In these sample routes, is there some way to do the if and unless clauses?
(url in browser address bar is http://example.com/notes/1/edit_me)
$stateProvider.state("root", {
url: "",
unless: $location.matches(/\edit_me/)
})
$stateProvider.state("edit", {
url: "/edit",
if: $location.matches(/\edit_me/)
//
})
UPDATE 1
The reason I want to do the above:
Say I am at http://example.com/notes. The routes is
$stateProvider.state("root", {
url: "",
})
However, with the same above ui.route state, when I am at url http://example.com/notes/edit, the root is now "/notes/edit" instead of "/notes"
UPDATE 2
#adam, more explanation of what I am trying to accomplish:
I will try to explain: in your code, for your home state, the (ui.router's) url is / (aka hash syntax #!/)
However, the URL in browser address bar looks like http://example.com/notes/ in one case and http://example.com/notes/edit in another case. (note that the URLs do not contain any #! portion since we have just navigated to the page)
Now the home's / is going to match in both cases of above URL.
But since the second URL ends in notes/edit, I want that the home for this URL should be #!/edit, and not #!/.
Basically I am trying to mix server-side rendered pages (/notes and /notes/edit are rendered by server, not AngularJS)
and client side routing so that no matter which URL we are at, the client can figure out which (ui.router) route applies to the current URL.
Make sense?
Sorry i don't really understand your needs but here's an example of use of ui-router:
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/index.html',
controller: 'MainCtrl'
})
$stateProvider
.state('edit', {
url: '/edit',
templateUrl: 'app/edit/edit.html',
controller: 'EditCtrl'
})
$stateProvider
.state('edit.note', {
url: '/note',
templateUrl: 'app/edit/note.html',
controller: 'NoteCtrl'
});
$urlRouterProvider.otherwise('/');
i'm not sure if a copy paste will work, but try to adapt it with your case. Hope it will help.
Edit:
I'm afraid that i can't help you more than that. The design of your app with rendered page without angular sounds really special.
Have you tried the example i provide you? If yes, hav you simply format the url by addind
" #!/ " where you need it.
For example:
$stateProvider
.state('edit', {
url: '#!/edit', //or something like, url:'/#!/edit'
templateUrl: 'app/edit/edit.html',
controller: 'EditCtrl'
});
Check this link also may be it will help you:https://github.com/angular-ui/ui-router/issues/372
ui-sref may help you
But the place to see usefull example for ui-router it's his own doc.
https://github.com/angular-ui/ui-router
and here:
http://angular-ui.github.io/ui-router/site/#/api/ui.router
I am using ui-router to represent states in my AngularJS app. In it I'd like to change the state without changing the URL (basically a "detail view" is updated but this should not affect the URL).
I use <a ui-sref="item.detail({id: item.id})"> to display the detail but this only works if I specify a URL like url: "/detail-:id" in my $stateProvider.
It seems to me that the current state is only defined through the URL.
Just an additional information for new comers to this post:
Declaration of params in a state definition has changed to params: { id: {} } from params: ['id']
So be aware :)
Source: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider
Thanks for your answer, it did help me in the right direction but I'd just like to add a more complete description.
In my specific issue there was a complicating factor because the state I needed to inject a non-URL parameter to was a child state. That complicated things slightly.
The params: ['id'] part goes in the $stateProvider declaration like this:
$stateProvider.state('parent', {
url: '/:parentParam',
templateUrl: '...',
controller: '...'
}).
state('parent.child', {
params: ['parentParam','childParam'],
templateUrl: '...',
controller: '...'
});
And the param name is connected to the ui-sref attribute like this:
<a ui-sref=".child({ childParam: 'foo' })">
And the catch is this:
If the parent state also has a URL parameter then the child needs
to also declare that in its params array. In the example above "parentParam" must be included in the childstate.
If you don't do that then a module-error will be thrown when the application is initialized. This is at least true on the latest version at the time of writing (v.0.2.10).
EDIT
#gulsahkandemir points out that
Declaration of params in a state definition has changed to params: {
id: {} } from params: ['id']
Judging by the changelog, this seems to be the case starting from v0.2.11
Details of params can be found in the official docs
I now figured out, that you need to use the params: ['id'] property of the state in order to have the key not stripped when not using a URL.
I've been trying all day to get the AngularUI Router working with 1.2.0-rc.3, but to no avail. I'm pretty sure it's a bug, as a lot of things have been changed in rc3, but maybe someone has found a workaround for it.
This is what I'm trying to do:
In my app.config()
var login = {
url : '/login',
name : 'login',
templateUrl: 'views/login.html',
controller : 'LoginCtrl'
};
var main = {
url : '/',
name : 'main',
templateUrl: 'views/main.html',
controller : 'MainCtrl'
};
var reportsOverview = {
url : '/reports',
name : 'main.reports',
controller : 'ReportsCtrl',
templateUrl: 'views/main.reports.html'
};
$stateProvider.state(login);
$stateProvider.state(main);
$stateProvider.state(reportsOverview);
When I go to /login, my template gets displayed as expected. When I go to / or /reports however, I see nothing. I've got a <div ui-view></div> in both my index.html and views/main.html file, so that's not the issue.
Anyone out there experiencing the same issue, or what am I doing wrong?
It's hard without being able to see the custom templates, but some things I noticed that you are going to /reports. Urls are additive, so, in your case because the main url is / and your reports url is /reports the actual url you would have to go to is //reports not /reports. Try making your reports url reports and then /reports should work.
I would try to use ui-sref directive to create links on your web page so that you can see what urls the routing is generating for each state and check that it is what you expect.
It would be really helpful if you could include a plunkr that demonstrates the problem you are having.