Aplicație unghiulară din lumea reală: un tutorial pas cu pas

Aplicație unghiulară din lumea reală: un tutorial pas cu pas

Angular, dezvoltat de Google, este un cadru puternic pentru construirea de aplicații web dinamice și interactive. În acest tutorial, vom crea o aplicație unghiulară din lumea reală-un simplu sistem de gestionare a utilizatorilor. Vom acoperi procesul complet de la configurarea proiectului la construirea unei aplicații complet funcționale.

Premise

Înainte de a începe, asigurați -vă că aveți următorul instalat:

• Nod.js: Descărcați din Nodejs.org
• CLI unghiular: Instalați rulând npm install -g @angular/cli

Pasul 1: Configurarea proiectului unghiular

1. Creați un nou proiect unghiular:

   ng new user-management

   Alegeți rutarea și CSS pe prompturi.

2. Navigați la folderul de proiect:

   cd user-management

3. Porniți serverul de dezvoltare:

   ng serve

   Deschideți browserul și navigați la http://localhost:4200.

Pasul 2: Generarea componentelor

Pentru sistemul nostru de gestionare a utilizatorilor, vom avea nevoie de mai multe componente. Să le generăm folosind CLI unghiular.

1. Generați componente:

   ng generate component components/user-list
   
   ng generate component components/user-form

Pasul 3: Crearea unui model de utilizator

Într-o aplicație din lumea reală, avem nevoie de un model care să reprezinte un utilizator.

1. Creați un model de utilizator:
   Creați un nou fișier: src/app/models/user.model.ts.

   export interface User {
   
    id: number;
   
    name: string;
   
    email: string;
   
   }

Pasul 4: Construirea unui serviciu de utilizator

Un serviciu va gestiona logica de afaceri, cum ar fi gestionarea utilizatorilor.

1. Generează un serviciu:

   ng generate service services/user

2. Adăugați următorul cod pentru a gestiona datele utilizatorului:
   Actualizare src/app/services/user.service.ts:

   import { Injectable } from '@angular/core';
   
   import { User } from '../models/user.model';
   
   
   
   @Injectable({
   
    providedIn: 'root'
   
   })
   
   export class UserService {
   
    private users: User() = (
   
      { id: 1, name: 'John Doe', email: 'john@example.com' },
   
      { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
   
    );
   
   
   
    getUsers(): User() {
   
      return this.users;
   
    }
   
   
   
    addUser(user: User): void {
   
      this.users.push(user);
   
    }
   
   }

Pasul 5: Implementarea componentei listei de utilizatori

În componenta listei de utilizatori, vom afișa lista de utilizatori.

1. Actualizare user-list.component.ts:

   import { Component, OnInit } from '@angular/core';
   
   import { User } from '../../models/user.model';
   
   import { UserService } from '../../services/user.service';
   
   
   
   @Component({
   
    selector: 'app-user-list',
   
    templateUrl: './user-list.component.html',
   
    styleUrls: ('./user-list.component.css')
   
   })
   
   export class UserListComponent implements OnInit {
   
    users: User() = ();
   
   
   
    constructor(private userService: UserService) {}
   
   
   
    ngOnInit(): void {
   
      this.users = this.userService.getUsers();
   
    }
   
   }

2. Actualizați șablonul HTML (user-list.component.html):

   <h2>User List</h2>
   
   <ul>
   
    <li *ngFor="let user of users">{{ user.name }} - {{ user.email }}</li>
   
   </ul>

Pasul 6: Implementarea componentei formularului de utilizator

Această componentă ne va permite să adăugăm noi utilizatori.

1. Actualizare user-form.component.ts:

   import { Component } from '@angular/core';
   
   import { User } from '../../models/user.model';
   
   import { UserService } from '../../services/user.service';
   
   
   
   @Component({
   
    selector: 'app-user-form',
   
    templateUrl: './user-form.component.html',
   
    styleUrls: ('./user-form.component.css')
   
   })
   
   export class UserFormComponent {
   
    name: string;
   
    email: string;
   
   
   
    constructor(private userService: UserService) {}
   
   
   
    addUser(): void {
   
      const newUser: User = {
   
        id: Date.now(), // Simple way to generate a unique ID
   
        name: this.name,
   
        email: this.email,
   
      };
   
      this.userService.addUser(newUser);
   
      this.name = '';
   
      this.email = '';
   
    }
   
   }

2. Actualizați șablonul HTML (user-form.component.html):

   <h2>Add User</h2>
   
   <form (submit)="addUser()">
   
    <label>Name:</label>
   
    <input ((ngModel))="name" name="name" required>
   
    <br>
   
    <label>Email:</label>
   
    <input ((ngModel))="email" name="email" required>
   
    <br>
   
    <button type="submit">Add</button>
   
   </form>

Pasul 7: Actualizați componenta aplicației

Pentru a utiliza componentele noastre, actualizați app.component.html pentru a include lista de utilizatori și componentele formularului de utilizator.

<h1>User Management System</h1>

<app-user-form></app-user-form>

<app-user-list></app-user-list>

Pasul 8: Adăugați rutare (opțional)

Dacă aplicația dvs. crește, poate doriți să implementați rutarea.

1. Actualizare app-routing.module.ts să includă rute pentru diferite componente.

Pasul 9: Coafarea aplicației

Adăugați câteva CSS de bază în styles.css sau stiluri de componente specifice pentru a îmbunătăți experiența utilizatorului.

body {

  font-family: Arial, sans-serif;

}

h2 {

  color: #333;

}

form {

  margin-bottom: 20px;

}

Pasul 10: Testați aplicația

Rulați aplicația și testați toate funcționalitățile adăugând noi utilizatori și afișându -le în listă.

ng serve

Concluzie

Felicitări! Ați construit un sistem simplu de gestionare a utilizatorilor folosind Angular. Această structură de bază poate fi extinsă cu caracteristici precum editarea utilizatorilor, ștergerea și integrarea cu o API backend. Pe măsură ce vă simțiți mai confortabil cu Angular, puteți explora subiecte avansate, cum ar fi managementul de stat, încărcarea leneșă și rutarea mai complexă.

Învățare ulterioară

• Explorați oficialul lui Angular documentare.
• Cercetați biblioteci suplimentare, cum ar fi NGRX pentru managementul de stat.
• Aflați mai multe despre integrarea backend (de exemplu, servicii odihnitoare cu Firebase sau Node.js).

Urmărind acești pași, veți avea cunoștințele fundamentale necesare pentru a construi aplicații mai complexe folosind Angular. Codificare fericită!