2

我正在使用 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, 等等。然而，这似乎不是最优的，因为AddItemCtrlandEditItemCtrl将共享他们的大量代码。而不是AddItemCtrl,EditItemCtrl等，我宁愿只有一个控制器：ItemCtrl，并且在我的路线中，我宁愿指定是否要调用ItemCtrl.add(),ItemCtrl.edit()等。

有没有办法完成这个或接近它的东西？

4

3 回答 3

1

对于 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 列表，对吧？/items/del/:itemId 也是如此

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

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

于 2013-08-13T04:20:27.793 回答
1

试试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。

于 2013-08-13T04:30:19.837 回答
0

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

于 2013-08-16T06:31:53.030 回答