Hầu hết anh em lập trình viên front-end gần đây đều cảm nhận sự nổi lên React do Facebook phát triển. Trước đây mình đã có một bài viết về xây dựng môi trường React App nhanh chóng. Cũng như Facebook, Google trong quá trình phát triển Angular 2 với nhiều cải tiến mới mạnh mẽ và phức tạp hơn cũng cung cấp một công cụ CLI để lập trình viên dễ dàng khởi tạo và tương tác với project một cách linh hoạt, hãy cùng khám phá nhé!

Cài đặt và khởi tạo

Bước đầu tiên, bạn cần có Node 4.x trở lên, sau đó chạy câu lệnh sau để cài đặt Angular CLI:

npm install -g angular-cli

Lưu ý: có thể sẽ cần thêm sudo cài đặt với quyền admin trên Linux.

Khởi tạo một project mới và chạy ngay ư, quá đơn giản:

Một số lệnh hữu ích thường dùng

1. Khởi tạo project và cài đặt dependencies

$ ng new [tên folder của project]

Ngay sau khi chạy lệnh này một folder tương ứng được tạo và tự động cài đặt các packages cần thiết.

installing ng2
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/app/index.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.json
  create src/typings.d.ts
  create angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.

2. Chạy local server để debug

$ ng serve

Debug server này sẽ chạy trên local, hot reload (sử dụng webpack) mỗi khi có sửa code, tự động build và có báo lỗi rõ ràng.

** NG Live Development Server is running on http://localhost:4200. **
Hash: cca2ab9aa93a05e5d3b2
Time: 13608ms
chunk    {0} main.bundle.js, main.bundle.map (main) 4.73 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 9.99 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.22 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: bundle is now VALID.

3. Tạo file chức năng theo template chuẩn

$ ng generate [tên chức năng] [tên file]

Tự động tạo file chức năng tương ứng với template đã được soạn sẵn, hạn chế tối đa việc tạo tay mất thời gian và dễ sai sót.

Bảng CLI tương ứng với các chức năng:

4. Build ra file chạy trên production

Cũng tương tự như bên React App CLI, Angular CLI cũng hỗ trợ lệnh build giúp compile và minify toàn bộ file, giảm tối đa dung lượng và có thể load nhanh hơn trên môi trường chạy thật.

$ ng build

Hash: 882efb23844d5e00e561
Time: 11142ms
chunk    {0} main.bundle.js, main.bundle.map (main) 4.71 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 9.99 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

Ngoài ra bạn còn có thể build theo môi trường đã setup sẵn tuỳ theo nhu cầu, tham khảo tại đây.

Kết luận

Không chỉ có thế, Angular CLI còn cung cấp rất nhiều câu lệnh hữu ích khác, bạn có thể tìm hiểu thông qua lệnh ng help.

Angular 2 chỉ mới release bản chính thức cách đây chưa lâu nhưng cũng đã nhanh chóng cung cấp công cụ Angular CLI từ lúc còn beta giúp các lập trình viên giảm thiểu những vất vả trong quá trình phát triển sản phẩm.

Để có thông tin chi tiết về các lệnh, bạn có thể tham khảo GitHub nhé!