We Keep Coding

frontend CRUD routing with actions

So let's say you would want to create a basic CRUD todo app. I think it shouldn't matter if you are using the Angular, React or Vue routing. You would come up with a router setup like this
/todos => view all todos
/todos/:id => view one todo by id
/todos/:id/edit => edit one todo by id
/todos/new => create a new todo
So as you might have noticed the last route won't work because the new would act as an id.
Quick fix for that:
I could change the order and put the create route before the other two routes relying on the id. But then the user would never be able to call a new todo new if the id is the todo title.
Quick fix for the next one:
I could put something like /view before /:id. The route would look like /todos/view/:id/edit
The word view might be misleading because you want to edit the resource
The user might expect the route to be /todos/:id so /todos/.../:id might lead to a bad user experience
Is there a common approach for this? If putting something between (/todos/.../:id/edit) is the only way, does a common word exist?
Thanks in advance.

One common pattern is to use the edit route for creating a new item using an id of 0. Although changing the order will also work:
/todos
todos/edit/:id
todos/create
todos/:id

Angular 6 removes query string from url

Example
http://localhost:4200/login?aUasas129198
resolves to
http://localhost:4200/login
What should I do if I want the value after '?'
I tried doing
{ path: 'login/:id', component: LoginComponent },
But it did not work
I also tried
console.log(this.route.snapshot.queryParams);
console.log(this.route.snapshot.params);
But they both return empty object. What should I do now please help

If it’s unavoidable that Angular redirects you immediately and loses the query parameters, you could subscribe to router events and on each NavigationStart for login route get a hold of route’s queryParamMap or snapshot.paramMap before they’re lost in redirection, then you can e.g. pass it to a service and do whatever you wanted to do with it.
Or, as another alternative, you could look into configuring your router with queryParamsHandling: 'preserve', in which case it should pass the query params to the next route (see the section in Angular docs linked below for more on this).
I worked with a project that made use of query params in Angular 5, IIRC I don’t think it would redirect on its own so I’d recommend to look elsewhere in your project but I may be wrong.
See also
Routing & Navigation → Query parameters and fragments in Angular docs
Angular Route Start and Route End Events on StackOverflow

Actually, You are not passing the value in any key:
http://localhost:4200/login?aUasas129198
The proper way should be:
http://localhost:4200/login?anykey=aUasas129198
// get it as
// this._ActivatedRoute.queryParams.subscribe()
If you are using the URI as you shown in your question as:
{ path: 'login/:id', component: LoginComponent }
Then you should pass the value to id as:
http://localhost:4200/login/aUasas129198
// remember the '/' after the login that you didn't use.
// get it as
// this._ActivatedRoute.snapshot.params.id

Backbone get URL parameter

I have a Backbone js app that runs when I go to the URL domain.com/item/1 or domain/item/2` etc. When the app starts I create a new instance of my model and pass it an id which needs to be the last part of the URL. Is there a way to access this in Backbone?
I know it's easy to build a router that can access parameters after a hash so I am better of changing my URL to be something like domain.com/item/1#1?

I don't know you have a backbone router or not.But that's easily achievable by one of the basic use of Backbone.router.
and you do not have to use # or anything.You can access anything between slashes.
routes: {
"item/:page": function(page){
//page holds the query parameter.
}
}
The routes hash maps URLs with parameters to functions on your router (or just direct function definitions, if you prefer), similar to the View's events hash. Routes can contain parameter parts, :param, which match a single URL component between slashes; and splat parts *splat, which can match any number of URL components. Part of a route can be made optional by surrounding it in parentheses (/:optional).
Please read the section of Backbone.router in the documentation for detail.
http://backbonejs.org/#Router
FYI, passing the query parameter to your model should not be executed when a user start app but when routes is called.otherwise everytime you want to change page,You need to change url and reload the whole page.
and usually Controller makes model instances which means,You'd better create controller instance with parameters in router and then create a model in the controller.something like this
routes: {
"item/:page": function(page){
var page = new YourNameSpace.Controller.Foo({pageId : page});
page.render();
}
}
//inside of Itempage Controller
initialize : function(){
this.model = new YourNameSpace.Model.Foo({pageId : this.pageId});
}

Ember.js - Setting a model and routing dynamically via API data

So I'm working on building a dynamic model for a project that reacts to data sent from an API. The api will return, among other things, what your location should be and this in turn becomes the url. So, eg:
{
location: 'xyz'
(...)
}
So currently my router will transition to the right route dynamically. But I still have to hardcode each route ( IndexRoute, LocationXYZRoute, LocationABCRoute, etc).
My goal is to create a single route that handles things dynamically. We'll call it App.LocationRoute and my routes would look something like:
App.Router.map(function() {
this.resource(':location', function() {
this.route(':subLocation')
}
}
Now, I have two architectural questions:
1) Whats a good way to handle this sort of dynamic routing? (I've read through the guide about dynamic routing using the ':post_id' type example, but I think I need a more holistic example to really grasp it.
2) The API sends back a whole host of other data as well. I want to add this to the route's model but I also have some other static models. Doing...
this.controllerFor(location).set('content', APIdata);
... works, but it does not set for routes currently using static models. I tried something like:
this.controllerFor(location).set('apiData', APIdata);
and...
this.controllerFor(location).set('model:apiData', APIdata);
... but neither worked.
Any suggestions?

1) Yes, you should use dynamic segment
this.resource('location', { path: '/location/:location_id' }, function() {
this.resource('sublocation', { path: '/sublocation/:location_id' });
});
2) Are you using ember-data? You could check sideloaded data. Anyway, you could read the json and set the payload of each entity for each specific route.
this.controllerFor('location').set('content', APIdata.location);
this.controllerFor('user').set('content', APIdata.user);
People could help you better, if you separate your questions and create a http://emberjs.jsbin.com/ with isolated each specific case?

Backbonejs conditional route for wizard

I'm trying to create a little wizard with backbonejs in which the answers to certain questions determine the path being taken through the wizard. Is there a way in backbonejs to assess the current state of the model and navigate to the next page accordingly? Or is there another way of accomplishing this best in a backbonejs kind of way?

I think the best way is to treat each answer as a different route. That way when the user selects an answer, the route is change and you can load/change views accordingly in your router. Be sure to make use of variables in routes like
routes: {
":question/:answer": "checkAnswer"
}
Where question and answer are variables
Hope this helps

You can have your router subscribe to the model's "change" or "change:[attribute]" event, then change the route and page accordingly
OR whenever you want to go to a new page call the router's navigate function
router.navigate("question1/option1", {trigger: true});
This will change the url and also trigger the route you set up for "question1/option1"
So if your router is:
router = Backbone.Router.extend({
routes: {
"question1/option1": "answer1"
},
answer1: function() {
//change the page / or take whatever other action you want.
}
answer1 function will be called to setup your next page.