Thực tập Angular

Đôi điều về Angular – P1

11/02/2023

Đôi điều về Angular – P1 đề cập cơ bản về Angular như cài đặt, tạo project, Khái niệm về component và service, Sử dụng Layout và Routing

Đôi điều về Angular

Angular là 1 javascript framework do Google phát triển dùng để lập trình phía client (trình duyệt).

Cài đặt

1. Cài đặt NodeJS

Vào https://nodejs.org tải bản Nodejs mới nhất, rồi chạy file mới notải cài đặt vào máy. Quá trình cài sẽ có luôn tool npm

2. Cài đặt Angular CLI

Angular CLI là thư viện giúp cài đặt và thực hiện nhiều tác vụ quản lý project Angular. Ví dụ như tạo project, build project, chạy project , tạo component, tạo service, module…

Chạy lệnh sau để cài npm install -g @angular/cli

Tạo project , chạy project, build project

1. Tạo project

Mỗi project Angular phải đặt trong 1 folder nào đó (đặt tên tùy ý).

Chạy lệnh ng new bh1 –routing –defaults để tạo project trong folder bh1.

Trong đó tham số –routing giúp tạo sẵn chức năng routing, –defaults giúp đặt các thông số mặc định cho project

Cấu trúc file và folder trong project Angular sau khi tạo

2. Build project

Khi đã lập trình xong, thì build project để đưa lên host. Chuyển vào folder project rồi chạy lệnh ng build. Khi đó code được build trong folder dist. Bạn đưa nội dung của dist lên host

3. Chạy project

Chuyển vào folder project rồi chạy lệnh ng serve -o Trình duyệt hiện ra với port 4200 là ok

Component và service

1. Component

Mỗi project gồm nhiều component. Component được tạo ra để thực hiện 1 chức năng nào đó. 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 có các file quan trọng sau:

file tên.component.ts – là nơi khai báo biến, định nghĩa các hàm để tính toán, xử lý trong component. Trong đây chú ý đến thuộc tính selector – được dùng khi nhún component vào cha.
file tên.component.html – là thành phần view , nơi code html và hiện các biến, gọi hàm đã định nghĩa trong file .ts
file tên.component.css để định dạng cho view

2. Service

Service được tạo ra để phục vụ các chức năng nào đó. Ví dụ tính toán, lấy dữ liệu từ server, validate dữ liệu… Mỗi service lưu trong file là tênService.service.ts. Service gần giống model trong mô hình MVC – nơi viết code tương tác với hệ thống bên dưới

Tạo layout và router-outlet

Tạo layout là trang khung để nhúng các trang con vào. Trong layout, phải có 1 vùng diện tích lớn để nhúng các trang chức năng vào. Khai báo code để nhúng trang con bằng lệnh <router-outlet>

1. Nhúng bootstrap

<!--src/index.html-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"> </script>

2. Code layout

a. Thực hiện code html

Thực hiện như bình thường đã biết không có gì đặc biệt, có thể dùng các trang template html free. Nhưng nhớ chèn <router-outlet></router-outlet> vào vùng dự định sẽ nhúng các component

<!-- app.component.html -->
<div class="container">
  <header class="bg-info"></header>
  <nav class="bg-warning"> </nav>
  <main>
    <article class="col-md-9 bg-light"> 
      <router-outlet></router-outlet>
    </article>
    <aside class="col-md-3 bg-secondary"> </aside>    
  </main>
  <footer class="bg-dark text-white text-center">PHÁT TRIỂN BỞI NGUYỄN VĂN LONG</footer>
</div>

b. Code css định dạng layout (nếu cần)

/* app.component.css */
.container >header { height: 120px;}
.container >nav { height: 60px;}
.container > main { display: flex; min-height: 400px;}
.container > footer { height: 35px; line-height: 35px;}

c. Code menu

– Vào https://getbootstrap.com/ => Docs => Navbar => Copy

– Paste code vửa copy vào tag Nav của layout và sửa thành tiếng việt để được như sau:

Sử dụng component

1. Tạo component

Lệnh tạo component: ng generate component [-t] [-s] TênComponent Lệnh sẽ thực hiện các việc sau:

Tạo một folder con trong app chứa component
Tạo file <tên-component>.component.ts, là nơi code chính trong component
Tạo file <tên-component>.component.html , là file view của component, nơi bạn sẽ code html và hiện dữ liệu.
Tạo file <tên-component >.component.css, là file code css cho view.
Khai báo component mới tạo trong src/app/app.modules.ts

Các option của lệnh:

-t : không tạo file html, code html ngay trong file .ts
-s : không tạo file css, code css ngay trong file .ts

Ví dụ:

Tạo component danh sách sản phẩm : ng g c danhsachsanpham
Tạo component chi tiết sản phẩm : ng g c chitietsanpham
Tạo component đăng ký: ng g c dangky
Tạo component home : ng g c home
Tạo component liên hệ : ng g c lienhe
Tạo component notfound : ng g c notfound
Tạo component đăng nhập : ng g c dangnhap

2. Sử dụng biến và hàm trong component

a, Khai báo: Biến và hàm của compoment được khai báo trong file .ts của component

//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',
    } 
    tinhTuoi(){ //định nghĩa 1 hàm 
     var ns:Date = new Date(this.sinhvien.ngaysinh);
     return new Date().getFullYear() - ns.getFullYear();   
    }
}

b. Hiện giá trị biến, gọi hàm :

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

3. Hiện component ra trang web

Để hiện component, dùng selector của component trong file .ts của component. Ví dụ:

