Bài viết được dịch từ: toddmotto.com

Trong loạt bài viết gồm 4 bài về Angular (v2+) này, chúng ta sẽ tìm hiểu cách làm thế nào để khởi động một ứng dụng Angular, cách tạo ra một component, truyền dữ liệu vào trong một component và truyền dữ liệu mới ra ngoài sử dụng các event.

Mục lục

  • Giới thiệu
  • Các công cụ có thể sử dụng
    • Webpack
    • System.js
    • Angular CLI
  • Root component
  • Root module
  • Bootstrapping
    • Module export/import
    • Brower bootstrapping
    • Bootstrapping module
  • Plunker
  • Bước tiếp theo

Các bài viết trong loạt bài này

  1. Khởi động ứng dụng Angular đầu tiên của bạn
  2. Tạo Angular component đầu tiên của bạn
  3. Truyền dữ liệu vào các component Angular với @Input
  4. Các event component với EventEmitter và @Output trong Angular

Giới thiệu

Angular quickstart có thể là một nơi tốt để bắt đầu với phiên bản tiếp theo của Angular, tuy nhiên một vài khía cạnh quan trọng của hướng dẫn này có thể cần giải thích chi tiết hơn cho những người mới bắt đầu với Angular. 

Chúng ta sẽ thực hiện những thứ cần thiết theo một trật tự hợp lý để bắt đầu và nó sẽ dạy bạn cái gì đang xảy ra với tất cả các thiết lập, cũng như cách tạo ra Angular component đầu tiên của bạn và khởi động ứng dụng.

Các công cụ có thể sử dụng

Một tóm tắt ngắn gọn, về các công cụ có sẵn mà bạn có thể sử dụng khi thiết lập dự án Angular đầu tiên của mình.

Webpack

Webpack đã trở thành chuẩn khi xây dựng các ứng dụng Angular, bạn có thể đọc bài viết giới thiệu về Webpack trên tài liệu hướng dẫn của Angular.

System.js

System.js đã được sử dụng khi bắt đầu xây dựng Angular và trong quá trình phát hành các phiên bản thử nghiệm, tuy nhiên Angular team đã quyết định chuyển sang sử dụng Webpack để để tận dụng sức mạnh của nó.

Angular CLI

Angular CLI được xây dựng, để giúp tạo ra bộ khung cho một dự án mới, tạo ra các component và giúp triển khai ứng dụng. Ở bên dưới, nó sử dụng Webpack, đây là một nơi tuyệt vời để bắt đầu cho những người mới, nó giúp bạn giảm bớt việc phải học các công cụ mới liên quan tới Angular.

Root Component

Để khởi động một ứng dụng Angular, chúng ta cần một root component. Chúng ta sẽ học cách tạo một component trong bài tiếp theo. Bây giờ, hãy xem một root component điển hình, mà bạn thường thấy trong ứng dụng Angular:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      Hello world!
    </div>
  `
})
export class AppComponent {}
Tham khảo các khóa học lập trình online, onlab, và thực tập lập trình tại TechMaster

Root module

Mỗi một root component sẽ ở trong một module, được định nghĩa bằng cách sử dụng @NgModule. Đây là một @NgModule điển hình cho một ứng dụng Angular, nó sẽ cần import root component:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ]
})
export class AppModule {}

Bạn có thể đọc nhiều hơn về NgModule ở đây. Đây là giải thích về 3 thuộc tính của @NgModule được sử dụng ở ví dụ trên:

  • declarations: Đăng ký các component trong module này
  • bootstrap: Nói cho module biết component nào dùng để khởi động
  • imports: Import các module khác vào module này

Bootstrapping

Bây giờ chúng ta đã có root component và root module, chúng ta cần học cách làm thế nào để khởi động module đó.

Module export/import

Bạn có thể để ý, ở ví dụ trên khi sử dụng @NgModule chúng ta sử dụng từ khóa export với module AppModule. Điều này cho phép chúng ta import nó từ bất kỳ đâu và nói với Angular khởi động module này.

Thông thường bạn sẽ khởi động một ứng dụng Angular bằng cách import module tới một file mới (main.ts):

// main.ts
import { AppModule } from './app.module';

Brower bootstrapping

Angular có thể khởi động trong nhiều môi trường khác nhau, chẳng hạn như server-side, chúng ta cần import một module cụ thể cho môi trường đang sử dụng. Với browser bootstrapping, chúng ta cần import một thứ được gọi là plat-form-browser-dynamic module:

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

Bạn có thể thấy chúng ta nhận platformBrowserDynamic bằng cách import từ module plat-form-browser-dynamic,  đây là một bootstrapping function, cái cho phép chúng ta khởi tạo ứng dụng của mình.

Bootstrapping module

Bước tiếp theo là nói với platformBrowserDynamic đã được import ở trên, module nào bạn muốn khởi tạo. Trong trường hợp này, đó là AppModule (root module), và AppComponent (root component) cũng đã đăng ký trong module này. Chúng ta chỉ cần truyền AppModule tới phương thức bootstrapModule: 

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

platformBrowserDynamic().bootstrapModule(AppModule);

Và đó chính là những khái niệm chính của việc khởi động một ứng dụng Angular.

Plunker

Mọi thứ ở trên đã có sẵn trong một Plunker, khi sử dụng Plunker, bạn sẽ sử dụng System.js, chúng ta không thể sử dụng Webpack (nó là một công cụ phát triển offline):

Bước tiếp theo

Bây giờ, chúng ta đã biết quá trình khởi động cơ bản làm việc như thế nào, hãy tiếp tục học cách tạo một Angular component.