Angular

Cách tạo một dự án mới trong Angular

Posted on by ComdyVN

Cách tạo một dự án mới trong Angular

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một dự án mới trong Angular. Chúng tôi sử dụng Angular CLI để giúp chúng tôi tạo ứng dụng.Angular đã đi một chặng đường dài kể từ phiên bản đầu tiên của nó trong Angular 2. Việc tạo một dự án mới giờ đây đơn giản bằng cách cài đặt Angular CLI và chạy lệnh ng new.

Hướng dẫn này áp dụng cho Angular 2 đến phiên bản mới nhất của tức là Angular 8, Angular 9, Angular 10, Angular 11 và Angular 12.

Angular CLI là gì?

Angular CLI giúp chúng ta nhanh chóng tạo ra một ứng dụng Angular với tất cả các file cấu hình và gói trong một lệnh duy nhất. Nó cũng giúp chúng tôi thêm các tính năng (component, directive, service, v.v.) vào các ứng dụng Angular hiện có.

Angular CLI tạo ứng dụng Angular sử dụng Typescript, Webpack (đối với module bundling), Karma (đối với unit test), Protractor (đối với e2e test).

Cách tạo một dự án Angular mới

Trước khi bắt đầu với Angular, bạn cần thiết lập môi trường dành cho nhà phát triển của mình và cài đặt các công cụ cần thiết. Trước khi tiếp tục cài đặt phần sau:

  1. Visual Studio Code (hoặc bất kỳ trình soạn thảo nào khác mà bạn chọn).
  2. Trình quản lý gói NPM.

Bạn có thể đọc hướng dẫn về cách cài đặt từ hướng dẫn Cài đặt và Thiết lập môi trường phát triển Angular.

Cài đặt Angular CLI

Bước đầu tiên là cài đặt Angular CLI. Chúng tôi sử dụng lệnh npm install.

npm install -g @angular/cli@latest

Lệnh trên cài đặt phiên bản Angular CLI mới nhất trong máy của bạn. Lưu ý rằng chúng tôi đã sử dụng cờ -g, (viết tắt của global) cài đặt Angular CLI trên toàn hệ thống để bạn có thể sử dụng nó trong tất cả các dự án của mình.

Tìm phiên bản Angular CLI

Bạn có thể xem phiên bản Angular CLI được cài đặt hiện tại bằng cách sử dụng lệnh.

ng --version

Lệnh trên cũng cung cấp phiên bản của Node được cài đặt trong hệ thống của bạn. Bạn có thể theo dõi bản phát hành Angular CLI mới nhất từ liên kết này.

Tạo một ứng dụng Angular mới

Việc tạo dự án Angular đầu tiên của bạn đã trở nên rất đơn giản bằng cách sử dụng Angular CLI. Tất cả những gì bạn cần là chạy lệnh sau ở cửa sổ dòng lệnh:

ng new GettingStarted

Lệnh trên sẽ tạo một thư mục GettingStarted và sao chép tất cả các phụ thuộc cần thiết và cài đặt cấu hình. Angular CLI thực hiện những việc sau:

  1. Tạo một thư mục mới GettingStarted.
  2. Thiết lập cấu trúc thư mục cho ứng dụng.
  3. Tải xuống và cài đặt thư viện Angular và bất kỳ phần phụ thuộc nào khác.
  4. Cài đặt và cấu hình TypeScript.
  5. Cài đặt và cấu hình Karma & Protractor để kiểm thử.

Chạy dự án Angular mới của bạn

Để chạy ứng dụng của bạn, tất cả những gì bạn cần làm là gõ lệnh sau:

ng serve

Lệnh trên biên dịch ứng dụng Angular và gọi máy chủ WebpackDevelopment. Máy chủ theo dõi thư mục dự án của chúng ta. Nếu bạn thực hiện bất kỳ thay đổi nào trong mã, nó sẽ biên dịch lại dự án.

Bạn cũng có thể sử dụng lệnh  npm start.

Máy chủ Webpack Development lắng nghe trên cổng HTTP 4200. Do đó, hãy mở trình duyệt và nhập http://localhost:4200/ và bạn sẽ thấy ứng dụng GettingStarted đang chạy hiển thị trên trình duyệt.

