Angular Router advanced usage

29 views
Skip to first unread message

gwk

unread,
May 25, 2016, 8:43:21 AM5/25/16
to AngularJS
Hi, I'm looking into something which I'm not sure how to put into a succinct enough set of words that it's Google-able so I haven't been able to find a solution. To describe it, I'll use Twitter as an example as twitter.com exhibits the behaviour I'm looking for (Instagram and Pinterest also do this):

If you're on your own twitter feed and click a specific tweet (specifically, clicking on the date of the tweet) you go to a URL like this: twitter.com/{username}/status/{tweet-id} which is the canonical URL for that tweet, but it shows your feed behind it and if you close the tweet you're back on your feed. So in "regular" router terms there would be an ng-outlet in your feed which the router fills with a TweetComponent. However, you can also reach that tweet from the feed of the user who tweeted it (twitter.com/{username}) which would show their feed – as opposed to yours – in the background. Or you can reach the tweet directly (for example, by doing a hard-refresh on the tweet detail page). This means that you have one URL which you can reach from multiple places (contexts) and what's rendered depends on those contexts.

A simplified Root component could look something like this:
@Component({ ... })
@Routes([
   
{path: '/', component: PeronalFeedComponent},
   
{path: '/:username', component: UserFeedComponent},
   
{path: '/:username/status/:id', component: TweetComponent}
])
export class TwitterComponent {}

So if you go to the /:username/status/:id URL directly, you'd get just the tweet on it's own page but if you go to that same URL from either of the other two components you'd want the component to be loaded in an ng-outlet inside either feed-component. If this was all on different URLs, that would be simple, just create a separate route for each situation and have multiple instances of the TweetComponent in your Routes but I don't know how you would do this with a single canonical URL (or if it's even possible).

Does anyone have an idea of how to go about this, or maybe if there is a name for a pattern like this?

Thanks!

Gwk
Reply all
Reply to author
Forward
0 new messages