Tìm hiểu về Meteor (phần 2) - Viết ứng dụng meteor-angular (sample)
Như bài viết trước mình đã giúp các bạn có một cái nhìn tổng quan về Meteor. Nếu các bạn chưa đọc qua thì có thể tham khảo ở link bên dưới. Title: Tìm hiểu về Meteor: https://viblo.asia/dong.xuan.thang/posts/L4x5xRxbZBM Node.js là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 ...
Như bài viết trước mình đã giúp các bạn có một cái nhìn tổng quan về Meteor. Nếu các bạn chưa đọc qua thì có thể tham khảo ở link bên dưới. Title: Tìm hiểu về Meteor: https://viblo.asia/dong.xuan.thang/posts/L4x5xRxbZBM
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. 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à 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>Hello world!</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>Hello world {{ 'yet' + '!' }}</p>
<p>1 + 1 = {{ 1 + 1 }}</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 Cảm ơn các bạn đã theo dõi bài viết.
