I need to match a route like this: /route*
I mean, one that matches /route1, /route2, /route999, /routewhatever
I don't want to match /route/whatever. I want that if the user puts anything after the main name it's ignored.
/route* didn't work. Is this possible ?
the only way I see is to use a UrlMatcher
export function wildCardMatcher(url: UrlSegment[]) {
return url.length === 1 && url[0].path.startsWith('route') ? ({consumed: url}) : null;
}
and then
{ matcher: wildCardMatcher, component: HomeViewComponent,}
here's a demo
UrlMatcher in Angular lets you define your own function to match a url to a route.
You could do something like
function wildCardMatcher(url: UrlSegment[]) {
return url[0].path.slice(0,5) === 'route' ? ({consumed: url}) : null;
}
routes = [{
matcher: wildCardMatcher,
component: Whatever
}]
https://angular.io/api/router/UrlMatcher
Related
I was wondering if I can do the following with a ternary operator instead of if-else.
if (myPath === '/') {
next({ path: '/articles', query: { page: 1 } });
} else {
next();
}
What I want to do is to replace all of that with just one line:-
next(myPath === '/' ? { path: '/articles', query: { page: 1 } } : nothing);
If I'm going in the right direction then it just mainly boils down to passing 'nothing' to the next function. This is a code sample from the VueJS router navigation guard by the way if it's any help.
Is something like this possible?
i have this senario :
when use register in site i send a email to that email . in that have a link and must click on that link for verify registertion .
that route have this information :
http://localhost:4200/auth/verify-checking?email={0}&code={1}
and i create this route :
{ path: 'verify-checking', component: CheckingVerifedComponent },
but i have tow problem :
A : can not find the params :
i use this code but not worked :
this.route.params.subscribe(params => {
this.sendModel.email = params['email'];
this.sendModel.code = params['code'];
});
B : it show me this error :
Error: Cannot match any routes. URL Segment: 'auth/verify-checking%3Femail%3Dkianoushvv123456#gmail.com&code%3DCfDJ8PQkunuAtiZOulV9qQ%252F3astuT%252Fa2VVXDAhxbE%252Fpg%252FfmcpXTcFXPR3gunRzs443wcxrxxWefG3PHVqmdbJL5GZX8dwgI0UuZTVDW%25206U2hSNBTQ1X7xT3YHh%2520%2520ym3%252FP3rlinriN4vgxJEMbmqPKQYe7XsnjcjYCtNvHY141nk%252FEYkoj6FZkEPuVdZO5qH%2520jNyRXA%253D%253D'
how can i solve this problems ?????
http://localhost:4200/auth/verify-checking?email={0}&code={1}
queryParam is used for ?email={0}&code={1}
this.route.queryParams.subscribe(params => {
this.sendModel.email = params['email'];
this.sendModel.code = params['code'];
});
You may consider this:
Route
{ path: 'verify-checking/:email/:code', component: CheckingVerifedComponent }
Extracting the Parameters
this.sendModel.email = this.route.snapshot.paramMap.get('email');
this.sendModel.code = this.route.snapshot.paramMap.get('code');
I want to have a url like this /restaurants/:pageNumber and I want /restaurants to assume the pageNumber parameter is 1.
Here is my Router.js :
Router.map(function() {
this.route('restaurants', function() {});
this.route('restaurants', { path: '/restaurants/:pageNumber' }, function() {});
});
If it remove the function() {} for it, I just get a blank page with no errors in the console for /restaurants/1
My routes/restaurants/index.js :
export default Ember.Route.extend({
ajax: Ember.inject.service(),
model(params) {
return Ember.RSVP.hash({
response: this.get('ajax').request('/getAllRestaurants', {method: 'GET'}),
currentPage: params.pageNumber | 1
});
}
});
On the templates/restaurants/index.hbs I check {{model.currentPage}} and it's always 1.
Because logical OR is ||, not |. page = params.pageNumber || 1. But more reliable is ternary operator, page = (params.pageNumber !== undefined ? params.pageNumber : 1)
Did you try { path: '/restaurants/:page_number' } and
currentPage: params.page_number || 1 ?
In my application there are 3 routes as defined below everything is working properly but when then the route which is not defined is called, the blank page is displayed. like, if i enter url http://example.com/page.php/#invalidRoute then i got empty page i want to load
"profile" view if no route is found, my code is given below....
ProfileRouter = Backbone.Router.extend({
initialize : function() {},
routes : {
'' : 'profile',
'detailedProfile' : 'detailedProfile',
'moreReviews' : 'moreReviews',
},
profile : function() {
/*Load a profile*/
},
detailedProfile : function() {
/*Load detail profile*/
},
moreReviews : function() {
/*Load more review*/
}
});
thanks in advance...
You can do something like this. The last route will match everything else that the other routes didn't fulfill. The order of the routes also matters in this case.
routes : {
'' : 'profile',
'detailedProfile' : 'detailedProfile',
'moreReviews' : 'moreReviews',
'*invalidRoute' : 'profile' /* catch all route */
}
This is my routes object in a BackboneJS app:
routes: {
"" : "_navigate",
"home" : "_navigate",
"blog" : "_navigate",
"photos" : "_navigate",
"notes" : "_navigate",
"about" : "_navigate",
"singlepost_:id" : "_navigate"
},
it redirects routes to the _navigate method, which looks like this:
_navigate: function(postId) {
if (postId) {
// show single entry
return;
}
// show regular entry
},
It works perfectly fine. However, I find the repetitive routes object to be annoying.
My question is: Is there a better way to direct all these routes to the same method without repeating yourself so much?
Thanks!
http://backbonetutorials.com/what-is-a-router/ Check out the section on splats
Any "*splats" or ":params" in route definitions are passed as
arguments (in respective order) to the associated function. A route
defined as "/:route/:action" will pass 2 variables (“route” and
“action”) to the callback function. (If this is confusing please post
a comment and I will try articulate it better) Here are some examples
of using ":params" and "*splats"
routes: {
"/posts/:id": "getPost",
// Example
"/download/*path": "downloadFile",
// Download
"/:route/:action": "loadView",
// Load Route/Action View
},
getPost: function( id ){
alert(id); // 121
},
downloadFile: function( path ){
alert(path); // user/images/hey.gif
},
loadView: function( route, action ){
alert(route + "_" + action); // dashboard_graph
}
Quite simple, really.
routes: {
"*actions:_id": "_navigate"
}
Thanks to Jason Strimpel from the BackboneJS Google Group.