How to do a Marionette catchall route? - backbone.js

I need a catchall route in Marionette.
For example, I have users jane bob alice, and I want them to be able to access their profiles with:
http://example.com/#jane
http://example.com/#bob
http://example.com/#alice
However, if I want to single out a route, #edit to go somewhere else, for example, their edit page.
Is there a way to do this in Backbone/Marionette?

So you can do this using the normal routes but the order in which they are declared becomes important which sucks a bit
appRoutes: {
"some_part_of_app/edit": "showEditPage",
"some_part_of_app/:username": "showProfilePage",
}
in this way it will try to match the route against edit first then when it fails it will then match against the next route, if these were the other way round it would always match the /:username route.
But if i was doing something like this i would make the routes a bit more descriptive and avoid this issue altogether
appRoutes: {
"some_part_of_app/profile/:username/edit": "showEditPage",
"some_part_of_app/profile/:username": "showProfilePage",
}
in this way its clear from the route which resource is be being acted upon and you don;t have to rely on the order of declaration to get around the catch all situation.
or the other option is to to use a plugin like https://github.com/boazsender/backbone.routefilter which would allow you to pre filter the route and ensure edit went to the edit route and :usernames went to the users names.

Related

Pretty url with Angularjs/.htaccess

I've been struggling with this for a week now. I use Anguarjs and I set the html5mode(true) to get rid of the hash sign "#" that you needed in the url before.
Everything works fine amd my URL logic works with Query Parameters.
www.domain.com/thecurrentpage/?title=banana
And it changes and refresh the page when I click on something else and then it displays the right content.
I just want to be able to have a link like:
www.domain.com/thecurrentpage/banana
And come to the same page.
That actually will point you to the first one with query params.
I feels like I've tried everything in the .htaccess file with rewrite rules and everything with angular routing. I just don't get it.
you want to use the : syntax in your routing.
In your routing add a route like this:
/thecurrentpage/:title
Then you can use:
$routeParams.title
To get the value "banana"
This might help ... AngularJS: Read route param from within controller

How to make Angular router (or ui-router) accept routes like `#foo` instead of redirecting to `#/foo`?

Terminology
#foo: slashless scheme
#/foo: slashy scheme
Background
There are certain legacy parts of the application which use (and rely on) the slashless scheme. I would like to introduce Angular routing (probably with ui-router) in a non-destructive way, such that doesn't interfere with the legacy routing so that part of the application could be gracefully phased out over time. Once that happens the all-angular app could switch to the slashy scheme all at once.
So far
I tried setting $locationProvider.hashPrefix('') to an empty string, but it seems you can only set the string between # and /, so that didn't work.
Options
It seems I can either
rewrite legacy parts of the app, or
rewrite Angular's $locationProvider.hashPrefix to include '/' by default. Therefore setting it to '' would become meaningful.
Both of these options seem very time-consuming.
Do you know about a better way to make Angular recognize the slashless scheme?
You can try using redirects!
With ui-router:
app.config(function ($urlRouterProvider) {
// when there is an 'old' route, redirect to new one
$urlRouterProvider.when('foo', '/foo');
// You can also use regex for the match parameter
$urlRouterProvider.when(/(\w+)/i, '/$1'); // UNTESTED!!!!!!
})
Reference about ui-router wiki
I'm sorry but hashtags are quite hard to test in plunkers/fiddles, so i'm not providing one for now...

How can I set a url keyword to route to a specific controller/action

How could I make the router to link to a specific controller/action if the url as a specific keyword inside it ?
aka I'm making a game, I want the user to be able to access it's bank by entering any url with the keyword "money" inside it. That way /showmemoney , /momoney , etc. would all link to the controller Banks.
Looking for the cakeway to do this.
Read the CakePHPs official documentation about routing.
Another common use for the Router is to define an “alias” for a
controller. Let’s say that instead of accessing our regular URL at
/users/some_action/5, we’d like to be able to access it by
/cooks/some_action/5. The following route easily takes care of that:
Router::connect(
'/cooks/:action/*', array('controller' => 'users')
);

AngularJS routing for dynamic urls, how?

I'm trying to understand how can i configure my angularJS routing given the following case:
We have a search page where we display the search results based on tags provided (1..n tags). we would like that a user to be able to parse enter a url as the following and our system to do the search and show the respective results.
The url format should be:
http://mywebsite.com/search/<term1>/<term2>/<termN>...so it could be different number of terms.
I was looking into the route provide and couldn't figure out a way to do it dynamically.
i saw that i could put in the routeprovid:
.when('/search/:searchParams',... but that handles only when i have one term...is there anyway to configure it to take as many terms as is given?
Does this help you at all? Seems to support dynamic routing and you could probably cut apart the :name parameter to do what you wish, perhaps.
http://gregorypratt.github.io/AngularDynamicRouting/
Ken
You could try base64ing your searchParams:
.when('/search/:searchParams', {controller:'SearchCtrl'})
function SearchCtrl($routeParams, $location){
//Assuming your params are an array like ['param1', 'param2', 'param3']
//You could easily adapt this to base64 a JSON object
function encodeParams(params){
return window.btoa(params.join(';'));
}
function decodeParams(string){
return window.atob(string).split(';');
}
var searchParams = decodeParams($routeParams.searchParams);
scope.search = function(params){
$location.path('/search/' + encodeParams(params));
}
}
My solution may be looks not so glad, but it's works at least:
You may organize your routs in way
yoursite.com/term1Name/**:param1**/term2Name/**:param2**/term3Name/**:param3**
To make it's clear, you may do your routes seems like REST routes. For example I'm want to go to a list of a services:
www.yoursite.com/servises/
Go to the one of the services:
www.yoursite.com/servise/:id
And if I'm want to see some of the service details, I'll do:
www.yoursite.com/servise/:id/details
and so
www.yoursite.com/servise/:id/detail/:id

How to use hash (#) on urls in chaplin.js like backbone used to do?

let's say that I have two "pages" (endpoints) on a chaplin.js site
the routes:
match('', 'first_controller#show');
match('second_view', 'second_controller#show');
and two links:
Go to home
Go to Second
the generated urls are "correct":
mysite.com/something/ (home)
mysite.com/something/second_view (second view)
(notice that I'm not on the root of the site). When I start the application at "home" and then click the "Go to second" link i get correctly redirected to the second view, everything gets tendered correctly and the url on the browser changes to mysite.com/something/second_view
But then I cannot refresh the navigator since my webserver will try to reach a second_view folder instead, and I'll get a 404.
What i need is to always generate the urls using a # like in backbone, something like mysite.com/something/#/second_view.
BTW: that last link works but chaplin deletes the # (like a redirect)
Maybe I need to configure something? or change something on the ùrl`helper, I couldn't find anything in the docs. Any Ideas??
Thxs
Backbone itself allows this functionality out of the box, through
Backbone.history.start({pushState: false})
(the default)
You can see the startHistory call here.
You just have to pass this options object as a second parameter to initRouter in your Application :
this.initRouter(routes, {pushState: false});

Resources