Bắt đầu với angular-meteor 1.3: Buổi 1 - ứng dụng đầu tiên
S2 Corp
3
meteor
17
AngularJS
23
nodejs
73
White

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

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ế giới. Một trong những framework phổ biến của Node.js là meteor. Và với sự kết hợp của nó với angular, meteor cho phép lập trình viên dễ dàng hơn trong việc xây dựng các hệ thống lớn.

Bài viết này sẽ hướng dẫn các bạn cách tạo một ứng dụng node.js đơn giản đầu tiên với angular và meteor framework

Bài viết được dựa trên: http://www.angular-meteor.com/tutorials/socially các bạn có thể tham khảo thêm ở đây

  • Đầu tiên bạn vào Terminal (Với window bạn vào run gõ cmd để hiển thị giao diện dòng lệnh) và gõ vào dòng lệnh sau để tạo ứng dụng meteor:

    $ meteor create socially

  • Vào thư mục socially:

    $ cd socially

    Bây giờ chúng ta cần remove một số temlate mặt định của meteor và thay vào đó là một số template khác của angular.

  • Xóa template của meteor:

    $ meteor remove blaze-html-templates
    $ meteor remove ecmascript

  • Thêm template của angular:

    $ meteor npm install --save angular angular-meteor
    $meteor add angular-templates pbastowski:angular-babel

    Lúc này chúng ta đã có thể áp dụng những thuộc tính của angular trong project meteor của mình.

  • Vào file client/main.html gõ nội dung sau:

    <p>Nothing here</p>
    
  • Vẫn ở thư mục client, tạo file index.html với nội dung như sau:

    <body ng-app=”socially”>
        <div ng-include src="'client/main.html'"></div>
    </body>
    

    ng-include: cho phép bạn gọi đến nội dung của một file html khác, trong trường hợp này là file main.html. Một điều cần lưu ý là địa chỉ file được sử dụng ở đây phải là địa chỉ tuyệt đối chứ không phải địa chỉ tương đối.

    ng-app: chứa module chính của project, mọi project angular đều cần có một module chính để có thể khởi chạy, chúng ta sẽ tạo một module trong file main.js theo hướng dẫn dưới đây.

  • Vào file client/main.js gõ nội dung sau:

    import angular from 'angular';
    import angularMeteor from 'angular-meteor';
    
    angular.module('socially', [
      angularMeteor
    ]);
    

    Bạn có thể thấy là chúng ta đã tạo được một module có tên là socially được sử dụng trong ng-app của file index.
    Lúc này bạn đã có thể chạy ứng dụng đầu tiên của mình.

  • Chạy ứng dụng như sau:

    $ meteor

    => Started proxy
    => Started MongoDB.
    => Started your app.
    => App running at: http://localhost:3000/

    Bạn có thể dùng trình duyệt của mình vào http://localhost:3000/ để xem kết quả.

  • Bạn có thể thử thay đổi một chút ở file client/main.html như dưới đây và xem kết quả:

    <p>Nothing here {{ 'yet' + '!' }}</p>
    <p>1 + 2 = {{ 1 + 2 }}</p>
    

    Vậy là bạn đã hoàn thành ứng dụng meteor-angular đầu tiên của mình, bạn có thể tham khảo thêm ở đây
    http://www.angular-meteor.com/tutorials/socially/angular1/bootstrapping

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
Bài viết liên quan
Male avatar
5 0
Publications và Subscriptions Trong chương này bạn sẽ: Hiểu được cách thức hoạt động của publications và subscriptions. Học xem gói Autopubli...
Nguyen Quang Phuong viết hơn 3 năm trước
5 0
White
0 0
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 ...
Sáng Huỳnh viết hơn 2 năm trước
0 0
{{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á!