Hướng dẫn Angular 2 cho người mới bắt đầu – Phần 3

Bài viết được sự cho phép của tác giả Tino Phạm

Ở phần 2, bạn đã tạo được một ứng dụng với Angular 2 + Typescript. Tuy nhiên, nó không có gì ngoài hiển thị dòng chữ “My First Angular 2 App”. Trong phần này, mình sẽ cố gắng giải thích thêm về các bước mà chúng ta đã thực hiện ở phần 2.

  "Muốn đi nhanh phải dựa vào dev, muốn đi nhanh hơn nữa phải dựa vào khách hàng"

  8 lợi thế khi sử dụng Polymer so với Angular và React
  1. File tsconfig.json
    File tsconfig.json là file cấu hình cho trình biên dịch của Typescript (Typescript compiler configuration). Nghĩa là, chúng ta viết code Typescript ( *.ts ) nhưng khi chạy ứng dụng thì browser sẽ đọc nội dung file ( *. js ). Ví dụ: main.ts => sẽ có main.js, main.js.map được sinh ra.Các files main.js, main.js.map được Typescript compiler (tsc) tạo ra khi chúng ta gọi lệnh npm start.Vậy khi Typescript compiler chạy, nó sẽ đọc nội dung file tsconfig.json để biết được làm thế nào để biên dịch từ Typescript sang Javascript.

    • target: “es5”  => sử dụng phiên bản ECMAScript 2009 (ES6: ECMAScript 2015). Bạn có thể thay đổi nếu muốn dùng ES6 để biên dịch.
    • module: “system” => chỉ ra làm thế nào để các modules được load lên khi làm việc với các file riêng lẽ. Ở đây sử dụng system. Ngoài ra còn các patterns: CommonJS, AMD, UMD
    • sourceMap: true => cho phép tạo ra file *.map tương ứng.
    • moduleResolution: “node” => cách này chúng ta có thể load modules từ thư mục node_modules.
    • emitDecoratorMetadata và experimentalDecorators: true => enable sử dụng decorators.
    • noImplicitAny: false => disable thông báo lỗi khi method hay property không có kiểu.
    • exclude: định nghĩa những thư mục, những files mà sẽ bị loại ra hay  bỏ ra khi biên dịch.
  2. File typings.json
    Nhiều thư viện (Library) Javascript mở rộng thêm các tính năng mới và cú pháp mới cho môi trường Javascript. Nhưng, trình biên dịch của Typescript (Typescript compiler) không nhận ra được và nó sẽ quăng ra lỗi.
    File typings.json sẽ được dùng để giải thích cho những định nghĩa mà bạn dùng để mở rộng Javascript trong ứng dụng của bạn.

    • core-js: giúp cho các trình duyệt chỉ hỗ trợ ES5 trở xuống có thể hiểu được những code viết bằng ES6.
    • jasmine: sử dụng Jasmine test framework.
    • node: dùng cho code mà nó tham chiếu đến các đối tượng trong môi trường NodeJS
  3. File package.json
    package.json lưu lai thông tin của ứng dụng, cùng với thông tin của những gói thư viện mà ứng dụng của bạn đang dùng. Khi chúng ta gõ lệnh: npm install thì những Library được định nghĩa trong package.json sẽ được tải về và cài đặt.
  4. Terminal trong VS Code và Command Line (cmd) trong window
    Trong Visual Studio Code bạn có thể sử dụng Terminal thay cho Command Line của window. Sẽ tiện lợi hơn cho bạn không cần mở nhiều windows khi làm việc.
  5. Một số lệnh cần thiết khi build và run ứng dụng
    • npm install: dùng để cài đặt tất cả các gói được định nghĩa sẵn  trong file package.json
    • npm install tên_package -g –save: để cài đặt từng gói thư viện mà bạn cần và lưu thông tin vào package.json. Cách này dùng khi bạn build ứng dụng của bạn ban đầu. Khi gửi ứng dụng của bạn cho người khác bạn sẽ bỏ qua (bỏ ra) thư mục node_modules. Đây là thư mục chứa những gói thư viện được dùng cho ứng dụng của bạn. Vậy, những người khác sẽ phải gõ lệnh: npm install để tải về và cài đặt những gói được lưu trong package.json
    • tsc: lệnh này dùng để biên dịch file *.ts thành *.js
    • npm run lite: chạy lite server
    • npm start: lệnh này sẽ tự động thực thi lệnh tsc và npm run lite
    • ctrl + c : stop lite server
    • ctrl + `: mở chế độ Terminal trong VS Code

Lưu ý: để sử dụng được lệnh tsc bạn phải update typescript 2.0 và trong file tsconfig.json bạn sửa thông tin:
“target”: “es6“,
“module”: “commonjs”

Trong phần 4, chúng ta sẽ viết thêm các tính năng mới và mở rộng ứng dụng.

Tham khảo:
1. http://www.typescriptlang.org/docs/handbook/compiler-options.html
2. https://angular.io/docs/ts/latest/guide/typescript-configuration.html
3. https://www.tutorialspoint.com/angular2/angular2_environment.htm

Bài viết gốc được đăng tải tại thangphampt.wordpress.com

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên TopDev