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

Question

我是Angular的新手,我正在使用标准控制器和ngResource编写的简单CRUD应用程序来使用1.5中引入的组件.到目前为止,我发现的文档和资源都没有讨论如何:

• 从头开始创建一个新项目
• 与ngResource集成

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

我现有的应用程序有一个简单的工厂声明一个资源实体,一个控制器

• 实例化资源的新实例: $scope.newEntity = new Entity();
• $scope使用从后端检索的资源列表填充:Entity.query(function (data) { $scope.entities = data; });
• 提供了一些用于删除,更新和保存资源到后端的功能.

在HTML中,我有一个使用的表单$scope.newEntity和控制器保存方法,以将新实体保存到后端.我还有一个ng-repeat列出存储的条目$scope.entities,还有几个额外的ng-clicks来执行一些编辑和删除.

我现在要做的是在列表中实现一些内联编辑.我知道我可以用我现有的方法做到这一点,但我想干净地重用我在实体编辑代码中的现有实体创建表单中的表单验证功能,而不重复.组件看起来非常适合我的(公认的无经验)眼睛.

与基于组件的方法,我按照在文档https://docs.angularjs.org/guide/component下一个组件树的实施例,并创建了一个entity-list和entity-detail组件.到目前为止,这些工作还可以,我想我可以弄清楚如何连接on-delete和on-update事件.我无法弄清楚的是如何处理一个on-create事件.

我应该使用一个完全独立的控制器和我现有的简单形式来处理创建事件吗？如果是这样,我如何让现有列表自动更新？该创建事件是否会传播到列表控制器？

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

我正在寻找有关如何使用Angular组件和ngResource实现此功能的信息,因为我还想为Angular 2做好准备.除非组件和资源不能一起使用,否则请不要发布有关如何使用完全不同的方法实现这一点,或者如何在没有组件的情况下重用HTML代码.谢谢!

Answer 1

其实CRUD中的C非常简单。您可能期望on-create从您的entity-detail. entity-list但是应该注意细节的创建。

这是工作代码

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

(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>

我希望它能帮助你！