如何在Angular项目中正确构造CRUD路线？

Question

问题：是否存在定义单页应用程序路由的最佳实践？

在Angular项目中，功能通常在延迟加载的模块中分开，然后在路由AppRoutingModule和延迟加载的模块中配置路由。

假设该应用将管理目录，例如：产品。路由可以这样配置：

选项1：

• 清单： /products
• 创建： /products/create
• 读： /products/:id
• 更新： /products/:id/edit

它可以工作，但看起来有点混乱，并且和之间有些歧义/products/:id，/products/create因为参数:id可以匹配字符串“ create”。示例代码：

app-routing.module.ts：

const routes: Routes = [
    {
        path: '',
        children: [
            { path: 'products', loadChildren: 'app/products/products.module#ProductsModule' },
        ]
    }
];

products-routing.module.ts

const routes: Routes = [
    { path: '', component: ListProductsComponent },
    { path: 'create', component: CreateProductComponent },
    { path: ':id', component: ViewProductComponent },
    { path: ':id/edit', component: EditProductComponent },
];

选项2

• 清单： /products
• 创建： /products/create
• 阅读：（/product/:id注意“产品”为单数形式）
• 更新：（/product/:id/edit注意“产品”为单数）

没有歧义，但是配置变得更加混乱：

app-routing.module.ts：

const routes: Routes = [
    {
        path: '',
        children: [
            // Empty path. It works as long as the ProductsModule has no empty paths. You can define more lazy modules like this.
            { path: '', loadChildren: 'app/products/products.module#ProductsModule' },
        ]
    }
];

products-routing.module.ts

const routes: Routes = [
    { path: 'products', component: ListProductsComponent },
    { path: 'products/create', component: CreateProductComponent },
    { path: 'product/:id', component: ViewProductComponent },
    { path: 'product/:id/edit', component: EditProductComponent },
];

如您所见，在定义路由时，必须考虑惰性模块的结构和URL的“美观”。

定义路线（尤其是CRUD操作）的最佳实践是什么？有好名字的约定吗？

Answer 1

我所知道的关于 Angular 的唯一约定/最佳实践来自官方样式指南，它没有提到任何关于路由的内容。但绝对推荐/好读。

就个人而言，我会将“创建”和“编辑”放入另一个具有不同根 url 的模块中。

admin/product/list
admin/product/edit/:id
admin/product/create

否则，我会使用您的选项 1 的稍微修改版本。

List: /products
Create: /products/create
Update: /products/edit/:id
Read: /products/:id

干净且易于阅读的代码 > URL 的“美丽”