Named routes

Oh hi there! 😄

I’m a laravel (php) developer and new to angular … I read the docs about routes and one thing i really missed is named routes! In laravel we can give a name to each route and get full path of the route with route helper function in views If we change the path for the route still the correct path shows in views, because the route name refers to the route path! Have we something like that in angular? and if no please add this feature!

As the alternative solution i was thinking about write a custom route service and Inject it to all components but it seems to be a dirty solution, isn’t it? 😃

Thanks!

[Airblader]

This would be incompatible with lazy loading as determining the route for a given name would require the module to be loaded already.

As for doing this within a module, you can add a data: { name: string } kind of property to your routes and create a service as you mentioned which does this (in fact, you could even build a library out of this). You can inject the ROUTES token (or use Router#config) to get the routes configuration in which you find the data block. I’m not seeing anything dirty about this since this is essentially the same thing a framework-side implementation would likely be doing (apart from maybe not using the data field, which is a minor detail).

(Building this as a library actually sounds kind of nice, as you could do things like also create a pipe for syntax like [routerLink]="'users.profile' | route: [user.id]" and what not.)

[Airblader]

You should just make use of the hierarchy the Angular router gives you:

const routes: Routes = [
    {
        path: "hero/:id",
        data: { name: "hero" },
        children: [
            {
                path: "action1",
                data: { name: "action1" },
                component: HeroAction1Component,
            },
            {
                path: "action2",
                data: { name: "action2" },
                component: HeroAction2Component,
            },

        ],
    },
];

Now when the user uses [routerLink]="'hero.action1' | route: hero.id", you walk through the routes to figure out the correct URL.

An interesting question is if and whether this should allow “skips” in between the tree without a route name set. I’d say yes, as otherwise the usefulness is extremely limited, but this comes down to a design decision in the library