Tạo ứng dụng Angular 2 với TypeScript

Hôm nay mình sẽ cùng các bạn xây dựng một ứng dụng Angular 2 với TypeScript. Nếu bạn chưa biết về TypeScript thì hãy đọc bài này https://viblo.asia/le.cong.phuc/posts/OEqGj50JM9bL trước nhé.

Giờ các bạn đã sẵn sàng chưa nào? Chúng ta cùng bắt đầu nhé.

Môi trường phát triển

Trước tiên chúng ta cần cài đặt node và npm nếu trên máy tính của bạn chưa có.

Sau đó tạo một thư mục dự án mới:

mkdir angular2
cd    angular2

Thêm mới file tsconfig.json. File này để thiết lập các cấu hình biên dịch TypeScript

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Tiếp tục thêm file typings.json vào thư mục của dự án. Bởi vì có rất nhiều thư viện JavaScript mở rộng trong môi trường JavaScript với các tính năng và cú pháp khiến TypeScript nhầm lẫn khi biên dịch. Do đó chúng ta cần định nghĩa rõ ràng chúng trong file này.

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
  }
}

Thêm file package.json vào thư mục dự án

{
  "name": "angular2",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently "npm run tsc:w" "npm run lite" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.17",
    "systemjs": "0.19.26",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.8.1"
  }
}

Các lập trình viên ứng dụng Angular thường dùng npm để cài đặt các thư viện cần thiết. Angular cũng khuyến khích thiết lập các thư viện đó trong:

• dependencies: các thư viện yêu cầu trong môi trường triển khai
• devDependencies: các thư viện yêu cầu trong môi trường phát triển

Ngoài ra trong file package.json cũng thiết lập một vài scripts khi chạy ứng dụng với npm như:

• npm start: chạy biên dịch và server cùng một lúc, cả 2 đều trong "watch mode"
• npm run tsc: chạy biên dịch TypeScript một lần
• npm run lite: chạy "lite-server"
• npm run typings: chạy công cụ typings
• npm run postinstall: gọi npm tự động sau khi cài đặt thành công. Script này đã được định nghĩa trong file typings.json

Cài đặt các món chúng ta đã thiết lập ở trên bằng cách gõ lệnh npm install trong terminal.

Như vậy chúng ta đã cài đặt xong môi trường phát triển, giờ thì bắt đầu code ứng dụng thôi