Chạy dự án Angular mới của bạn

Cấu trúc thư mục dự án Angular

Mở thư mục GettingStarted từ Visual Studio Code và bạn sẽ thấy cấu trúc thư mục sau

├── e2e
│   ├── src
│   │   ├── app.e2e-spec.ts 
│   │   ├── app.po.ts
│   ├── protractor.conf.js 
│   ├── tsconfig.e2e.json
├── node_modules
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   ├── assets
│   │   ├── .gitkeep
│   ├── environments
│   │   ├── environment.prod.ts
│   │   ├── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
├── .editorconfig
├── .gitignore
├── angular.json
│── browserslist   
├── karma.conf.js
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json

Thư mục gốc của ứng dụng chứa các thư mục con e2e, node_modules và src. Nó cũng chứa một số tệp cấu hình

.editorconfig: Đây là file cấu hình cho trình soạn thảo mã Visual Studio. Bạn có thể truy cập http://editorconfig.org để biết thêm thông tin.

.gitignore: Cấu hình git để đảm bảo các tệp được tạo tự động không được commit lên repository.

angular.json: Đây là file cấu hình cho Angular CLI. Các phiên bản cũ hơn của Angular đã sử dụng tệp angular-cli.json

browserslist: Đảm bảo khả năng tương thích của ứng dụng Angular với các trình duyệt khác nhau .

karma.conf.js: Tệp cấu hình cho người chạy unit test.

package.json: là một file cấu hình npm, liệt kê các gói của bên thứ ba mà dự án của bạn phụ thuộc vào. Chúng ta cũng có package-lock.json.

README.md: File giới thiệu thông tin dự án viết bằng markdown.

tsconfig.json, tsconfig.app.json & tsconfig.spec.json là các file cấu hình Typecript. Các tsconfig.json là file cấu hình trình biên dịch Typescript. File này chỉ định các tùy chọn trình biên dịch cần thiết cho Typecript để biên dịch (transpile) dự án. File tsconfig.app.json được sử dụng để biên dịch mã, trong khi  tsconfig.spec.json cho biên soạn các bài kiểm tra.

tslint.json: tslint là một công cụ phân tích mã tĩnh. Chúng tôi sử dụng điều này để kiểm tra chất lượng mã Typecript. Để kiểm tra xem mã nguồn TypeScript có tuân thủ các quy tắc viết code hay không. TSLint kiểm tra mã TypeScript của bạn về khả năng đọc, khả năng bảo trì và các lỗi chức năng

e2e

Thư mục này chứa các tệp cần thiết cho các bài kiểm tra đầu cuối (e2e test) bằng Protractor. Protractor cho phép chúng ta kiểm tra ứng dụng của mình trên một trình duyệt thực. Bạn có thể tìm hiểu thêm về Protractor từ liên kết này.

node_modules

Tất cả các phụ thuộc bên ngoài của chúng ta đều được trình quản lý gói NPM tải xuống và sao chép tại đây.

src

Đây là nơi đặt mã nguồn ứng dụng của chúng ta.

Thư mục ứng dụng

Angular CLI đã tạo ra một ứng dụng đơn giản, hoạt động hiệu quả. Nó tạo ra component gốc, một module gốc, một lớp kiểm thử đơn vị để kiểm tra component đó. Bây giờ chúng ta hãy xem từng component của ứng dụng.

Component

app.component.ts là component được Angular CLI thêm vào dự án. Bạn sẽ tìm thấy nó trong thư mục src

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'GettingStarted';
}

Lớp component là phần quan trọng nhất trong ứng dụng của chúng ta. Nó đại diện cho view của ứng dụng. View là một vùng hiển thị trên màn hình. Nó bao gồm ba phần chính là một class, một decorator và một câu lệnh import.

Câu lệnh import

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

Câu lệnh import được sử dụng để import các thư viện được sử dụng trong lớp component của chúng ta. Câu lệnh này tương tự như câu lệnh using trong C#.

Component của chúng ta được khai báo với decorator @Component, là một phần của module @angular/core. Do đó, chúng ta cần tham chiếu nó trong lớp của chúng tôi. Điều này được thực hiện bằng cách sử dụng phương pháp import như được hiển thị ở trên.

