Jak zaimplementować C w CRUD z AngularJS, komponentami i ngResource?

Question

Jestem całkiem nowy w Angular i dostosowuję prostą aplikację CRUD napisaną przy użyciu standardowych kontrolerów i ngResource, aby korzystać z komponentów wprowadzonych w wersji 1.5. Żaden z dokumentów i zasobów znalazłem do tej pory dyskusji, jak:

• utworzyć nowy element od podstaw
• zintegrować z ngResource

więc zastanawiam się, czy ktoś może dać pewne wskazówki, jak najlepiej postępować.

Moja istniejący aplikacja posiada prosty fabrykę uznającą podmiot zasobów i jeden kontroler, który

• tworzy nową instancję instancji zasobu: $scope.newEntity = new Entity();
• zapełnia $scope z listą środków pobranych od backend: Entity.query(function (data) { $scope.entities = data; });
• zapewnia kilka funkcji do usuwania, aktualizowania i zapisywania zasobu do backendu.

W formularzu HTML mam formularz, który działa z $scope.newEntity i metodą zapisu kontrolera, aby zapisać nowy obiekt do zaplecza. Mam także ng-repeat, który zawiera listę wpisów zapisanych w $scope.entities, z kilkoma dodatkowymi ng-click s, aby wykonać pewne edytowanie i usuwanie.

To, co chcę teraz zrobić, to zaimplementować edycję w linii na liście. Wiem, że mogę to zrobić z moim istniejącym podejściem, ale chcę ponownie użyć funkcji sprawdzania poprawności formularza, którą mam w istniejącym formularzu tworzenia jednostki w kodzie edycji jednostki, bez powielania. Komponenty wydają się być naturalnie do tego dopasowane moim (wprawdzie niedoświadczonym) oczom.

z podejściem modułową I następnie dokumentację w https://docs.angularjs.org/guide/component pod przykładzie drzewo składnika i utworzony składnik entity-list i entity-detail. Te prace są w porządku do tej pory i myślę, że mogę wymyślić, jak podłączyć zdarzenia on-delete i on-update. Czego nie mogę zrozumieć, to jak podejść do zdarzenia on-create.

Czy powinienem używać całkowicie oddzielnego kontrolera z moim istniejącym prostym formularzem do obsługi zdarzenia tworzenia? Jeśli tak, jak mogę zaktualizować istniejącą listę automatycznie? Czy to zdarzenie tworzenia zostanie przeniesione do kontrolera listy?

Czy brakuje czegoś w istniejącym kontrolerze list? Czy tworzenie encji jest specjalnym przypadkiem dla kontrolera szczegółu?

Szukam informacji o tym, jak zaimplementować to za pomocą komponentów Angular i ngResource, ponieważ chciałbym również być gotowy na Angular 2. O ile komponenty i zasoby nie są przeznaczone do współpracy, proszę nie publikuj odpowiedzi na temat tego, jak to osiągnąć, stosując zupełnie inne podejście lub jak ponownie użyć kodu HTML bez komponentów. Dzięki!

Answer 1

Rzeczywiście C w CRUD jest naprawdę proste. Prawdopodobnie oczekiwałeś, że metoda on-create zostanie użyta z Twojego entity-detail. entity-list powinien jednak dbać o tworzenie szczegółów.

Oto pracuje code

I rozszerzył przykład z przewodnikiem https://docs.angularjs.org/guide/component pod przykładzie drzewa komponentu pan czyta zbyt i dodał tworzyć:

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

Następnie w HTML wystarczy dodać przycisk tworzenia:

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

Mam nadzieję, że ci to pomoże!