Question

我正在使用AngularJS构建一个使用REST服务的UI：

这是服务器API

/items/ GET
/items/:id GET
/items/ POST (to create new item)
/items/:id PUT (to edit item)
/items/:id DELETE

在Angular中设置路线时的最佳做法是什么？这些路由将映射到服务器REST API，但显然存在问题。我猜我需要将操作作为URL的一部分，对吧？像这样：

Angular Routes：

/items/
/items/:id
/items/new 
/items/:id/edit
/items/:id/delete

然而，上述模式也存在问题。 / items / new将匹配/ items /：id和/ items / new，那么在为create创建路由时最佳做法是什么？

Answer 1

另请注意，您定义的客户端Angular路由可能依赖于您的UI。您定义的路线更像是传统的Web应用程序，您可以在其中单击“添加新”按钮，该按钮将您带到具有您填写的表单的新页面。但是，这可能不是您通常使用Angular创建的单页应用程序（SPA）所使用的模式。

我的意思是，我所做的大部分SPA应用实际上并没有在客户端提供独立的“/ items / new”路由。相反，“/ items / new”功能在“/ items /”route / partial（传统Web应用程序术语中的“页面”）上处理。此页面列出了现有项目，此页面上有一个表单，您可以填写该表单以创建新项目。或者，此页面上有一个“添加新”按钮（就像传统的Web应用程序一样）;但是，单击它可以以模态形式滑动，也可以在/ items / partial模板上显示已定义（但最初隐藏）的表单。

提交后，控制器命中服务器上的“POST / items /”以创建新项目，使用POST的返回值更新范围（假设成功，这将是新项目信息），并清除/重新隐藏“新”形式。

底线 - 请记住，如果用户界面是新的作为项目列表页面的功能处理，在SPA中您可能实际上不需要“/ items / new”。当然，如果您需要它作为可寻址端点的独立页面（即您计划从多个位置链接到此，而不仅仅是从应用程序内部），那么您显然需要直接路由。

在我们的案例中，我们通常不需要在我们的应用程序中使用命名路由，我们只是将其作为“/ items /”路由的功能进行服务。

Answer 2

使用UI-Router，我们可以设置客户端路由。

确保禁用html5路由，因为某些浏览器仍然不支持html5并且它们命中服务器api而不是命中客户端路由

您可以在定义有角度$locationProvider.html5Mode(false);

的同时在app.config方法中设置app来执行此操作

/items/                     - this is for listing items
/items/{id:[0-9]{1,4}}      - this is for displaying one item in detail
/items/add                  - for displaying new item form
/items/:id/edit             - for displaying existing item in Form for editing
/items/:id/delete           - **This is not required, I mean you just hit the API when
                                use clicks delete, we cant show any deletion form**

您可以将正则表达式用于参数'/items/{id:[0-9]{1,4}}'，这意味着allow only numbers 0 to 9和1 to 4 characters long

以Angful方式在AngularJS中设置路由的最佳实践

2 个答案: