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

Phần 3: Giải thích

Ở 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.

1. 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. 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. 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à cmd trong windows

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 : trong Terminal 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.