Làm cách nào để triển khai C trong CRUD với AngularJS, các thành phần và ngResource?

Question

Tôi khá mới đối với Angular và tôi đang điều chỉnh ứng dụng CRUD đơn giản được viết bằng bộ điều khiển chuẩn và ngResource để sử dụng các thành phần được giới thiệu trong 1.5. Không ai trong số các tài liệu và các nguồn lực tôi đã tìm thấy cho đến nay thảo luận làm thế nào để:

• tạo một mục mới từ đầu
• tích hợp với ngResource

vì vậy tôi tự hỏi nếu có ai có thể đưa ra một số con trỏ về cách tốt nhất để tiến hành.

ứng dụng hiện tại của tôi có một nhà máy đơn giản tuyên bố một thực thể tài nguyên, và một bộ điều khiển duy nhất

• instantiates một thể hiện mới của tài nguyên: $scope.newEntity = new Entity();
• populates $scope với một danh sách các nguồn lấy từ phần phụ trợ: Entity.query(function (data) { $scope.entities = data; });
• cung cấp một vài chức năng để xóa, cập nhật và lưu tài nguyên vào chương trình phụ trợ.

Trong HTML, tôi có biểu mẫu hoạt động với $scope.newEntity và phương pháp lưu bộ điều khiển để lưu thực thể mới vào chương trình phụ trợ. Tôi cũng có một ng-repeat liệt kê các mục được lưu trữ trong $scope.entities, với một vài bổ sung ng-click s để thực hiện một số chỉnh sửa và xóa.

Điều tôi muốn làm bây giờ là triển khai một số chỉnh sửa nội dòng trong danh sách. Tôi biết tôi có thể làm điều này với cách tiếp cận hiện có của mình, nhưng tôi muốn sử dụng lại chức năng xác nhận biểu mẫu một cách rõ ràng mà tôi có trong biểu mẫu tạo thực thể hiện có trong mã chỉnh sửa thực thể mà không cần sao chép. Các thành phần có vẻ giống như một sự phù hợp tự nhiên cho đôi mắt của tôi (thừa nhận là thiếu kinh nghiệm).

Với cách tiếp cận dựa trên thành phần, tôi đã theo tài liệu tại https://docs.angularjs.org/guide/component dưới Ví dụ về một cây thành phần, và tạo ra một thành phần entity-list và entity-detail. Những công việc này ổn cho đến nay, và tôi nghĩ rằng tôi có thể tìm ra cách để kết nối các sự kiện on-delete và on-update. Những gì tôi không thể hiểu là cách tiếp cận sự kiện on-create.

Tôi có nên sử dụng bộ điều khiển hoàn toàn riêng biệt với biểu mẫu đơn giản hiện có để xử lý sự kiện tạo không? Nếu vậy, làm thế nào tôi có thể nhận danh sách hiện có để tự động cập nhật? Liệu sự kiện tạo ra đó có lan truyền qua bộ điều khiển danh sách không?

Hoặc tôi có thiếu thứ gì đó trong bộ điều khiển danh sách hiện tại không? Hoặc là thực thể tạo ra một trường hợp đặc biệt cho bộ điều khiển chi tiết?

Tôi đang tìm kiếm thông tin cụ thể về cách triển khai điều này bằng cách sử dụng thành phần Angular và ngResource, vì tôi cũng muốn sẵn sàng cho Angular 2. Trừ khi các thành phần và tài nguyên không có nghĩa là làm việc cùng nhau đăng câu trả lời về cách đạt được điều này bằng cách sử dụng một cách tiếp cận hoàn toàn khác hoặc cách sử dụng lại mã HTML mà không có các thành phần. Cảm ơn!

Answer 1

Thực ra C trong CRUD thực sự đơn giản. Có thể bạn đang sử dụng phương thức on-create để sử dụng từ entity-detail của mình. Tuy nhiên, entity-list nên đảm bảo việc tạo chi tiết.

Đây là làm việc code

tôi mở rộng ví dụ từ hướng dẫn https://docs.angularjs.org/guide/component dưới Ví dụ về một cây thành phần bạn đang đọc quá và thêm tạo:

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

Sau đó, trong HTML, bạn chỉ cần thêm nút tạo:

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

Tôi hy vọng nó sẽ giúp bạn!