[Cùng học Angular 2] Cài đặt môi trường
angular2
4
White

Sang Nguyễn Đắc viết ngày 31/12/2016

Mình viết bài này vì muốn giới thiệu cho các bạn cách cài đặt một môi trường cơ bản nhất để làm quen với Angular 2 dành cho các bạn mới bắt đầu hoặc muốn học.

Những thứ thiết yếu trước khi bắt đầu:

  1. NodeJS và một package manager: Bạn nên download bản 4.x trở lên và sử dụng npm 3.x trở lên để tăng tốc độ xử lý và giảm gánh nặng cho ổ cứng. Lời khuyên là dùng bản LTS hiện tại là 6.9npm 4.x. Bạn có thể vào đây và tiến hành download phiên bản phù hợp với hệ điều hành của mình. Sau khi đã cài đặt, gõ npm version để kiểm tra. img
  2. Typings: Gõ npm install -g typings trong terminal
  3. Typescript: npm install -g typescript
  4. Node-gyp: Chỉ dành cho Windows để build một số package cần thiết cho môi trường Windows, các bạn có thể tham khảo cách cài đặt node-gyp và windows build tools ở đây.
  5. Text edior: Dùng bất kì cái nào bạn thích, nhưng trong bài này mình sẽ dùng Visual Studio Code (VSC) để demo.
  6. Một angular 2 starter kit: Cũng tương tự, dùng bất kì cái nào bạn thích, nhưng ở đây mình sẽ dùng angular-cli: gõ npm install -g angular-cli.

Những package của visual studio code giành cho angular 2 và typescript

Các bạn có thể vào đây để tìm extension phù hợp hoặc mở panel extension của vsc để download trực tiếp.

  • Angular 2 TypeScript/HTML Snippets: Snippets cho angular 2
  • Beautify: Auto format code.
  • EditorConfig for VSCode: Để đồng nhất về thiết lập (khoảng cách, xuống dòng,...) cho các editor khác nhau để giữ tính đồng bộ.
  • Path Intellisense: Giúp bạn có thể import file dễ dàng hơn
  • Project Manager: Quản lý project, có thể lưu bất kì một workspace nào đó lại và sau này có thể mở lên bằng phím tắt
  • Settings Sync: Lưu settings và các package đã cài đặt thông qua Gist
  • TSLint: Kiểm tra lỗi cho file .ts (typescript)

Một số package khác có thể giúp cho việc học hành của bạn bớt nhàm chán hơn:

  • vscode-icons: Một bộ icon rất đẹp dành cho VSC
  • One Monokai Theme: Giao diện.

Mọi thứ đã xong, bây giờ là lúc bắt đầu với hello world

  • Đầu tiên, tạo một folder mà bạn thích ở vị trị mà bạn thích
  • Mở terminal ở vị trí đó
  • ng new <tên_project> ng new hello-world

ng new hello-world

img2

  • cd hello-world

code .

  • Và project của bạn đã được mở ra thành công trong vsc! img3

Một thông báo hiện ra hỏi về phiên bản Typescript mà bạn muốn dùng cho vsc, chọn Use Workspace.

