vi
new
0
Avatar
Phuc Le Cong @le.cong.phuc
387 23 14
Đã đăng vào thg 4 30, 2016 5:48 SA 5 phút đọc
3.4K

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 😃

Angular Component

Hãy tạo một thư mục con có tên là app trong thư mục của dự án.

mkdir app
cd    app

Thêm file app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>Ứng dụng Angular 2 đầu tiên</h1>'
})
export class AppComponent { }

AppComponent là gốc rễ của ứng dụng. Mọi ứng dụng Angular đều có ít nhất 1 component gốc, thông thường đặt tên là AppComponent.

Các component là các khối được xây dựng cơ bản của ứng dụng Angular. Một component có nhiệm vụ điều khiển một phần màn hình hoặc một view hoặc thông qua một template có liên quan.

Main.ts

Bây giờ chúng ta cần một thứ gì đó để nói cho Angular biết load component gốc lên.

Thêm file main.ts vào thư mục app

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

Chúng ta import 2 thứ mà chúng ta cần để khởi động ứng dụng

  • Chức năng bootstrap của thư viện browser trong Angular 2
  • Component gốc của ứng dụng: AppComponent

Sau đó chúng ta gọi bootstrap với AppComponent.

Thêm HTML

File index.html là một trang web lưu trữ ứng dụng.

Di chuyển ra thư mục gốc của dự án

 cd ..

Thêm file index.html như sau:

<html>
  <head>
    <title>Angular 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load thư viện -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Cấu hình SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Hiển thị ứng dụng -->
  <body>
    <my-app>Đang tải...</my-app>
  </body>
</html>

Có 3 phần đáng chú ý trong file HTML trên:

  • Load các thư viện JavaScript cần thiết
  • Cấu hình SystemJS - nơi mà chúng ta cũng import và dùng file main vừa viết ở trên
  • Thẻ <my-app> trong thẻ <body> là nơi ứng dụng của chúng ta đang sống =))

Thêm Style

Các style không bắt buộc phải có trong ứng dụng, nhưng làm web mà không dùng style nào chắc là dị nhân =)) Giả sử chúng ta có 1 file style.css như sau:

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}

Biên dịch và chạy thôi!

Đến lúc xem thành quả ra sao rồi. Các bạn mở terminal lên và chạy lệnh sau để biên dịch và chạy ứng dụng

 npm start

Nếu bạn không gặp lỗi gì thì chúc mừng bạn đã tạo được một ứng dụng Angular 2 với TypeScript. Nếu gặp bất kỳ lỗi nào thì comment phía bên dưới nhé các bạn.

Bài viết tiếp theo mình sẽ cùng các bạn đi vào từng phần chi tiết hơn. Mình hi vọng bài viết này sẽ hữu ích với các bạn. Hãy góp ý để các bài viết sau được hoàn thiện hơn nhé.

Tham khảo

AngularJS TypeScript

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí