I have an issue where I want to have a parameter on the route url e.g
$stateProvider.state('/someRoute', {
url: '/:path',
.....
});
$stateProvider.state('/contact', {
url: '/contact',
.....
});
But if I do that then other pages get misinterpreted as being part of this. for example /contact url thinks that "contact" is the param and not the page.
Is there a way around this or do I need to have a sub-page e.g /something/:path?
The issue is that currently due to the order of the states, your first state will capture all urls as it's expecting some parameter.
/contact satisfies the /:path criteria.
Either move the /:path as the last state. or create a /something/:path
Related
Actually my angularjs routing is working fine, but now I want to route to different route from the searched url.
ex.:
I have two urls that are:
/en/Feedback
/ar/Feedback
These two url should route to the same route below.
.when("/Feedback", {
templateUrl: "/Scripts/Cms/Feedback.html",
controller: "FeedBackCtrl"
})
And if possible, I want to get 'en' or 'ar' to a variable before $routeProvider route to the url.
note: en and ar cannot be passed as parameter. It should be in the same format as given in url.
finally i found a way to change the url. I will not prescribe that way...
i just modified the "angular-route.js".
I just Edit the url before route checking from our set of routes we defined, has happen from "route.js"
I have a state that is the entry point for my application. However, the entry page requires a date parameter in order to show a list. It is configured to use the current date if no date was provided in the URL.
Technically, everything works. The default value is passed to the controller and the controller is able to use it to load some data, but it won't show the date in the URL.
This is the state configuration:
$stateProvider.state('openJobs', {
controller: 'openJobsCtrl as openJobs',
params: {
shippingDate: {
value: getFormattedCurrentDate(),
squash: false
}
},
templateUrl: 'openJobs.html',
url: '/openJobs/:shippingDate'
});
I have created a working plunkr to demonstrate the behaviour (run in new window to see URL changes). The default value will show in the URL if I create an ui-sref link to openJobs. However, if someone were to open the page directly by entering http://host.com/openJobs/ the default value will be used in the background, but not shown in the URL.
How can I achieve that, no matter how the state was opened, the default value will show in the URL?
You can redirect the incoming path using urlRouterProvider with default date appended to it. urlRouterProvider will update the browser location.
$urlRouterProvider.when("/openJobs/", function() {
return "/openJobs/" + getFormattedCurrentDate();
});
If a state is matched against state name (through ui-sref or $state.go()), browser location will be updated with url path.
Whereas, if a state is matched against url path, the browser location will not be updated because it already matched the url. That's why you need to use $urlRouterProvider in your case to append the date.
I am facing a url structure problem using ui-router in AngularJS. I want to have first level SEO friendly url structure like this:
https://people-profile.com/mike-david-tringe
So I can grab the SEO name "mike-david-tringe" via stateParam and use it to find data in database and populate the page.
The $stateProvider has code like this:
$stateProvider
.state('people', {
url: '/:nameUrl',
templateUrl: 'app/frontend/page.tmpl.html',
params: {
nameUrl: {squash: true},
},
controller: "PageController",
controllerAs: 'vm'
})
.state('admin', {
url:'/admin/:userId',
templateUrl:'app/frontend/admin/admin.html',
controller:'AdminController',
controllerAs: 'admin'
})
With above code, I can have https://people-profile.com/mike-david-tringe working with nameUrl = mike-david-tringe and I got SEO friendly first level url link. mike-david-tringe is SEO friendly and most important keywords beside the domain name.
But with this structure, https://people-profile.com/admin/ or https://people-profile.com/login/ will not work now. Since my controller try to grab admin as nameUrl and looking for data. And admin is not a nameUrl so my database will return null, the app will fail.
In short, stateParam nameUrl will grab anything after "/" so the url setting will think admin and login is :nameUrl but in fact, it is not.
So how do I structure my app ui-router structure to have SEO friendly url like https://people-profile.com/mike-david-tringe but when url is https://people-profile.com/admin/, it will load admin.html template and use AdminController instead as I defined in $stateProvider?
All you need to do is swap the order of them. The router will check in order of definition, so if /:nameUrl comes before /admin it will trigger first. But if you put /:nameUrl last then it will trigger on any url that hasn't already triggered something above.
A word of warning however. Moving between two urls that trigger the same state (like two urls that both hit /:nameUrl in your case) will not reload the controllers on the page. Only changing state will do that. There are options to change this behaviour, but it has always been very buggy for me.
I have a state route as follows :
.state("hospitals",
{
url: "/hospitals/:categoryName/:providerName",
templateUrl: "app/components/hospital/views/hospitals.html"
})
In general,hospitals pages have all the hospitals with all categories and all provider(hospital) group. In addition, from home page we can navigate to the hospitals page using the category or provider which will show hospitals based on category and provider group respectively. For these, I navigate using the following directives inside anchor tag.
ui-sref="hospitals({categoryName: category.KeyName})"
ui-sref="hospitals({providerName: provider.KeyName})"
So, this introduces a dirty slash when navigating with providerName.
hospitals//somehopitalNme
It is fine with category.
coupons/heart/
Once inside the hospitals page, I can search using category or providerName and get the list of hospitals. I was thinking of modifying the url in these searches(using ui-sref for the same page) since it makes sense to show the url matching to the search. I land in a trouble here. The search is a common search and can match either providerName or category or even a text as well. In this case, how can I navigate or how to use s-ref. I am fine with not using ui-sref and just going to the api or getting the data and updating the results which is easily achievable. However, I prefer the change of url since it shows what we are looking for.
So, now I understand that the state route which I provided is not suitable.
Please provide me an approach as to how to do it.
I was thinking of adding another state called "search" for this, which makes sense. But the templateUrl for this will be the same. Please suggest if I am in right direction or not.
Check this for detailed explanation and working example
Angular UI-Router more Optional Parameters in one State
we can use so called squash setting of the params : {} object:
.state("hospitals",
{
url: "/hospitals/:categoryName/:providerName",
templateUrl: "app/components/hospital/views/hospitals.html",
params: {
providerName: { squash: true },
categoryName: { squash: true },
},
})
Also check these:
Angular js - route-ui add default parmeter
Option url path UI-Router
I have one exception to an otherwise dynamic route:
.state('item', {
abstract: true
})
// This is the 'hardcoded' static route
.state('item.static', {
url: '/static'
})
.state('item.content', {
url: '/:para'
})
As you can see the first child state has a fix url route. Then if the url is not exactly this fix word I want the routing to happen with child state 2.
It works when I first hit child state 1. However when I refresh the browser the views are not longer mapped and the ui-view stays empty. If I refeesh one of the dynamic routes it works.
I left out view and controller setup intentionally to make it look simpler.
Have you tried a regex pattern to rule out the "static" route for the para route? Theoretically, you should be able to use ruling out the "static" route and ui-router will pick up the dynamic route at that point.
Ui-Router Documentation
From Documentation:
// will only match a contactId of one to eight number characters
url: "/contacts/{contactId:[0-9]{1,8}}"