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-click来执行某些编辑和删除。

我现在要做的是在列表中实现一些内联编辑。我知道我可以用我现有的方法做到这一点，但我想干净地重用实体编辑代码中现有实体创建表单中的表单验证功能，而不重复。对于我（当然没有经验的）眼睛，组件看起来很自然。

使用基于组件的方法，我在组件树示例下的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应该注意创建细节。

以下是工作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>

我希望它会帮助你！

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

1 个答案: