Tạo ứng dụng Angular 2 với TypeScript
Bài đăng này đã không được cập nhật trong 7 năm
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 khaidevDependencies: 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ầnnpm run lite: chạy "lite-server"npm run typings: chạy công cụ typingsnpm run postinstall: gọinpmtự độ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
- Angular 2 - https://angular.io
All rights reserved
