Ôn tập Angular: Tạo 1 ứng dụng đầu tiên

Ôn tập Angular: Tạo 1 ứng dụng đầu tiên - Part 2

Trong bài viết này, mình sẽ hướng dẫn mọi người cách cài đặt và tạo 1 ứng dụng Angular đơn giản

Cài đặt môi trường phát triển

Để bắt đầu với Angular, bạn cần cài đặt các công cụ sau:

Node.js và npm

Tải xuống Node.js từ trang web chính thức: https://nodejs.org/

Angular CLI

Angular CLI là một công cụ được phát triển đề chạy trên giao diện cửa sổ ứng dụng (command line interface hay CLI) nhằm giúp đỡ việc tạo dự án, quản lý tập tin trong dự án và thực hiện nhiều tác vụ khác nhau như test (kiểm thử), bundle và deploy dự án một cách nhanh chóng và hiệu quả.

Mở terminal hoặc command prompt và chạy lệnh sau:

npm install -g @angular/cli

Các lệnh Angular CLI thường dùng

Tạo mới

//Tạo một dự án Angular mới với tên "my-app".
ng new my-app

//Tạo một component mới có tên "my-component".
ng generate component my-component 

//Tạo một service mới có tên "my-service".
ng generate service my-service 

//Tạo một directive mới có tên "my-directive".
ng generate directive my-directive 

//Tạo một module mới có tên "my-module".
ng generate module my-module 

//Tạo một pipe mới có tên "my-pipe".
ng generate pipe my-pipe

Tạo Standalone Component bằng Angular CLI

// tạo standalone pipe.
ng g p search --standalone 

// - tạo standalone directive.
ng g d credit-card --standalone

//- tạo standalone component.
ng g c login --standalone

Build và run

//Run ứng dụng trên server development local.
ng serve

//Build ứng dụng thành các file bundle.
ng build

//Build ứng dụng cho môi trường production.
ng build --prod

Test

//Chạy các unit test.
ng test

//Run các end-to-end test.
ng e2e

Manage

//Kiểm tra code theo quy tắc linting.
ng lint
//Thêm một package vào dự án.
ng add &llt;package>

//Cập nhật các dependency của dự án.
ng update

//Hiển thị phiên bản Angular CLI và các dependency.
ng version

Một số lệnh khác

//Tạo một guard mới có tên "my-guard".
ng generate guard my-guard

//Tạo một interface mới có tên "my-interface".
ng generate interface my-interface

//Tạo một enum mới có tên "my-enum".
ng generate enum my-enum

Kiểm tra version

ng version

Kết quả


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 18.2.1
Node: 22.6.0
Package Manager: yarn 1.22.22
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1802.1 (cli-only)
@angular-devkit/core         18.2.1 (cli-only)
@angular-devkit/schematics   18.2.1 (cli-only)
@schematics/angular          18.2.1 (cli-only)

Typescript

TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript. TypeScript có thể sử dụng để phát triển các ứng dụng chạy ở client-side (Angular, ReactJs) và server-side (NodeJS).

Mở terminal hoặc command prompt và chạy lệnh sau:

npm install -g typescript

Browser

Các trình duyệt phổ biến như Chrome, Firefox, Microsoft Edge, Opera đều hỗ trợ rất tốt cho việc debug

Visual Studio Code và các extension (updated)

Visual Studio Code: Một trình soạn thảo mã nguồn mở, nhẹ và mạnh mẽ, rất phù hợp cho phát triển Angular.

Download: https://code.visualstudio.com/

Các extension hỗ trợ

Angular Language Service: Đây là 1 extension cực kì hữu ích, cung cấp intellisense khi viết các templates HTML cho 1 component Angular.
JavaScript Debugger

Example Project

Mở terminal lên, gõ lệnh ng new <project-name> để tạo 1 project mới

ng new angular-getting-started
cd angular-getting-started
ls

Thay đổi port cho Project

"projects": {
"project-name": {
  "projectType": "application",
  "schematics": {
	"@schematics/angular:component": {
	  "style": "scss"
	}
  },
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
	"build": {
	  //...
	},
	"serve": {
	  "options": {
					"port": 4201
				}
	},

Tạo component đầu tiên

Trước khi tạo 1 component, chúng ta sẽ tìm hiểu về Angular Standalone.

Angular Standalone: True là gì?

Trong Angular, standalone: true là một thuộc tính được đặt vào các component, directive hoặc pipe. Nó có nghĩa là component, directive hoặc pipe đó có thể tự hoạt động độc lập, không cần phải được khai báo trong một module nào khác.

Tạo Standalone Component bằng cli

ng g c user-list --standalone

File user-list.component.ts

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

@Component({
  selector: 'app-user-list',
  standalone: true, //from Angular 14
  imports: [], //from Angular 14
  templateUrl: './user-list.component.html',
  styleUrl: './user-list.component.scss'
})
export class UserListComponent {

}

Giả sử bạn muốn hiển thị danh sách user ở user-list component. Mở file user-list.component.ts, thêm đoạn code như sau:

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

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [],
  templateUrl: './user-list.component.html',
  styleUrl: './user-list.component.scss'
})
export class UserListComponent implements OnInit {
  names: string[];

  constructor(){
    this.names = ['Ari', 'Carlos', 'Felipe', 'Nate'];
  }
  ngOnInit(): void {
    
  }
}

File user-list.component.html

<ul>
    <li *ngFor="let name of names">Hello {{name}}</li>
</ul>

Bạn sẽ nhận được thông báo lỗi:

The `*ngFor` directive was used in the template, but neither the `NgFor` directive nor the `CommonModule` was imported. Use Angular's built-in control flow @for or make sure that either the `NgFor` directive or the `CommonModule` is included in the `@Component.imports` array of this component.ngtsc(-998103)

Nguyên nhân là trong value.component.ts chưa có khai báo CommonModule

File user-list.component.ts sẽ được cập nhật như sau:

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

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './user-list.component.html',
  styleUrl: './user-list.component.scss'
})
export class UserListComponent {
  names: string[];

  constructor(){
    this.names = ['Ari', 'Carlos', 'Felipe', 'Nate'];
  }
}

Giải thích

CommonModule – Chứa tất cả các thành phần của Angular (structure directive như *ngIf, *ngFor..). Tham khảo tại đây

Ngoài ra còn có 1 số module khác như: BrowserModule, HttpClientModule, FormsModule, ...

Quay trở lại ví dụ trên, nếu chúng ta chỉ muốn sử dụng ngFor, thì có thể viết như sau:

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

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [NgFor],
  templateUrl: './user-list.component.html',
  styleUrl: './user-list.component.scss'
})

Tương tự đối với NgIf, NgClass, AsyncPipe

Tổng kết lại, nếu bạn định nghĩa 1 standalone component

Set standalone: true
Import module, class, ... mà template cần sử dụng

Tham khảo

https://www.telerik.com/blogs/angular-14-introducing-standalone-components

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Nhật ký học tập

Tìm kiếm Blog này