5

我对 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的 s 来执行一些编辑和删除。

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

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

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

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

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

4

1 回答 1

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>

我希望它会帮助你！

于 2016-04-11T17:50:48.973 回答