Bắt đầu với angular-meteor 1.3: Buổi 2 - load cơ sở dữ liệu
S2 Corp
3
meteor
17
AngularJS
23
nodejs
74
White

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

Có thể nói cơ sở dữ liệu là phần không thể thiếu đối với bất kì một ứng dụng web động nào, Node.js cũng vậy. Ứng với mỗi project, meteor framework lại cung cấp cho chúng ta một cơ sở dữ liệu nosql có tên gọi là mongodb mà ta có thể thao tác trực tiếp với nó bằng câu lệnh javascript

Bài viết dựa trên http://www.angular-meteor.com/tutorials/socially/angular1/3-way-data-binding

  • Đầu tiên bạn cần tạo một collection có tên là parties, đây chính là một đối tượng của mongodb cho phép lưu trữ dữ liệu tương tự như bảng của SQL.

  • Tạo file imports/api/lists/parties.js và gõ lệnh sau:

    import { Mongo } from 'meteor/mongo';
    export const Parties = new Mongo.Collection('parties');
    

    Ở đây vì muốn cơ sở dữ liệu chạy được cả trên server và client chúng ta cần tạo file này ở bên ngoài 2 thư mục cilent và server.

  • Tạo file imports/startup/server/fitures.js, file này sẽ chạy ở phía server, có tác dụng thêm dữ liệu vào Parties trong trường hợp Parties chưa có dữ liệu nào và chỉ chạy một lần khi ứng dụng được khởi động.

    import { Meteor } from 'meteor/mongo';
    import { Parties } from '../../api/lists/parties';
    Meteor.startup(() =>  {
        if (Parties.find().count() === 0) {
            const parties = [{
                    'name': 'Dubstep-Free Zone',
                    'description': 'Fast just got faster with Nexus S.'
                }, {
                    'name': 'All dubstep all the time',
                    'description': 'Get it on!'
                }, {
                'name': 'Savage lounging',
                    'description': 'Leisure suit required. And only fiercest manners.'
            }];
            parties.forEach((party) => {
                    Parties.insert(party)
            });
        }
    });
    

    Meteor.startup(): nội dung trong phương thức này sẽ được chạy lúc ứng dụng khởi động.
    parties: mảng các đối tượng sẽ được thêm vào Parties.
    parties.forEach() sử dụng vòng lặp để chèn các phần tử của mảng parties vào collection Parties.

  • Tạo file imports/startup/server/findex.js, nội dung của các file .js khác trong imports/startup/server sẽ được import vào đây, hiện tại chúng ta chỉ có file fixtures.js nên nội dung của nó sẽ như sau:

    import './fixtures.js';
    
  • Tiếp theo ta sẽ import chúng vào trong server/main.js bằng dòng code sau:

    import '../imports/startup/server/index.js';
    
  • Ngoài ra bạn cũng có thể thêm mới dữ liệu vào collection parties thông qua lệnh terminal bằng cách mở mới một cửa sổ terminal (ctrl + alt + t) vào thư mực project (cd tên project) gõ vào lệnh sau:

    $ meteor mongo

    Chú ý: chỉ thực hiện việc này sau khi project đã khởi chạy.

  • Thêm mới dữ liệu bằng lệnh sau:

    $ db.parties.insert({ name: "A new party", description: "From the mongo console!" });

  • Bạn cũng có thể xóa dữ liệu bằng lệnh sau:

    $ db.parties.remove( {"_id": "N4KzMEvtm4dYvk2TF"});

    Trong đó _id là giá trị được mongodb sinh tự động để xem nội dung của collection bạn có thể dùng lệnh: db.parties.find();

  • Tiếp đến bạn tạo file imports/ui/components/partiesList/partiesList.js và thêm vào đoạn code sau:

    import angularMeteor from 'angular-meteor';
    
    import './partiesList.html';
    import { Parties } from '../../../api/lists/parties';
    
    class PartiesList {
        constructor($scope, $reactive) {
                'ngInject';
    
                $reactive(this).attach($scope);
    
                this.helpers({
                parties() {
                        return Parties.find({});
                }
                });
         }
    }
    
    const name = 'partiesList';
    
    // create a module
    export default angular.module(name, [
        angularMeteor
    ]).component(name, {
        templateUrl: `imports/ui/components/${name}/${name}.html`,
        controllerAs: name,
        controller: PartiesList
    });
    
  • Tiếp tục tạo file imports/ui/components/partiesList/partiesList.html với nội dung như sau:

    <ul>
      <li ng-repeat="party in partiesList.parties">
        {{party.name}}
        <p>{{party.description}}</p>
      </li>
    </ul>
    
  • Trong client/main.js bạn thay đổi nội dung như sau:

    import angular from 'angular';
    import angularMeteor from 'angular-meteor';
    
    import { name as PartiesList } from '../imports/ui/components/partiesList/partiesList';
    
    angular.module('socially', [
            angularMeteor,
            PartiesList
    ]);
    
  • Tiếp tục thay đổi nội dung của client/index.html như sau:

    <body ng-app="socially" ng-strict-di="">
        <parties-list></parties-list>
    </body>
    

    Lúc này bạn chương trình của bạn đã có thể hoạt động tốt tuy nhiên để tiện cho việc sắp xếp và quản lý chúng ta nên tạo một component chính có tên là socially cho ứng dụng của mình.

  • Tạo file imports/ui/components/socially/socially.html thêm vào đoạn code sau:

    <parties-list></parties-list>
    
  • Tạo file imports/ui/components/socially/socially.js thêm vào đoạn code sau:

    import angular from 'angular';
    import angularMeteor from 'angular-meteor';
    
    import './socially.html';
    import { name as PartiesList } from '../partiesList/partiesList';
    
    class Socially {}
    
    const name = 'socially';
    
    // create a module
    export default angular.module(name, [
        angularMeteor,
        PartiesList
    ]).component(name, {
        templateUrl: `imports/ui/components/${name}/${name}.html`,
        controllerAs: name,
        controller: Socially
    });
    
  • Tiếp theo bạn sửa lại nội dung của file index.htmlcilent/main.js như sau:

    Trong file index.html:

    <body ng-app="socially" ng-strict-di="">
        <socially></socially>
    </body>
    

    Trong file cilent/main.js:

    import angular from 'angular';
    import angularMeteor from 'angular-meteor';
    
    import { name as Socially } from '../imports/ui/components/socially/socially';
    
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 1
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á...
Sáng Huỳnh viết hơn 2 năm trước
1 1
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
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
{{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á!