<app-dangnhap></app-dangnhap>

4. Các chỉ thị quan trọng thường dùng trong view

a. Chỉ thị *ngif : đặt trong 1 tag , giúp tạo/không tạo tag đó trong DOM tùy theo điềukiện

<!-- app.component.html -->
<p> Phái: 
    <span *ngIf="phai==true" >Nam</span> 
    <span *ngIf="phai==false" >Nữ</span> </p>
 <p> Kết quả: 
    <span *ngIf="diem>=5">Đậu</span> 
    <span *ngIf="diem<5">Rớt</span> 
 </p>

b. Chỉ thị *ngFor : đặt *ngFor trong 1 tag giúp tạo ra tag đó nhiều lần trong DOM.

<!-- app.component.html -->
<select>
    <option *ngFor="let t of thu"> {{t}} </option>
</select>

//app.component.ts
export class AppComponent {
  thu = ['Thứ 2','Thứ 3','Thứ 4','Thứ 5','Thứ 6','Thứ 7','Chủ nhật'];
}

5. Truyền dữ liệu vào ra component

Có thể truyền dữ liệu giữa component cha -> con, con->cha

@Input: dùng trong component con để nhận giá trị từ ngoài cha truyền vào
@Output: Dùng để bắn giá trị từ con ra cha mỗi khi có sự kiện xảy ra trong view con.

Ví dụ 1: sử dụng @Input trong component con để nhận dữ liệu từ cha:

– Trong view cha, nhúng component con và truyền tham số tongSL và tongTienGH

<!-- app.component.html-->
<app-giohang [tongSL]="2" [tongTienGH]="6000000"></app-giohang>

– Còn trong component con, dùng @Input để nhận 2 tham số truyền từ cha

//giohang-tong.component.ts
import { Input } from '@angular/core';
export class GiohangTongComponent implements OnInit {
  constructor() { }
  @Input() tongSL:number =0; 
  @Input() tongTienGH:number =0;
  ngOnInit(): void { }
}

– Trong view con, hiển thị các giá trị nhận được từ cha:

<!--giohang-tong.component.html-->
<div id="giohang_tong" class="giohang_tong">
    Bạn đã chọn <b>{{tongSL}}</b> sản phẩm. <br>
    Tổng tiền : <b>{{tongTienGH}}</b> VNĐ    
</div>

Ví dụ 2: sử dụng @Output để chuyển dữ liệu từ component con ra cha

– Trong view cha, nhúng component con vào, khi có sự kiện capnhatGH thì chạy hàm gan_TT_GH

<!-- app.component.html-->
<app-giohang (capnhatGH) ="abc($event)"></app-giohang>

– Trong component con, dùng @Output định nghĩa sự kiện sẽ gọi cha và thực hiện gọi

//giohang.component.ts  (conponent con)
export class GiohangComponent implements OnInit {
  constructor() { }
  //...
  @Output() capnhatGH = new EventEmitter();
  //...
  capnhat() {    
    //...
    this.capnhatGH.emit(d); //thông qua EventEmitter bắn d ra cha, lúc này hàm abc trong cha sẽ chạy 
  }
}

Routing vào component

1. Mở file app/app-routing.ts và khai báo các route dẫn vào các component

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DanhsachsanphamComponent } from './danhsachsanpham/danhsachsanpham.component';
import { ChitietsanphamComponent } from './chitietsanpham/chitietsanpham.component';
import { LienheComponent } from './lienhe/lienhe.component';
import { DangnhapComponent } from './dangnhap/dangnhap.component';
import { DangkyComponent } from './dangky/dangky.component';
const routes: Routes = [
  { path:'', component:HomeComponent},
  { path:'home', component:HomeComponent},
  { path:'sanpham', component:DanhsachsanphamComponent},
  { path:'sanpham/:id', component:ChitietsanphamComponent},
  { path:'lienhe' , component:LienheComponent},
  { path:'dangnhap', component:DangnhapComponent},
  { path:'dangky', component:DangkyComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. Test: Mở trình duyệt gõ các route vừa khai báo

Tùy theo path bạn nhập mà component tương ứng sẽ được nhúng vào trong <router-outlet >

3. Tạo link trong menu dẫn đến các route

Tạo link dẫn đến các route bạn đã khai báo bằng tham số routerlink thì trang layout sẽ không nạp lại (nếu dùng href thì trang layout sẽ được nạp lại.

Mở file app.component.html, trong tag nav, định nghĩa routerlink cho các link dẫn đến các path đã khai báo. Tham khảo code sau:

<a class="nav-link active" href="#" routerLink="" >Trang chủ</a>
<a class="nav-link" href="#" routerLink="/sanpham" >Sản phẩm</a>
<a class="nav-link" href="#" routerLink="/lienhe" >Liên hệ</a>
<a class="dropdown-item" href="#" routerLink="/dangnhap" >Đăng nhập</a>
<a class="dropdown-item" href="#" routerLink="/dangky" >Đăng ký</a>

Test : Mở trình duyệt và nhắp các link vừa khai báo

Đôi điều về Angular – P1 chỉ mới đề cập nhẹ đến Angular, mời bạn tiếp phần 2 nhé. Cần xem thêm tài liệu thì xem thêm ở bài này: Tổng quan về Angular và https://angular.io/start hoặc đọc bài tiếp theo ở đây : Đôi điều về Angular – P2

Sau đây là các bài trong seris thực tập Angular bạn cần thực hiện tuần tự từ trên xuống để có project nhé: