How do I implement the C in CRUD with AngularJS, components, and ngResource?

Question

I'm quite new to Angular, and I'm adapting a simple CRUD app written using standard controllers and ngResource to use the components introduced in 1.5. None of the docs and resources I've found so far discuss how to:

• create a new item from scratch
• integrate with ngResource

so I'm wondering if anyone can give some pointers on how best to proceed.

My existing app has a simple factory declaring a resource entity, and a single controller that

• instantiates a new instance of the resource: $scope.newEntity = new Entity();
• populates the $scope with a list of the resources retrieved from the backend: Entity.query(function (data) { $scope.entities = data; });
• provides a couple of functions for deleting, updating, and saving the resource to the backend.

In the HTML I have a form that works with $scope.newEntity and the controller saving method to save the new entity to the backend. I also have an ng-repeat that lists the entries stored in $scope.entities, with a couple of additional ng-clicks to perform some editing and deleting.

What I want to do now is implement some inline editing in the list. I know I can do this with my existing approach, but I want to cleanly reuse the form validation functionality I have in the existing entity creation form in the entity editing code, without duplicating. Components seem like a natural fit for that to my (admittedly inexperienced) eyes.

With the component-based approach, I have followed the documentation at https://docs.angularjs.org/guide/component under Example of a component tree, and created an entity-list and entity-detail component. These work okay so far, and I think I can figure out how to wire up the on-delete and on-update events. What I can't figure out is how to approach an on-create event.

Should I use a completely separate controller with my existing simple form to handle the creation event? If so, how can I get the existing list to automatically update? Will that creation event propagate across to the list controller?

Or am I missing something in the existing list controller? Or is the entity creation a special case for the detail controller?

I'm looking specifically for information about how to implement this using Angular components and ngResource, as I'd also like to be ready for Angular 2. Unless components and resources aren't meant to work together please don't post answers about how to achieve this using a completely different approach, or how to reuse HTML code without components. Thanks!

Answer 1

Actually the C in CRUD is realy simple. You were probably expecting an on-create method to be used from your entity-detail. entity-list should take care of the creation of the details however.

Here is the working code

I extended the example from the guide https://docs.angularjs.org/guide/component under Example of a component tree you were reading too and added the 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'
              }
          ]
      }
   }
})();

Then in HTML you just add a create button:

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

I hope it is going to help you!