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

这是工作code

我在您正在阅读的组件树示例下的指南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,value)"></hero-detail>
<button ng-click="$ctrl.createHero()">Hire a new Hero</button>

我希望它会帮助你！