Lớp component

export class AppComponent {
  title = 'GettingStarted';
}

Component là một lớp đơn giản. Chúng ta tạo nó bằng cách sử dụng từ khóa class. Từ khóa export cho phép các phần khác của ứng dụng có thể sử dụng nó bằng cách import nó. Lớp component trên có một thuộc tính title. Thuộc tính này được hiển thị khi ứng dụng được chạy.

Lớp component có thể có nhiều phương thức và thuộc tính. Mục đích chính của component là cung cấp logic cho view của chúng ta.

Decorator @Component

Lớp AppComponent được khai báo kèm theo decorator @Component. @Component (gọi là decorator) cung cấp metadata về component của chúng ta. Angular sử dụng metadata này để tạo view.

@Component({    
    selector: 'app-root',    
    templateUrl: './app.component.html',    
    styleUrls: ['./app.component.css']
})

Metadata của @componentở trên có ba trường là selector, templateURL & styleUrls:

templateUrl

templateUrl chứa đường dẫn đến tệp template HTML. Angular sử dụng tệp HTML này để hiển thị view. Trong ví dụ trên, nó trỏ đến tệp app.component.html.

styleUrls

styleUrls là một mảng các file CSS mà Angular sử dụng để tạo kiểu CSS cho tệp HTML của chúng ta. Trong ví dụ trên, nó trỏ tới file app.component.css.

Tệp app.component.css nằm cùng thư mục tương tự với AppComponent. Tệp này trống và bạn có thể tạo kiểu CSS cho component ở đây.

selector

selector nói cho Angular biết nơi hiển thị template. Trong ví dụ trên selector là app-root. Angular bất cứ khi nào nó gặp thẻ app-root trong tệp HTML, nó sẽ thay thế nó bằng template ( app.component.html)

Template

Tệpapp.component.html là template của component AppComponent. Trường templateUrl trong lớp component AppComponent trỏ đến tệp này. Tệp app.component.html nằm cùng thư mục với component AppComponent.

Module gốc

Angular tổ chức mã ứng dụng dưới dạng các module Angular. Module là các khối mã có liên quan chặt chẽ với nhau về chức năng. Mọi ứng dụng phải có ít nhất một module.

Module được tải đầu tiên là Module gốc. Module gốc được đặt ở tệp app.module.ts. (nằm trong thư mục src/app). Nó chứa đoạn mã sau:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Cấu trúc của module Angular tương tự như lớp component, nó bao gồm ba phần: class, decorator và câu lệnh import.

Lớp module

export class AppModule { }

Tương tự như component, lớp Module được định nghĩa bằng từ khóa class. Từ khóa export đảm bảo rằng bạn có thể sử dụng module này trong các module khác.

Decorator @NgModule

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

Chúng ta đã sử dụng decorator @component để định nghĩa component. Các module Angular đòi hỏi phải có decorator @ngModule, nó cung cấp metadata cho module.

Metadata của @ngModule gồm có 4 trường là: declarations, imports, providers và bootstrap.

Metadata imports cho biết Angular biết danh sách các module khác được module này sử dụng. Chúng ta đang import module BrowserModule và AppRoutingModule.
Module BrowserModule là module lõi của Angular, trong đó có các service quan trọng, directive và pipe v.v. Module AppRoutingModule dùng để cấu hình định tuyến cho ứng dụng.

Metadata Declaration liệt kê các component, directive và pipe là một phần của module này.

Metadata Providers là các service là một phần của module này, có thể được sử dụng bởi các module khác.

Metadata  Bootstrap xác định component gốc của module. Khi Angular tải appModule, nó sẽ tìm metadata bootstrap và tải tất cả các component được liệt kê ở đây. Chúng ta muốn module của mình tải AppComponent, do đó chúng ta đã liệt kê nó ở đây.

Câu lệnh import

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

Câu lệnh import được sử dụng để import các thư viện Angular được yêu cầu của AppModule, giống như NgModule và BrowserModule. Chúng ta cũng cần import AppComponent để tải nó khi chúng ta tải AppModule.

