×

Cài đặt thư viện Angular trong JavaScript

Avatar of admin
admin 0 Views

Angular là một nền tảng phát triển ứng dụng web mã nguồn mở do Google phát triển và duy trì. Được xây dựng trên JavaScript, Angular cho phép các nhà phát triển tạo ra các ứng dụng web động và dữ liệu dựa trên mô hình MVC (Model-View-Controller). Với các tính năng mạnh mẽ như Dependency Injection, Routing, và Two-way Data Binding, Angular đã nhanh chóng trở thành một trong những framework phổ biến nhất cho lập trình front-end.

Trong bài viết này, chúng ta sẽ đi qua quy trình cài đặt thư viện Angular, cấu hình môi trường, và tạo một ứng dụng Angular cơ bản.

Yêu Cầu Trước Khi Cài Đặt

Trước khi chúng ta bắt đầu cài đặt Angular, các yêu cầu sau đây cần phải được đảm bảo:

  1. Node.js và npm: Angular CLI yêu cầu Node.js và npm (Node Package Manager) được cài đặt trong hệ thống của bạn.
  2. Text Editor hoặc IDE: Visual Studio Code, WebStorm, hoặc Atom là những công cụ chỉnh sửa mã nguồn phổ biến có thể sử dụng.
  3. Trình duyệt web: Bạn cần có một trình duyệt web hiện đại như Google Chrome, Mozilla Firefox, hoặc Microsoft Edge.

Kiểm Tra Node.js và npm

Để kiểm tra xem Node.js và npm đã cài đặt chưa, bạn có thể sử dụng các lệnh sau trong terminal:

node -v
npm -v

Nếu chưa cài đặt Node.js và npm, bạn có thể tải từ trang chủ Node.js và làm theo hướng dẫn để cài đặt.

Cài Đặt Angular CLI

Angular CLI (Command Line Interface) giúp đơn giản hóa việc cài đặt và quản lý các dự án Angular. Để cài đặt Angular CLI, mở terminal và chạy lệnh sau:

npm install -g @angular/cli

Sau khi cài đặt, bạn có thể kiểm tra phiên bản của Angular CLI bằng lệnh sau:

ng --version

Tạo Ứng Dụng Angular Mới

Sau khi cài đặt Angular CLI, chúng ta có thể bắt đầu tạo một dự án Angular mới. Để làm điều này, sử dụng lệnh:

ng new ten-du-an

ten-du-an là tên thư mục nơi dự án của bạn sẽ được tạo. CLI sẽ yêu cầu bạn trả lời một số câu hỏi để cấu hình dự án, chẳng hạn như:

  • Would you like to add Angular routing? (Bạn có muốn thêm Angular Routing không?)
  • Which stylesheet format would you like to use? (Bạn muốn sử dụng định dạng stylesheet nào?)

Khi cài đặt hoàn tất, di chuyển vào thư mục dự án bằng lệnh sau:

cd ten-du-an

Khởi Chạy Ứng Dụng Angular

Để khởi chạy ứng dụng Angular, bạn có thể sử dụng lệnh:

ng serve

Ứng dụng của bạn sẽ được phục vụ thông qua http://localhost:4200 ngay trên trình duyệt của bạn.

Kiến Trúc Dự Án Angular

Thư Mục Chính

Khi mở thư mục dự án mới tạo trong text editor, bạn sẽ thấy cấu trúc thư mục và tệp như sau:

  • e2e/: Thư mục cho các bài kiểm tra end-to-end.
  • node_modules/: Thư mục lưu trữ các module npm mà dự án của bạn phụ thuộc.
  • src/: Thư mục chứa mã nguồn của ứng dụng.
  • angular.json: Tệp cấu hình chính của Angular.
  • package.json: Tệp khai báo các dependency của dự án.
  • tsconfig.json: Tệp cấu hình TypeScript.

Các Thành Phần Chính

Trong thư mục src/app, bạn sẽ thấy các tệp và thư mục phục vụ cho ứng dụng:

  • app.module.ts: Tệp gốc của ứng dụng, nơi khai báo các module.
  • app.component.ts: Tệp chứa thành phần chính (component) của ứng dụng.
  • app.component.html: Tệp chứa template HTML cho thành phần chính.
  • app.component.css: Tệp chứa stylesheet cho thành phần chính.

App Module

Tệp app.module.ts là nơi mà chúng ta khai báo các thành phần, dịch vụ, và các module khác mà ứng dụng cần sử dụng. Dưới đây là một ví dụ cơ bản của app.module.ts:

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 { }

Component

Thành phần (Component) là phần quan trọng nhất trong ứng dụng Angular. Mỗi component bao gồm một tệp TypeScript, một tệp HTML, và một tệp CSS. Dưới đây là nội dung cơ bản của các tệp thành phần:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ten-du-an';
}
  • app.component.html:
<h1>{{ title }}</h1>
  • app.component.css:
/* Add your styles here */

Quản Lý Các Thành Phần

Tạo Thành Phần Mới

Bạn có thể tạo thành phần mới bằng lệnh Angular CLI:

ng generate component ten-thanh-phan

Lệnh này sẽ tạo ra một thư mục mới trong src/app với các tệp cần thiết cho thành phần mới.

Routing

Angular cung cấp một hệ thống routing mạnh mẽ cho phép bạn điều hướng giữa các thành phần khác nhau. Để cấu hình routing, hãy làm theo các bước sau:

  1. Cài đặt RouterModule: Trong app.module.ts, thêm RouterModule và cấu hình các routes:
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

  1. Tạo các component cần thiết: Sử dụng lệnh CLI như đã giới thiệu để tạo các component như HomeComponent và AboutComponent.

  2. Cập nhật Template: Sử dụng <router-outlet> trong thành phần chính để hiển thị các component theo route:

<nav>
  <a routerLink="">Home</a>
  <a routerLink="about">About</a>
</nav>
<router-outlet></router-outlet>

Tóm Tắt Và Kết Luận

Cài đặt thư viện Angular trong JavaScript là một quy trình đơn giản nhưng rất cần thiết để xây dựng các ứng dụng web hiện đại. Bằng cách sử dụng Angular CLI, cấu hình môi trường và tạo các thành phần, bạn đã có trong tay mọi thứ cần thiết để phát triển một ứng dụng Angular mạnh mẽ.

Hy vọng rằng với hướng dẫn này, bạn sẽ có một cái nhìn tổng quan về cách cài đặt và bắt đầu làm việc với Angular. Hãy dành thời gian thực hành và khám phá thêm các tính năng mạnh mẽ của Angular để tạo ra những ứng dụng web tuyệt vời.

Comments

Bài viết liên quan