在AngularJS中，我如何定义一个在控制器上调用特定方法的路由

In AngularJS, how do I define a route which calls a specific method on a controller?

本文关键字：调用 控制器 路由 方法 一个 何定义 AngularJS 定义      更新时间：2023-09-26

我正在使用AngularJS制作一个CRUD页面，它将具有添加/编辑/删除功能。所以，我的路线是这样的：

/items (show a list of the items)
/items/add (show add item form)
/items/edit/:itemId (show edit item form)
/items/del/:itemId (Delete item)

似乎我必须为这4条路线中的每一条定义一个不同的控制器。例如，AddItemCtrl、EditItemCtrl等。然而，这似乎不是最佳的，因为AddItemCtrl和EditItemCtrl将共享大量的代码。我宁愿只有一个控制器：ItemCtrl，而不是AddItemCtrl、EditItemCtrl等。在我的路由中，我宁愿指定是否要调用ItemCtrl.add()、ItemCtrl.edit()等。

有没有一种方法可以实现这一点或接近它的东西？

对于AngularJS，请记住它是客户端，因此url资源不必与CRUD操作直接相关。我建议将url路由视为视图，而不是操作。

例如，我会使用这些：

/items (show a list of the items)   
/items/edit/:itemId (show edit item form)

我不会使用这些：

/items/add (show add item form)
/items/del/:itemId (Delete item)

我不使用客户端上面的URL的原因是，你会为/items/add资源显示什么？它可能是/项目列表，对吧？/items/del/：itemId 也是如此

我会做两个控制器。一个是项目控制器（即项目列表）和项目控制器（如单个项目）。两者都应该将其功能推迟到管理项目的中心服务。该服务将允许CRUD操作，并在可能使用您最初定义的路由的服务器上调用任何CRUD操作。

附带说明一下，您可以有Items控制器、ItemsEdit控制器、ItemAdd控制器和ItemDelete控制器。但是你应该保持你的控制器非常薄。基本上只是用来调用ItemsService方法。每个控制器只提供特定的视图功能，并将任何实际工作推迟到服务。

尝试https://github.com/angular-ui/ui-router，这是对Angular的一个极好的补充，它使您可以轻松地将路径映射到具有层次状态的视图，从而可以轻松地共享代码。

/items - use a deferred promise to resolve the items collection 
         and display a view
/items/add - display the add form (inherit /items state)
/items/:itemId - resolve a specific item and display it in the 
         view (inherit /items state)
/items/:itemId/edit - display the edit form for an item 
         (inherit /items:itemId state)

我不会提供用于删除项目的Url。

我最终编写了一个指令，并分配了用于显示/隐藏适当表单的单击处理程序。

相关文章：