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

Question

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

这是Server 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的一部分,对吧？像这样的东西:

角度路线:

/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 /项目/"以创建新的项目,从POST返回的值更新范围(假设成功,这将是新的项目信息),并清除/再兽皮"新"形式.

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

在我们的例子中,我们通常不需要在我们的应用程序中使用命名路由,我们只是将其作为"/ items /"路由的功能进行服务.