Come implementare la C in CRUD con AngularJS, components e ngResource?

Question

Sono abbastanza nuovo per Angular e sto adattando una semplice app CRUD scritta utilizzando i controller standard e ngResource per utilizzare i componenti introdotti in 1.5. Nessuno dei documenti e delle risorse che ho trovato finora discutere come:

• creare un nuovo elemento da zero
• integrarsi con ngResource

quindi mi chiedo se qualcuno può dare qualche puntatori su come meglio procedere.

mia app esistente ha una semplice fabbrica di dichiarare un'entità delle risorse, e un singolo controller che

• un'istanza di un nuova istanza della risorsa: $scope.newEntity = new Entity();
• popola il $scope con un elenco delle risorse recuperate da il backend: Entity.query(function (data) { $scope.entities = data; });
• fornisce un paio di funzioni per l'eliminazione, l'aggiornamento e il salvataggio della risorsa nel back-end.

Nel codice HTML ho un modulo che funziona con $scope.newEntity e il metodo di risparmio del controller per salvare la nuova entità nel back-end. Ho anche un ng-repeat che elenca le voci memorizzate in $scope.entities, con un paio di ulteriori ng-click s per eseguire alcune modifiche ed eliminazioni.

Quello che voglio fare ora è implementare alcune modifiche in linea nell'elenco. So che posso farlo con il mio approccio esistente, ma voglio riutilizzare in modo pulito la funzionalità di convalida del modulo che ho nel modulo di creazione dell'entità esistente nel codice di modifica dell'entità, senza duplicare. I componenti sembrano adattarsi in modo naturale ai miei occhi (certamente inesperti).

Con l'approccio basato su componenti, ho seguito la documentazione a https://docs.angularjs.org/guide/component sotto Esempio di un albero componente, e ha creato un componente entity-list e entity-detail. Questi funzionano bene finora, e penso di poter capire come collegare gli eventi on-delete e on-update. Quello che non riesco a capire è come affrontare un evento on-create.

Devo utilizzare un controller completamente separato con il mio modulo semplice esistente per gestire l'evento di creazione? In tal caso, come posso aggiornare automaticamente l'elenco esistente? Questo evento di creazione si propagherà al controller di elenco?

O mi manca qualcosa nel controller di elenco esistente? O la creazione di entità è un caso speciale per il controller di dettaglio?

Sto cercando informazioni specifiche su come implementare questo utilizzando i componenti angolari e ngResource, come mi piacerebbe anche essere pronto per Angular 2. A meno che i componenti e le risorse non siano pensati per funzionare insieme, per favore non posta le risposte su come ottenere ciò utilizzando un approccio completamente diverso, o come riutilizzare il codice HTML senza componenti. Grazie!

Answer 1

In realtà la C in CRUD è davvero semplice. Probabilmente ti aspettavi un metodo on-create da utilizzare dal tuo entity-detail. entity-list dovrebbero tuttavia occuparsi della creazione dei dettagli.

Ecco il lavoro code

ho esteso l'esempio dalla guida https://docs.angularjs.org/guide/component sotto Esempio di un albero componente stavi leggendo troppo e ha aggiunto la creare:

(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' 
       } 
      ] 
     } 
    } 
})(); 

Poi in HTML è sufficiente aggiungere un pulsante di creazione:

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

Spero che ti possa aiutare!