How to implement C in CRUD using AngularJS, components and ngResource?

Question

I am new to Angular and I am adapting a simple CRUD application written using standard controllers and ngResource to use the components introduced in 1.5. None of the documents and resources I have found so far discuss:

• create a new item from scratch
• integrate with ngResource

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

My existing application has a simple factory declaring a resource object, and one controller that

• creates an instance of a new resource instance: $scope.newEntity = new Entity();
• populates $scope list of resources extracted from the backend: Entity.query(function (data) { $scope.entities = data; });
• provides several functions for deleting, updating and saving a resource on the server.

In HTML, I have a form that works with $scope.newEntity and a controller save method to save a new object to the backend. I also have ng-repeat , which lists the entries stored in $scope.entities , with a few extra ng-click to do some editing and deletion.

What I want to do now is implement inline editing in a list. I know that I can do this using my existing approach, but I want to fully use the form validation capabilities that I have in the existing entity creation form in entity editing code, without duplication. The components seem a natural help for this for my (admittedly inexperienced) eyes.

When using the component approach, I completed the documentation in https://docs.angularjs.org/guide/component in Example component tree and created the entity-list and entity-detail component. So far, everything is working, and I think I can figure out how to connect the on-delete and on-update events. I cannot figure out how to approach the 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 an existing list for automatic updates? Will this creation event propagate to the list controller?

Or am I missing something in an existing list controller? Or is an entity created by a special case for the part controller?

I am looking for specific information on how to implement this using Angular and ngResource components, since I would also like to be ready for Angular 2. If the components and resources are not intended to work together, please do not post answers on how to achieve this using a completely different approach or how to reuse HTML code without components. Thanks!

Answer 1

Actually C in CRUD is very simple. You probably expected the on-create method to be used from your entity-detail . entity-list should take care of creating the details.

Here is the working code

I added an example from the https://docs.angularjs.org/guide/component manual in the Example component tree you read section, and create was added:

 (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 this helps you!