Module định tuyến ứng dụng

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
const routes: Routes = [];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Trong tệp app-routing.module.ts định nghĩa Routes của ứng dụng. Routes cho Angular biết cách di chuyển từ một phần của ứng dụng sang một phần khác hoặc từ view này sang view khác.

Module này được định nghĩa là một module riêng biệt và được import vào AppModule.

Khởi động module gốc của chúng ta

app.component.html là tệp mà chúng ta cần hiển thị cho người dùng. Nó được liên kết với component AppComponent. Chúng ta đã biết rằng AppComponent sẽ được khởi động khi AppModule được tải.

Bây giờ chúng ta cần yêu cầu Angular tải AppModule khi ứng dụng được tải. Điều này được thực hiện trong tệp main.ts.

Tệp main.ts nằm trong thư mục src. Mã của nó như sau.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
 
if (environment.production) {
  enableProdMode();
}
 
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Dòng thứ hai là import thư viện platformBrowserDynamic. Thư viện này chứa tất cả các chức năng cần thiết để khởi động ứng dụng Angular.

Chúng ta cũng import thư viện enableProdMode từ @angular/core. Mã của Angular theo mặc định chạy ở chế độ development.

Chúng ta cũng cần import module AppModule của chúng ta.

Dòng import cuối cùng là  environment, nằm trong thư mục src/environments. Tệp environment.ts chứa nội dung cho môi trường hiện tại. Môi trường phát triển sử dụng tệp environment.ts. Khi bạn xây dựng dự án cho môi trường sản xuất, thì tệp environment.prod.ts sẽ được sử dụng. Môi trường được cấu hình trong tệp angular.json.

Trong dòng tiếp theo, mã của chúng ta kiểm tra biến môi trường và bật chế độ sản xuất, nếu môi trường là như vậy production.

if (environment.production) {
  enableProdMode();
}

Cuối cùng, gọi phương thức bootstrapModule trong thư viện platformBrowserDynamic để khởi động AppModule.

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

index.html

Index.html là điểm đầu vào của ứng dụng của chúng ta.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GettingStarted</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>

Bộ chọn app-root mà chúng ta đã xác định trong metadata của component được sử dụng làm thẻ HTML. Angular quét trang HTML và khi nó tìm thấy thẻ <app-root> sẽ thay thế toàn bộ nội dung bằng nội dung của tệp app.component.html.

Các tệp & thư mục khác

Chúng ta có một vài tệp khác trong thư mục ứng dụng.

Assets

Một thư mục nơi bạn có thể đặt hình ảnh và bất kỳ thứ gì khác khi bạn xây dựng ứng dụng của mình.

Environments

Thư mục này là nơi chúng ta xác định các biến môi trường cho các thiết lập build. Các thiết lập build có thể là development, production, testing và staging.

polyfills.ts

Các trình duyệt khác nhau có các mức độ hỗ trợ khác nhau của các tiêu chuẩn web. Polyfills giúp bình thường hóa những khác biệt đó. Bạn có thể đọc thêm về hướng dẫn hỗ trợ trình duyệt về các trình duyệt được hỗ trợ bởi Angular.

styles.css

File CSS toàn cục của Angular ở đây. Thông thường, bạn sẽ muốn có các kiểu CSS cục bộ trong các component của mình để bảo trì dễ dàng hơn, nhưng các kiểu CSS ảnh hưởng đến toàn bộ ứng dụng của bạn nên được đặt ở file này.

test.ts

Đây là điểm đầu vào chính cho các bài kiểm tra unit test của bạn. Nó có một số cấu hình tùy chỉnh có thể không quen thuộc, nhưng nó không phải là thứ bạn cần chỉnh sửa.

Phần kết luận

Để tạo một dự án mới trong Angular, trước tiên chúng ta phải cài đặt angular/cli. Chúng ta sử dụng lệnh ng new <name> để tạo dự án mới. Angular CLI tải xuống tất cả các thư viện cần thiết và cấu hình ứng dụng.

Chúng tôi sử dụng lệnh ng serve để chạy ứng dụng của mình, khởi động máy chủ Webpack Development tại cổng 4200. Trong các hướng dẫn tiếp theo, chúng ta tìm hiểu thêm về Angular.

Bạn có thể tải xuống mã nguồn từ đây.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *