I want to define any in url whit angular ui-router
in angular self router we can define a route like this:
$routeProvider.when('/:params*', {
template: 'test',
})
and when call this url
/a/b/c
it's work
how can do same in angular ui-router
For eager matching of URL parameters, use:
$stateProvider
.state('all', {
url: "/*params",
template: "test"
});
//OR
$stateProvider
.state('all', {
url: "/{params:.*}",
template: "test"
});
From the Docs:
URL Regex Parameters
Examples:
'/files/{path:.*}' - Matches any URL starting with '/files/' and captures the rest of the path into the parameter 'path'.
'/files/*path' - Ditto. Special syntax for catch all.
— UI-Router Wiki URL-Routing regex parameters
Related
I have multiple states in my app, which i define using a $stateProvider like this:
.state(STATES.s1,
{
url: "/?refnr"
template: ...
})
.state(STATES.s2,
{
url: "/?details&searchID&pos"
template: ...
})
Now i want to have a third state, where i want to catch all the urls containing a specific url param, which includes an exclamation mark. This is the parameter 'emp!' and looks like this in url with a value ".../?emp!=45".
I defined this as my state:
.state(STATES.s3,
{
url: "/?emp!"
template: ...
})
Does not work. It does not match the url.. I also tried to use a $urlMatcherFactoryProvider and supply a compiled matcher as url, but same result.
I also tried to use the encoded version of ! in my state url definition like this:
url: "/?emp%21"
still same result.
Why is that so? How can i match these urls?
You can use a trick of fake parameter as this sample and this will handle all your urls ending with "/?emp!
.state(STATES.s3,
{
url: "/:anyurl/?emp!"
template: ...
})
Try something like this. The expression between curly braces is a regular expression matching your criteria.
.state(STATES.s3, {
url: "/{^\?.*emp!$}"
template: ...
})
That regex will match urls that start with the ?, ends with ! and has emp before !. like:
?hemp!
?param=value&temp!
I am running into trouble understanding how you can correctly pass parameters using AngularJS.
This is the code I was trying to use in my app.js file for the nested views, however, the nest state never properly renders.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('news', {
url: '/news',
templateUrl: 'templates/news.html',
controller: 'NewsCtrl'
})
.state('news.id', {
url: '/news/:id',
templateUrl: 'templates/news.id.html',
controller: 'NewsCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/news');
})
It will try and change the url to #/news/news/:id versus just #/news/:id.
And if I try and change the path to just be the #/news/:id, then the pages do not render correctly.
What is the best approach to achieve these nested views with parameters?
According to ui-route wiki:
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.
If you want to have absolute url matching, then you need to prefix
your url string with a special symbol '^'.
So in your case, you should try
.state('news.id', {
url: '^/news/:id',
templateUrl: 'templates/news.id.html',
controller: 'NewsCtrl'
});
angular.module('articles').config(['$stateProvider',
function($stateProvider) {
$stateProvider.
state('viewArticle', {
url: '/articles/:articleId',
templateUrl: 'modules/articles/views/view-article.client.view.html'
});
}
]);
my angular UI router is like this. I want to substitute the articleId stateparams as article title for SEO purposes.
it's not important what is going to be written in the url address. you can just use this style url: '/articles/:articleTitle' and simply use a variable which contains your article title
I want to show 404 error page, but also I want to save wrong url in location.
If I'll do something like that:
$urlRouterProvider.otherwise('404');
$stateProvider
.state('404', {
url: '/404',
template: error404Template
});
url will change to /404. How I can show error message on wrong urls without changing actual url?
There is solution for this scenario. We'd use 1) one ui-router native feature and 2) one configuration setting. A working example could be observed here.
1) A native feature of ui-router state definitions is:
The url is not needed. State could be defined without its representation in location.
2) A configuration setting is:
otherwise() for invalid routes, which parameter does not have to be a string with default url, but could be a function as well (cite):
path String | Function The url path you want to redirect to or a function rule that returns the url path. The function version is passed two params: $injector and $location
Solution: combination of these two. We would have state without url and custom otherwise:
$stateProvider
.state('404', {
// no url defined
template: '<div>error</div>',
})
$urlRouterProvider.otherwise(function($injector, $location){
var state = $injector.get('$state');
state.go('404');
return $location.path();
});
Check that all in this working example
As of ui-router#0.2.15 you can use $state.go() and send option not to update the location:
$urlRouterProvider.otherwise(function($injector) {
var $state = $injector.get('$state');
$state.go('404', null, {
location: false
});
});
I have the following routeProvider configured:
angular.module('myModule').config ['$routeProvider', (provider) ->
provider
.when '',
templateUrl: '/templates/dashboard.html'
.when '/some_path/:some_param',
templateUrl: '/templates/dashboard.html'
And the following in a wrapping statically served template:
I also have a templates/dashboard.html appropriately defined.
When I navigate to the url, the initial page loads, however a # is not postpended on the URL, which then results in errors when I try to rewrite the URL in a controller with $location.path('fooPath').
Specifically $location.path('fooPath'), changes the URL to current_dashboard_path/#/ and reloads, while what I was expecting is for the URL to be set to:
current_dashboard_path/#/, an then location('fooPath'), to change that to current_dashboard_path/#/fooPath
Some additional context: I want to use this so that I can then use the $location service to change the url without reloading the page thus
Question is, how can I force Angular to postpend a # when an ng-view is populated.
I was missing the following line in my routeProvider:
.when '/',
templateUrl: '/templates/dashboard.html'
Additionally, the blank route
.when '',
templateUrl: '/templates/dashboard.html'
Needed to be removed
Then the way to rewrite the URL without reloading the page is the following in the controller:
lastRoute = route.current
scope.$on('$locationChangeSuccess', (event)->
route.current = lastRoute
)