Angular 2 căn bản - Phần 1: Giới thiệu về angular 2 và tạo web app đơn giản

Bài đăng này đã không được cập nhật trong 3 năm

1. Angular 2 là gì? Như các bạn đã biết, hiện có rất nhiều các framework về javascript trên thị trường như ReactJS, Vue.js, AngularJS.... Và trong bài viết này, mình sẽ giới thiệu đến các bạn một trong những framework được cho là tốt nhất hiện nay, đó là Angular 2. Và phiên bản này của Google hoàn toàn khác với AngularJS hay Angular 1, cho nên các bạn dù có không biết những framework đó thì cũng có thể yên tâm mà đọc tiếp ) Vậy tại sao lại lựa chọn Angular 2? Nó có những ưu điểm nào? Đầu tiên, Angular 2 được thiết kế để xây dựng một ứng dụng phức tạp trên trình duyệt. Nó cũng tốn ít bộ nhớ hơn khi xử lý với lượng dữ liệu lớn, đồng thời cũng tăng tốc việc load thông qua server side rendering. Một số ưu điểm khác của Angular 2 đó là nhanh và dễ hơn Angular 1. Nó cũng hỗ trợ các phiên bản trình duyệt mới nhất cũng như một số trình duyệt cũ như IE9+, Android 4.1 trở lên, đồng thời cũng hỗ trợ đa nền tảng... Angular 2 chủ yếu tập trung vào mobile app. Đặc biệt, Angular 2 sử dụng TypeScript để code, và còn một số ưu điểm nữa mà các bạn có thể tìm hiểu thêm ở đây Bản thân minhfh sau khi dùng thử cũng cảm thấy rất thích sử dụng, nếu dự án phải chọn angular 2 hay react thì chắc chắn mình sẽ thuyết phục KH để sử dụng angular. 2. Tạo một web app đơn giản Phù, phần giới thiệu đã xong, bắt tay vào code thôi !!! Trong quá trình code mình sẽ giới thiệu dần dần cách hoạt động của các thành phần trong angular. Ở đây, mình sẽ thực hiện việc build một ứng dụng angular 2 bằng cách sử dụng angular-cli. Nó là một tool rất tiện lợi khi đã chứa hầu hết những thứ mà bạn cần để viết một ứng dụng angular. Đầu tiên, máy bạn cần cài đặt npm và nodejs (Phần cài đặt 2 mục này mình sẽ để các bạn tự tìm hiểu vì nó cũng khá đơn giản) Mở terminal lên và gõ:

npm install -g @angular/cli

Tuy nhiên mình khuyên các bạn nên sử dụng sudo Đã xong bước chuẩn bị. Bước tiếp theo là khởi tạo một ứng dụng mới:

ng new angular-get-started --style scss

OK, rất đơn giản đúng không? Muốn kiểm tra xem mọi thứ đã chạy ngon nghẻ chưa bạn hãy cd vào thư mục project và gõ tiếp câu lệnh:

ng serve

sau đó mở trình duyệt ở địa chỉ: localhost:4200. Và đây là kết quả: Bắt đầu tìm hiểu xem bên trong nó có những gì nào!!

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularGetStart</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Mở folder thư mục lên, ở trong thư mục src bạn sẽ thấy một file index.html, đây là file index của toàn bộ ứng dụng. Và angular chỉ load các phần các nhau của trang thông qua component, đó là lý do tại sao một web sử dụng angular còn được gọi là SPA (single page application). Có thể bạn sẽ thắc mắc, những file styles và js đâu cả rồi??? Tất cả những gì bạn thấy chỉ là một cái element <app-root>. Đừng lo angular đã xử lý việc này giúp bạn thông qua webpack. Các bạn có thể đọc thêm ở đây: https://webpack.github.io/ Trong Angular 2, chúng ta sẽ xử lý thông qua các module, được export ở một chỗ và import để sử dụng ở chỗ khác. Core module của angular 2 được gọi là angular2/core, nó cho phép ta truy cập thành phần cốt lõi của angular như component . Và tất cả được khai báo trong file main.ts. Ở đây chúng ta sẽ sử dụng ES6 để code, và webpack sẽ convert về ES5 để các browser có thể hiểu được. Và chúng ta hãy đến với các bước đầu tiên trong việc code. Trước tiên, ta cần phải hiểu, khi ứng dụng được khởi chạy, nó sẽ gọi đến file app.module.ts đầu tiên. Đây là file khai báo các thành phần cốt lõi của ứng dụng

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

Angular 2 sử dụng decorator @NgModule để khai báo tất cả trong một file .

declaretions: là mảng mà bạn khai báo các component và directives thuộc về module hiện tại
imports: khai báo các dependencies, browser, module, routing hay http.
providers: khai báo các service mà bạn dùng để inject vào các component
bootstraps: xác định root component, là component được gọi đến đầu tiên sau khi chạy ứng dụng Nãy giờ chúng ta nhắc đến component khác nhiều, vậy component là cái gì??? Các bạn hãy mở file app.component.ts trong thư mục src. Một component sẽ có dạng như sau:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

Hẳn các bạn còn nhớ <app-root> ở trong index.html chứ? Đó chính là selector. Nó giúp angular hiểu rằng ở đâu gọi <app-root> thì ở đó sẽ render là file html trong đường dẫn templateUrl với css trong styleUrls. Một ví dụ đơn giản, mình thêm đoạn code sau vào trong file app.component.html:

<h1>Hello World</h1>

và sau đó các bạn chạy

ng serve --open

chúng ta có kết quả sau: Bài đầu tiên mình xin phép dừng tại đây, trong các bài viết tiếp theo mình sẽ giúp các bạn cách thao tác với component và service Source code các bạn có thể xem ở đây: https://github.com/tunggvu/viblo-app Nguồn: https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/

Mục lục