Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Named routes #29890

Closed
Saeed-Pooyanfar opened this Issue Apr 14, 2019 · 14 comments

Comments

Projects
None yet
3 participants
@Saeed-Pooyanfar
Copy link

Saeed-Pooyanfar commented Apr 14, 2019

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 comment has been minimized.

Copy link
Contributor

Airblader commented Apr 14, 2019

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

This comment has been minimized.

Copy link
Contributor

Airblader commented Apr 14, 2019

Also duplicate of #13416. It in particular links to this where it's stated that this was an explicit design decision for the router.

@JoostK

This comment has been minimized.

Copy link
Member

JoostK commented Apr 14, 2019

Thanks @Airblader. I will go ahead and close this as this issue is non-actionable because of the lazy route constraints.

@JoostK JoostK closed this Apr 14, 2019

@Saeed-Pooyanfar

This comment has been minimized.

Copy link
Author

Saeed-Pooyanfar commented Apr 15, 2019

Thanks @Airblader
https://www.npmjs.com/package/named-routes-angular
I will create a github repo for the source soon ^_^

@Saeed-Pooyanfar

This comment has been minimized.

Copy link
Author

Saeed-Pooyanfar commented Apr 15, 2019

@Saeed-Pooyanfar

This comment has been minimized.

Copy link
Author

Saeed-Pooyanfar commented Apr 16, 2019

Hi @Airblader
The lib that i wrote for named routes,
works perfectly with "ng serve" command and compile with 0 error, but if i want to build it with:
"ng build --prod" command i get "Function calls are not supported in decorators but 'routerModule' was called" error!
I google it but not found any solution for this, can you help me?

@Airblader

This comment has been minimized.

Copy link
Contributor

Airblader commented Apr 16, 2019

You need to get rid of your custom group function stuff. Just let the user add the data attribute to the routes on their own. You can provide like a symbol they can use.

export const NAMED_ROUTE = new Symbol('NAMED_ROUTE');

// 鈥

const routes: Routes = [
    {
        path: "heroes/:heroId/edit",
        component: HeroEditComponent,
        data: {
            [NAMED_ROUTE]: "heroes.edit",
        },
    },
];

This is really general AoT stuff, though, so it'd better if you asked such questions on StackOverflow.

@Saeed-Pooyanfar

This comment has been minimized.

Copy link
Author

Saeed-Pooyanfar commented Apr 16, 2019

@Airblader Thanks, so i can't write a lib that simulate laravel Route::group() in angular!
Also named routes idea is useless with this conditions :(

@Airblader

This comment has been minimized.

Copy link
Contributor

Airblader commented Apr 16, 2019

Also named routes idea is useless with this conditions :(

What exactly are you losing that makes it useless? You can still let the user define "partial" names and when you look up something like heroes.edit you parse the tree.

@Saeed-Pooyanfar

This comment has been minimized.

Copy link
Author

Saeed-Pooyanfar commented Apr 16, 2019

Also named routes idea is useless with this conditions :(

What exactly are you losing that makes it useless? You can still let the user define "partial" names and when you look up something like heroes.edit you parse the tree.

I want route group feature like laravel in angular, imagine i have lots of routes with path_prefix1_
If one day i decide change it to path_prefix2_ i have to manually modify all routes path which is so bad ( as i'm lazy :D ), this scenario is also true for routes name
Let me show you an example from laravel routes and my purpose from named routes:

...
Route::prefix('admin')->name('admin.')->group(function() {
    Route::get('dashboard', 'DashboardController@index')->name('dashboard');
    Route::get('user', 'UserController@index')->name('user.index');
    ....
    ....
});
...

In view:

<a href="{{ route('admin.dashboard') }}">Admin dashboard</a>
<a href="{{ route('admin.user.index') }}">Users list</a>

One day i decide modify prefix for admin.* routes, all things that i have to do:

...
Route::prefix('VERY_LONG_TOKEN_admin')->name('admin.')->group(function() {
    Route::get('dashboard', 'DashboardController@index')->name('dashboard');
    Route::get('user', 'UserController@index')->name('user.index');
    ....
    ....
});
...

and nothing else!

@Airblader

This comment has been minimized.

Copy link
Contributor

Airblader commented Apr 17, 2019

You can still do this with the approach that I mentioned, but since you deleted the repository again already anyway this is a moot point.

@Saeed-Pooyanfar

This comment has been minimized.

Copy link
Author

Saeed-Pooyanfar commented Apr 17, 2019

Hi @Airblader
I uploaded the repo again,
I have no idea how you can do this ...

@Saeed-Pooyanfar

This comment has been minimized.

Copy link
Author

Saeed-Pooyanfar commented Apr 17, 2019

You can still do this with the approach that I mentioned, but since you deleted the repository again already anyway this is a moot point.

You just defined static path, for example if i have:

...
const routes: Routes = [
    {
        path: "hero/:id/action1",
        component: HeroAction1Component,
        data: {
            name: "hero.action1",
        }
    },
    {
        path: "hero/:id/action2",
        component: HeroAction2Component,
        data: {
            name: "hero.action2",
        }
    },
    {
        path: "hero/:id/action3",
        component: HeroAction3Component,
        data: {
            name: "hero.action3",
        }
    },
    ...
];
...

and want to add a prefix to paths, what can i do? manually modify all paths?

@Airblader

This comment has been minimized.

Copy link
Contributor

Airblader commented Apr 17, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.