Bắt đầu với angular-meteor 1.3: Buổi 3 - thêm, sửa, xóa cơ sở dữ liệu
S2 Corp
3
AngularJS
23
meteor
17
nodejs
73
White

Sáng Huỳnh viết ngày 26/04/2016

Sau khi hoàn thành Step 2 lúc này bạn đó có thể tạo và load một cơ sở dữ liệu lên web của mình. Chúng ta sẽ tiếp tục thêm một số tính năng tương tác cơ sở dữ liệu theo những bước dưới đây.
Bài viết dựa trên: http://www.angular-meteor.com/tutorials/socially/angular1/adding-removing-objects-and-angular-event-handling

a) Thêm mới cơ sở dữ liệu:

  • Đầu tiên tạo file imports/ui/components/partyAdd/partyAdd.js với nội dung như sau:

    import angular from 'angular';
    import angularMeteor from 'angular-meteor';
    
    import './partyAdd.html';
    
    class PartyAdd {
        constructor() {
                this.party = {};
        }
    
        submit() {
                Parties.insert(this.party);
                this.reset();
        }
    
        reset() {
          this.party = {};
        }
    }
    
    const name = 'partyAdd';
    
    // create a module
    export default angular.module(name, [
      angularMeteor
    ]).component(name, {
      templateUrl: `imports/ui/components/${name}/${name}.html`,
      controllerAs: name,
      controller: PartyAdd
    });
    

    this.party: gồm hai thành phần là name và description sẽ được định nghĩa trong ng-model của file partyAdd.html, đối tượng này có nhiệm vụ lấy dữ liệu text từ thẻ input chứa ng-model tương ứng để xử lý.
    submit(): Có hai nhiệm vụ:
    1. insert dữ liệu có trong this.party vào collection Parties.
    2. sử dụng phương thức reset() để đưa nội dung của các thẻ input với ng- model tương ứng trở về rỗng.
    phương thức submit() sẽ được gọi ra bằng sự kiện ng-click của đối tượng html.

  • Tiếp theo chúng ta tạo file html imports/ui/components/partyAdd/partyAdd.html và thêm vào đoạn code sau:

    <form>
         <label>
                Party Name:
        </label>
        <input type="text" ng-model="partyAdd.party.name" />
        <label>
            Description:
        </label>
        <input type="text" ng-model="partyAdd.party.description" />
        <button ng-click="partyAdd.submit()">Add Party!</button>
    </form>
    
  • Tiếp theo chúng ta sẽ thêm chức năng thêm này vào file imports/ui/components/partiesList/partiesList.html
    file imports/ui/components/partiesList/partiesList.js:

    Trong partiesList.html:

    <party-add></party-add>
    <ul>
      <li ng-repeat="party in partiesList.parties">
        {{party.name}}
        <p>{{party.description}}</p>
      </li>
    </ul>
    

    Trong partiesList.js:

    import angularMeteor from 'angular-meteor';
    
    import './partiesList.html';
    import { name as PartyAdd } from '../partyAdd/partyAdd';
    
    class PartiesList {
      constructor($scope, $reactive) {
    ...some lines skipped...
    
    // create a module
    export default angular.module(name, [
      angularMeteor,
      PartyAdd
    ]).component(name, {
      templateUrl: `imports/ui/components/${name}/${name}.html`,
      controllerAs: name,
    

    b) Xóa cơ sở dữ liệu:

  • Tạo file html imports/ui/components/partyRemove/partyRemove.html với nội dụng như sau:

    <button ng-click="partyRemove.remove()">X</button>
    
  • Tạo file .js imports/ui/components/partyRemove/partyRemove.js với nội dung như sau:

    import angular from 'angular';
    import angularMeteor from 'angular-meteor';
    
    import './partyRemove.html';
    
    class PartyRemove {
      remove() {
        console.log('remove party');
      }
    }
    
    const name = 'partyRemove';
    
    // create a module
    export default angular.module(name, [
      angularMeteor
    ]).component(name, {
      templateUrl: `imports/ui/components/${name}/${name}.html`,
        bindings: {
            party: '='
      },
      controllerAs: name,
      controller: PartyRemove
    });
    

    hàm bindings có nhiệm vụ sao chép giá trị của một đối tượng party trong file partyList.html để thực hiện việc xóa đối tượng ấy, việc sao chép giá trị này sẽ được thực hiện khi bạn chèn đối tượng partyRemove này vào đối tượng partyList. Dấu '=' ở đây có nghĩa là ràng buộc dữ liệu hai chiều, ngoài dấu bằng angular còn cung cấp cho chúng ta hai ký tự ràng buộc dữ liệu là '@' và '&', mỗi ký tự có một ý nghĩa khác nhau, bạn có thể tham khảo thêm ở đây: https://viblo.asia/euclid/posts/ZWApGxOM06y3

  • Tiếp theo bạn sẽ chèn partyRemove vào file imports/ui/components/partiesList/partiesList.js và file imports/ui/components/partiesList/partiesList.html:

    Trong partiesList.js:

    import './partiesList.html';
    import { Parties } from '../../../api/lists/parties';
    import { name as PartyAdd } from '../partyAdd/partyAdd';
    import { name as PartyRemove } from '../partyRemove/partyRemove';
    
    class PartiesList {
      constructor($scope, $reactive) {
    ...some lines skipped...
    // create a module
    export default angular.module(name, [
      angularMeteor,
      PartyAdd,
      PartyRemove
    ]).component(name, {
      templateUrl: `imports/ui/components/${name}/${name}.html`,
      controllerAs: name,
    

    Trong partiesList.html:

        <li ng-repeat="party in partiesList.parties">
                {{party.name}}
                <p>{{party.description}}</p>
                <party-remove party="party"></party-remove>
        </li>
    </ul>
    

    Ở đây bạn có thể thấy thuộc tính party của partyRemove được sao chép dữ liệu của đối tượng party trong partiesList, việc sao chép này sẽ được thực hiện bằng phương thức bindings trong partyRemove.js.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Sáng Huỳnh

3 bài viết.
3 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
1 2
Node.js là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine, giúp phát triển các ứng dụng web được sử dụng rộng rãi trên khắp thế ...
Sáng Huỳnh viết hơn 2 năm trước
1 2
Bài viết liên quan
White
12 11
Khi các bạn viết sử dụng AngularJS có thấy thắc mắc về phần làm thế nào để mình viết 1 function mà có thể sử dụng cho toàn bộ app của mình không? V...
My Mai viết hơn 3 năm trước
12 11
White
7 2
1. Giới thiệu: Lovefield, một relational database được viết hoàn toàn bởi JavaScript & được phát triển bởi Google. Cung cấp cú pháp truy vấn tư...
Cùi Bắp viết hơn 2 năm trước
7 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
3 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!