Bài viết hỗ trợ tài liệu cho chương trình đào tạo web front-end có trạng thái với Angular của STDIO Training.
Vui lòng liên hệ tại đây tại đây.
Vũ Quang Huy Angular là một nền tảng ứng dụng (application framework) được xây dựng và bảo trì bởi Google, khi đó được viết bằng JavaScript. Đến năm 2014, Google quyết định thay đổi toàn bộ cấu trúc framwork và Angular 2 được ra đời, sử dụng ngôn ngữ lập trình chủ đạo là TypeScript.
Nội dung bài viết

Giới thiệu

Angular là một nền tảng ứng dụng (application framework) được xây dựng và bảo trì bởi Google - https://angular.io. Phiên bản Angular lần đầu tiên được giới thiệu vào năm 2010, tuy nhiên đây chỉ là một web-framework được viết bằng JavaScript. Đến năm 2014, Google quyết định thay đổi toàn bộ kiến trúc của dự án, biến nó thành một nền tảng ứng dụng thay vì chỉ gói gọn trên môi trường web, và đó là tiền đề cho Angular 2 sau này. Phiên bản này cũng sử dụng ngôn ngữ lập trình chủ đạo là TypeScript (được phát triển bởi Microsoft) thay cho JavaScript.

Tuy nhiên, tên gọi Angular 1 và Angular 2 sẽ gây một số khó khăn cho người sử dụng do bản chất bản 2 là làm mới toàn bộ, chỉ dựa lại một số ý niệm của bản một. Vì vậy chúng được đặt tên lại như sau:

  • Angular 1 trở thành AngularJS
  • Angular 2 và các phiên bản sau này chỉ được gọi ngắn gọn là Angular.

Và theo Google thì cứ mỗi 6 tháng Angular sẽ được cập nhật một bản mới, tại thời điểm tôi viết bài này Angular đã ra đến phiên bản thứ 5.

install-angular-1

Môi trường thử nghiệm

Bài viết này được thử nghiệm trên Windows 10 Pro – 64bit với các phiên bản phần mềm:

  • Node.js phiên bản 8.9.1
  • npm phiên bản 5.5.1
  • Visual Studio Code phiên bản 1.18.1

Bạn đọc tham khảo cách cài đặt Node.js và npm tại bài viết Giới Thiệu Và Cài Đặt NodeJS và cách cài đặt Visual Studio Code tại bài Cài Đặt Visual Studio Code Trên Môi Trường Windows.

Cài đặt Angular

Nhằm đơn giản quá trình thao tác với các dự án Angular, công cụ Angular CLI - Angular Command Line Interface - ra đời hỗ trợ cho việc khởi tạo, sinh các component cũng như kiểm thử và triển khai ứng dụng.

Angular CLI thực chất là một Node.js package, vì vậy ta sẽ cài đặt thông qua trình quản lý package của Node.js - npm. Mở cửa sổ console và ta gõ vào như sau:

npm install -g @angular/cli

Kiểm tra cài đặt thành công và số phiên bản bằng cách nhập:

ng version

install-angular-2

Tạo project Angular đầu tiên

Với Angular CLI, ta tạo project đầu tiên với cú pháp sau:

ng new <project-name>

Ví dụ ta tạo project tên HelloWorld thì sẽ nhập như sau:

ng new HelloWorld

Quá trình này mất khoảng từ 3 - 5 phút tùy thuộc tốc độ mạng do phải tải các gói phụ thuộc. Cấu trúc của project sau khi được tạo thành công như sau.

install-angular-3

Nhờ có Node.js vì vậy project có thể được host và chạy thử với lệnh:

ng serve

install-angular-4

Mặc định project sẽ được chạy trên địa chỉ http://localhost:4200. Ta có thể thay đổi port mặc định nhờ tham số --port. Ví dụ muốn đổi về port 1234.

ng serve --port 1234

Kết quả thực thi với port 4200 như sau.

install-angular-5

THẢO LUẬN
Sự hoàn hảo trong thiết kế đạt được không phải khi không có gì cần phải thêm vào, mà là không có gì cần phải bỏ bớt. Antoine de Saint-Exupéry
300x250

Liên hệ tài trợ cho STDIO

Tham gia tài trợ STDIO và đặt quảng cáo theo định kỳ của cá nhân, cửa hàng, doanh nghiệp của bạn tại đây.
Gọi: 028.36205514 www.stdio.vn/contact
ĐÓNG