angularjs - 如何使用 AngularJS、组件和 ngResource 在 CRUD 中实现 C？

Question

我对 Angular 很陌生，我正在改编一个使用标准 Controller 和 ngResource 编写的简单 CRUD 应用程序，以使用 1.5 中引入的组件。到目前为止，我发现的所有文档和资源都没有讨论如何:

从头开始创建一个新项目

与 ngResource 集成

所以我想知道是否有人可以就如何最好地进行一些指示。

我现有的应用程序有一个声明资源实体的简单工厂和一个 Controller

实例化资源的新实例:$scope.newEntity = new Entity();

填充 $scope带有从后端检索的资源列表:Entity.query(function (data) { $scope.entities = data; });

提供了一些用于删除、更新和将资源保存到后端的函数。

在 HTML 中，我有一个与 $scope.newEntity 一起使用的表单以及将新实体保存到后端的 Controller 保存方法。我也有一个 ng-repeat列出存储在 $scope.entities 中的条目，还有几个 ng-click s 执行一些编辑和删除。

我现在想做的是在列表中实现一些内联编辑。我知道我可以用我现有的方法来做到这一点，但我想干净地重用我在实体编辑代码中的现有实体创建表单中的表单验证功能，而不是重复。在我(公认缺乏经验的)眼中，组件似乎很适合这种情况。

使用基于组件的方法，我遵循了 https://docs.angularjs.org/guide/component 处的文档。下 组件树示例 ，并创建了一个 entity-list和 entity-detail成分。到目前为止，这些工作正常，我想我可以弄清楚如何连接 on-delete和 on-update事件。我不知道如何接近 on-create事件。

我应该使用一个完全独立的 Controller 和我现有的简单表单来处理创建事件吗？如果是这样，我怎样才能让现有列表自动更新？该创建事件会传播到列表 Controller 吗？

或者我在现有的列表 Controller 中遗漏了什么？或者实体创建是细节 Controller 的特例吗？

我正在专门寻找有关如何使用 Angular 组件和 ngResource 实现这一点的信息，因为我也想为 Angular 2 做好准备。除非组件和资源不打算一起工作，否则请不要发布有关如何使用的答案使用完全不同的方法来实现这一点，或者如何在没有组件的情况下重用 HTML 代码。谢谢!

Answer 1

实际上，CRUD 中的 C 非常简单。你可能期待 on-create从您的 entity-detail 中使用的方法. entity-list但是，应该注意细节的创建。

这是工作code

我扩展了指南中的示例 https://docs.angularjs.org/guide/component下 组件树示例 您也在阅读并添加了 创建 :

(function () {
  'use strict';

  angular
      .module('componentCrud')
      .component('heroList', {
          templateUrl: "component/hero-list.component.html",
          controller : [
              HeroListController
          ]
      });

  function HeroListController() {
      var ctrl = this;

      ctrl.list = createHeroes();

      ctrl.updateHero = updateHero;
      ctrl.deleteHero = deleteHero;
      ctrl.createHero = createHero;

      function createHero(){
          ctrl.list.push({
              name : 'Crazy Newling',
              location: 'Morgues'
          })
      }  

      function updateHero(hero, prop, value) {
          hero[prop] = value;
      }

      function deleteHero(hero) {
          var idx = ctrl.list.indexOf(hero);
          if (idx >= 0) {
              ctrl.list.splice(idx, 1);
          }
      }

      function createHeroes() {
          return [{
              name    : 'Superman',
              location: ''
          },
              {
                  name    : 'Batman',
                  location: 'Wayne Manor'
              }
          ]
      }
   }
})();

然后在 HTML 中，您只需添加一个创建按钮:

<b>Heroes</b><br>
<hero-detail ng-repeat="hero in $ctrl.list"
         hero="hero"
         on-delete="$ctrl.deleteHero(hero)"
         on-update="$ctrl.updateHero(hero, prop, value)"></hero-detail>
<button ng-click="$ctrl.createHero()">Hire a new Hero</button>

我希望它会帮助你!