Tổng quan về Angular Framework

Tổng quan về Angular Framework là bài giới thiệu những điều cần biết về Angular – một trong những thư viện rất nổi tiếng cho lập trình web frontend.

Angular là javascript framework do Google phát triển, được dùng để lập trình phía client (trình duyệt). Angular ra mắt từ 2010, trong quá trình phát triển có nhiều phiên bản đã được phát hành: AngularJS, 2,3,…Đến 9/2023, Angular đã có phiên bản 16.

Các ưu điểm nổi bật của Angular

Angular có rất nhiều đặc điểm hỗ trợ cho việc tạo trang web ở front end 1 cách nhanh chóng và mạnh mẽ. Ví dụ SPA, Data Binding, Component, Validate, tương tác Back-End . Trong Angular còn có Angular CLI là công cụ giúp tạo và quản lý project rất nhanh chóng.

Lập trình Angular là lập trình phía client. Angular cung cấp nhiều chức năng mới, giúp triển khai các chức năng trong trang 1 cách nhanh chóng

Các khái niệm cơ bản trong Angular

Component trong Angular

Component được tạo ra để hiện thực 1 chức năng nào đó trong ứng dụng của bạn. Ví dụ component Liên hệ, component giới thiệu, bình luận, đăng ký, giỏ hàng, chi tiết sản phẩm…

Mỗi component gồm 3 phần: Phần view (file .html, .css) – là nơi code html, css và hiện dữ liệu. Phần code chính (file .ts) – là nơi viết code typescript để tính toán, xử lý trong component. Phần metadata là nơi khai báo các thông tin bổ sung cho component.

Data binding

DataBinding là tính năng rất được yêu thích của Angular. Đây là khả năng truyền dữ liệu qua các comppnent và từ component ra view. Chi tiết hơn đề cập trong link Data Binding Trong Angular

Module

Angular cung cấp sẵn nhiều module, các module này được gọi là NgModules. Ví dụ như Forms Module, RouterModule, HttpClientModule. Ngoài ra có thể tạo mới nhiều module để sử dụng.

Mỗi ứng dụng Angular có 1 module đặc biệt, tên là AppModule. Đây là module gốc, được dùng để khởi chạy ứng dụng.

Service

Service là các đoạn code được tạo ra để phục vụ một chức năng nào đó. Chẳng hạn như tính toán, lấy dữ liệu từ server, validate dữ liệu…Service được sử dụng trong component thông qua dependency injection. Mỗi service lưu trong file tênService.service.ts.

Angular khuyên nên sử dụng service thay vì viết code trong component

Chuẩn bị môi trường để lập trình Angular

Cài đặt NodeJS

– Vào https://nodejs.org  tải bản nodejs mới nhất, sau đó cài đặt vào máy

Khi cài nodejs, chương trình npm cũng được cài luôn cùng. NPM là chương trình giúp bạn cài đặt và quản lý các gói thư viện cho project của bạn.

– Kiểm tra hoạt động của NodeJS trên máy: Cài xong, cần kiểm tra xem nodejs đã hoạt động hay chưa. Trong command prompt è nhập lệnh node -v

Cài đặt Angular CLI

Angular CLI là gói thư viện giúp cài đặt và thực hiện nhiều tác vụ quản lý project Angular. Như tạo project, build project, deploy, test, tạo component, service, module… Để cài đặt Angular CLI bạn mở command line rồi gõ lệnh: 

npm install -g @angular/cli

Tạo project Angular

Tạo project là việc cơ bản nhất khi chúng ta nói tổng quan về Angular Framework. Để tạo project Angular, chạy lệnh sau trong command line:  
ng new <tênfolder>. 

ng new lab1

Xem thêm tài liệu ở đây https://angular.io/tutorial/tour-of-heroes/toh-pt0

Build và thực thi project Angular

Trong command line, chuyển vào folder project và chạy lệnh:  ng serve -o

Nếu thành công sẽ mở trình duyệt với địa chỉ http://localhost:4200/

Xem version angular trong project

Muốn xem version nào đang được chạy trong project thì mở command line, vào folder project rồi gõ lệnh

ng version

Cập nhật Angular trong project

Để cập nhật version Angular trong project, mở command line, vào folder project rồi gõ lệnh

ng update

Cấu trúc file và folder trong project Angular

  • node_modules: chứa các modules của Angular
  • src: chứa source code project
  • angular.json : nơi cấu hình Angular CLI
  • karma.config.js : cấu hình chạy các testing (kiểm thử)
  • package.json: chứa thông tin các thư viện cần trong project
  • src/app : chứa code chính của project.
  • src/app/app.component.html: file view chứa code html và dữ liệu show cho người dùng.
  • src/app/app.component.ts: file component chính, chứa các hàm và các biến của bạn
  • src/app/app.component.css: chứa định dạng css cho app.component.html
  • src/app/app.module.ts : nơi nhúng các module dùng trong project.
  • src/app/app-routing.module.ts : nơi định nghĩa các route trong project

Mô tả hoạt động của Angular

Các hoạt động sau diễn ra khi chạy Angular project:

  • Angular nạp file src/index.html, trong file có tag <app-root>, là nơi anuglar đổ kết quả ra trang web cho bạn.
<!--src/index.html-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>
</body>
</html>
  • Sau khi nạp index.html, Angular nạp file src/main.ts  (khai báo file main.ts này trong file angular.json, mục main) . Trong file main này có code khởi nạp AppModule
//src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
  • File app.modules.ts  sẽ nạp các module trong project (dự án Angular = nhiều component)
//src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoaiSanPhamComponent } from './loai-san-pham/loai-san-pham.component';
@NgModule({
  declarations: [ AppComponent , LoaiSanPhamComponent ], //Khai báo các component, directive... của module này
  imports: [ BrowserModule, AppRoutingModule ], //Nạp các module khác mà module này cần
  providers: [],  //Các dịch vụ mà các component khác có thể dùng
  bootstrap: [AppComponent] //Định nghĩa component gốc của module
})
export class AppModule { }
  • Các component thực thi để hiển thị ra trang web cho người dùng.

Khai báo biến, hàm trong Angular

Trong ứng dụng Angular, code chính bạn sẽ viết trong các component (file .ts) theo ngôn ngữ lập trình typescript. Vì thế, hiểu biết cơ bản về TypeScript là thiết yếu với người lập trình Angular.

– Khai báo biến, hàm trong Angular

//app.component.ts
export class AppComponent {  
  tensach="Nói với tuổi 20"; //khai báo biến string
  giasach = 25000;   //khai báo biến số
  sinhvien = {       //khai báo biến kiểu object
    hoten:'Mai Anh Tới', 
    ngaysinh:'2004-3-24',
    diem: 8
  } 
  tinhTuoi(){ //định nghĩa 1 hàm 
   var ns:Date = new Date(this.sinhvien.ngaysinh);
   return new Date().getFullYear() - ns.getFullYear();   
  }
}

– Hiện giá trị biến, hàm trong view

<!-- app.component.html -->
<p> Họ tên: {{sinhvien.hoten}} </p>
<p> Tuổi : {{tinhTuoi()}} </p>

Tổng quan về Angular Framework mới chỉ lướt chút qua về Angular như tạo môi trường, tạo project, cấu trúc file folfer, các khái niệm căn bản trong Angular. Mời bạn xem bài kế tiếp: Sử dụng component trong angular

BÀI VIẾT LIÊN QUANXEM THÊM