Ctrl+`

Một cửa sổ terminal thu nhỏ sẽ được mở lên, rất tiện lợi!

Trong cửa sổ này, gõ:

ng server

Sau đó mở trình duyệt và truy cập vào http://localhost:4200 và... thành công!

img4

Bây giờ, mở file src -> app -> app.component.ts và thay dòng 9 từ app works! thành hello world, refresh trang web của bạn và bạn sẽ thấy Hello world hiện ra!

Chúc mừng, bạn đã hoàn thành dòng code đầu tiên của Angular 2!

Kích hoạt HMR (Hot Module Replacement):

Angular-cli sử dụng Webpack để bundle project của bạn, vì thế bạn hoàn toàn có thể sử dụng HMR để tăng tốc quá trình build app trong lúc lập trình (tức là lúc bạn sửa một dòng code, thay vì phải compile toàn bộ các module thì nó chỉ compile các module bị ảnh hưởng bởi dòng code đó mà thôi).

  1. Đảm bảo bạn phải sử dụng angular-cli 1.0.0-beta.22 hoặc cao hơn. Gõ ng --version để check.
  2. Mở folder src/environments/ trong project của bạn
  3. Thêm file có tên: environment.hmr.ts và paste đoạn code này vào:
export const environment = {
 production: false,
 hmr: true
};

Sau đó mở file src/environments/environment.prod.ts và sửa:

export const environment = {
 production: true,
 hmr: false
};

Cuối cùng, sửa file src/environments/environment.ts:

export const environment = {
 production: false,
 hmr: false
};

Mở angular-cli.json và sửa đoạn này:

...
    "environments": {
      "source": "environments/environment.ts",
      "dev": "environments/environment.ts",
      "hmr": "environments/environment.hmr.ts",
      "prod": "environments/environment.prod.ts"
    },
...

Kế đến, sửa file package.json thành:

...
  "scripts": {
    "start": "ng serve",
    "hmr": "ng serve --hmr -e=hmr",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  }
...

Tiếp theo, cài đặt @angular/hmr :
npm install --save-dev @angularclass/hmr

Tạo file src/hmr.ts và paste đoạn code này:

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
 let ngModule: NgModuleRef<any>;
 module.hot.accept();
 bootstrap().then(mod => ngModule = mod);
 module.hot.dispose(() => {
 let appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
 let elements = appRef.components.map(c => c.location.nativeElement);
 let makeVisible = createNewHosts(elements);
 ngModule.destroy();
 makeVisible();
 });
};

Phần còn lại là sửa file src/main.ts

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

import { hmrBootstrap } from './hmr';

if (environment.production) {
 enableProdMode();
}

const bootstrap = () => {
 return platformBrowserDynamic().bootstrapModule(AppModule);
};

if (environment.hmr) {
 if (module[ 'hot' ]) {
 hmrBootstrap(module, bootstrap);
 } else {
 console.error('HMR is not enabled for webpack-dev-server!');
 console.log('Are you using the --hmr flag for ng serve?');
 }
} else {
 bootstrap();
}

Bây giờ bạn đã có thể chạy HMR, thay vì chạy ng serve thì bây giờ sẽ là:

npm run hmr

Và thử sửa đoạn Hello world trong file app.component.ts thành bất kì đoạn văn bản nào đó và mở mở lại trình duyệt để cảm nhận tốc độ load!

Vậy là bạn đã có thể tiến hành code thử một trang web đơn giản với Angular 2 rồi, nếu muốn tìm hiểu thêm thì có thể truy cập angular docs và làm theo tutorial.

Cảm ơn đã đọc và hẹn gặp lại ở bài tiếp theo.

Nhật Khánh - VBlog - VTeam

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Sang Nguyễn Đắc

6 bài viết.
11 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
15 10
Mở đầu series bài viết tìm hiểu về Frontend Web mình sẽ hướng dẫn các bạn cài đặt và thiết lập môi trường làm việc hiệu quả. Các ứng dụng cần th...
Sang Nguyễn Đắc viết hơn 1 năm trước
15 10
White
10 2
I. Sass và Gulp là gì? 1. Sass (Link) là một CSS PreProcessor (Tương tự Less, Stylus, …). Sass được sinh ra để giúp bạn viết CSS nhanh và rõ ràn...
Sang Nguyễn Đắc viết hơn 1 năm trước
10 2
White
8 2
Angular 2 ra mắt kèm theo rất nhiều tính năng khá hữu ích Một trong số đó là sự xuất hiện của RxJS. Vậy bài này chúng ta sẽ cùng tìm hiểu căn bản v...
Sang Nguyễn Đắc viết hơn 1 năm trước
8 2
Bài viết liên quan
White
17 5
(Ảnh) Hiện tại mình đang làm một dự án về angular2 nên thành ra mình cũng muốn làm một chuỗi bài về angular2 cho những bạn nào đang muốn tìm hiểu v...
Dinh Duong viết hơn 1 năm trước
17 5
White
8 2
Angular 2 ra mắt kèm theo rất nhiều tính năng khá hữu ích Một trong số đó là sự xuất hiện của RxJS. Vậy bài này chúng ta sẽ cùng tìm hiểu căn bản v...
Sang Nguyễn Đắc viết hơn 1 năm trước
8 2
White
9 6
Tháng 32017, Angular team đã phát hành Angular 4, vậy Angular 4 có gì mới, có những gì thay đổi mà chúng ta cần lưu ý. Bài này sẽ giới thiệu cho cá...
Tiep Phan viết hơn 1 năm trước
9 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
11 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!