CODEWITHSUNDEEP
javascriptangularurl
Andy Liao
Andy Liao

Reputation: 15

Angular URL Data Generation

I am looking for a solution to be able to generate data based on what url is entered before going into my website. Let's say my website has domain mywebsite.com. The methodology would go as follows:

if user visits mywebsite.com/A:

console.log(A)

if user visits mywebsite.com/B:

console.log(B)

It is literally that simple.

mywebsite.com/A mywebsite.com/B ARE THE SAME PAGE as explained below.

Now, for a "brute force" solution on Angular, I would simply make different pages and have the url route to that page. Though, each of these new pages would have exactly the same html layout, because the only thing that would differentiate them is a small piece of code. Hence, why it's inefficient to do this.

Clearly, this task becomes a little inefficient, if I have say, 10 pages. I don't want to generate 10 pages with identical html simply to console.log something different in this example.

Actually, I don't want to mislead you about thinking about pages; I feel like this can be done on one component in Angular. This is not a page issue but a data issue: as long as the url can generate some sort of unique data on the very first page, then it is trivial to carry that information down the workflow via component interactions.

As a note, I see this many times with big companies who can create links to a page: think google hangouts, where the data (the unique chat room) on the page is generated by a url google.com/blabla123465adsfas or something. Obviously, Google does not have thousands of unique web pages on standby; it's most like the same page, if that makes sense.

It's very hard to explain and is perhaps why I can't find any documentation on this. The big question is whether this can be done without any backend setup, which would be an enormous benefit.

It's probably a very simple solution.

TL;DR Angular: can I generate controlled data based on visited url without having to create new pages for each unique url. Or even more high level: unique url able to generate data on angular component

Thank you very much!

Upvotes: 0

Views: 134

Answers (1)

Karim A. Wazzan
Karim A. Wazzan

Reputation: 229

If I understood your issue correctly, I guess you simply have to create different routes in your routing module, example 

const routes: Routes = [
{
path: 'routeA',
component: SameSampleComponent
},
{
path: 'routeB',
component: SameSampleComponent
}
];

And then inside the component simply add 

private router: Router

To the constructor

And call console.log(this.router.url); to get the current path

And what would be even simpler than all that is just adding query parameters to the route such as mywebsite.com/?id=abc123 and then simply 

id: string;
 constructor(private route: ActivatedRoute) { 
 this.route.queryParams.subscribe(params => { 
this.id = params['id'];
 }); 
}

Upvotes: 1

Related Questions