Tworzenie aplikacji Angular z formularzem do generowania wizytówki
W tym tutorialu krok po kroku nauczysz się, jak stworzyć aplikację Angular, która umożliwi użytkownikowi wprowadzenie danych oraz wgranie zdjęcia w celu wygenerowania wizytówki. Będziemy korzystać z Angular CLI oraz z różnych funkcji Angulara, takich jak komponenty, formularze i bindowanie danych.
Lista kroków
**Instalacja Angular CLI**: Zainstalowanie narzędzia Angular CLI.
**Utworzenie nowej aplikacji Angular**: Stworzenie nowego projektu Angular.
**Przejście do katalogu projektu**: Przejście do katalogu nowo utworzonego projektu.
**Tworzenie komponentu formularza**: Stworzenie komponentu, który będzie odpowiedzialny za formularz wizytówki.
**Tworzenie formularza w HTML**: Dodanie formularza do komponentu.
**Implementacja logiki komponentu**: Implementacja logiki komponentu w pliku TypeScript.
**Stylowanie komponentu**: Dodanie stylów do komponentu wizytówki.
**Aktualizacja głównego komponentu**: Dodanie komponentu formularza do głównego widoku aplikacji.
**Dodanie `FormsModule` do modułu aplikacji**: Import `FormsModule`, aby umożliwić korzystanie z formularzy.
**Uruchomienie aplikacji**: Uruchomienie aplikacji Angular.
2. Utworzenie nowej aplikacji Angular
Teraz utwórz nową aplikację Angular o nazwie `kartaRejestracji`. Opcja `--no-standalone` spowoduje, że moduły będą automatycznie generowane, co ułatwi zarządzanie komponentami w projekcie:
```
ng new kartaRejestracji --no-standalone
```
Podczas tworzenia aplikacji zostaniesz zapytany o różne preferencje, np. narzędzie do stylowania. Możesz wybrać CSS jako narzędzie do stylowania.
3. Przejście do katalogu projektu
Przejdź do katalogu utworzonego projektu:
```
cd kartaRejestracji
```
Na tym etapie nie musisz jeszcze uruchamiać aplikacji. Możesz kontynuować dodawanie komponentów i innych funkcji.
4. Tworzenie komponentu formularza
Stwórz komponent o nazwie `form-card`, który będzie odpowiedzialny za wyświetlenie formularza. Komponent to podstawowy blok budujący aplikację Angular, który zawiera logikę oraz widok:
```
ng generate component form-card
```
To polecenie utworzy plik komponentu oraz jego strukturę.
5. Tworzenie formularza w HTML
W pliku `form-card.component.html` utwórz formularz, który będzie zawierał pola do wprowadzenia imienia, stanowiska oraz możliwość wgrania zdjęcia:
```
<div class="form-container">
<form (ngSubmit)="onSubmit(cardForm)" #cardForm="ngForm">
<div>
<label for="name">Imię i nazwisko:</label>
<input type="text" id="name" name="name" ngModel required>
</div>
<div>
<label for="jobTitle">Stanowisko:</label>
<input type="text" id="jobTitle" name="jobTitle" ngModel required>
</div>
<div>
<label for="photo">Zdjęcie:</label>
<input type="file" id="photo" (change)="onFileSelected($event)" accept="image/*">
</div>
<button type="submit" [disabled]="!cardForm.form.valid">Utwórz wizytówkę</button>
</form>
<div *ngIf="card">
<h2>Wizytówka</h2>
<p><strong>Imię i nazwisko:</strong> {{ card.name }}</p>
<p><strong>Stanowisko:</strong> {{ card.jobTitle }}</p>
<img *ngIf="card.photo" [src]="card.photo" alt="Zdjęcie wizytówkowe">
</div>
</div>
```
Formularz zawiera pola do wprowadzenia imienia, stanowiska oraz do wgrania zdjęcia. Przyciski i pola formularza są połączone z modelem za pomocą `ngModel`, co umożliwia dwukierunkowe bindowanie danych.
6. Implementacja logiki komponentu
W pliku `form-card.component.ts` zaimplementuj logikę, która będzie obsługiwać formularz oraz wgrane zdjęcie:
```
import { Component } from '@angular/core';
@Component({
selector: 'app-form-card',
templateUrl: './form-card.component.html',
styleUrls: ['./form-card.component.css']
})
export class FormCardComponent {
card: any = null;
selectedFile: any = null;
// Metoda, która obsługuje wybór pliku ze zdjęciem
onFileSelected(event: any) {
const file = event.target.files[0]; // Pobranie wybranego pliku
if (file) {
const reader = new FileReader(); // Utworzenie instancji FileReader do odczytu pliku
reader.onload = (e: any) => {
this.selectedFile = e.target.result; // Przypisanie zawartości pliku do zmiennej selectedFile
};
reader.readAsDataURL(file); // Odczyt pliku jako URL danych (base64)
}
}
// Metoda, która obsługuje przesyłanie formularza
onSubmit(form: any) {
if (form.valid) { // Sprawdzenie, czy formularz jest poprawnie wypełniony
this.card = { // Tworzenie obiektu wizytówki z danymi z formularza
name: form.value.name, // Przypisanie wartości imienia
jobTitle: form.value.jobTitle, // Przypisanie wartości stanowiska
photo: this.selectedFile // Przypisanie wybranego zdjęcia
};
}
}
}
```
**Wyjaśnienie każdej linii kodu**:
- `import { Component } from '@angular/core';`: Import klasy `Component` z biblioteki Angular, która pozwala tworzyć komponenty.
- `@Component({...})`: Dekorator `@Component`, który zawiera konfigurację komponentu, taką jak selektor (`selector`), szablon (`templateUrl`) i style (`styleUrls`).
- `card: any = null;`: Zmienna `card`, która przechowuje dane wizytówki.
- `selectedFile: any = null;`: Zmienna `selectedFile`, która przechowuje wgrane zdjęcie w formie URL.
- `onFileSelected(event: any)`: Metoda obsługująca wybór pliku. `event` przechowuje informacje o wybranym pliku.
- `const file = event.target.files[0];`: Pobranie pierwszego wybranego pliku z pola input.
- `if (file) {...}`: Sprawdzenie, czy plik został wybrany.
- `const reader = new FileReader();`: Utworzenie instancji `FileReader`, która pozwala odczytywać pliki.
- `reader.onload = (e: any) => {...}`: Funkcja przypisana do zdarzenia `onload`, która wykona się, gdy plik zostanie załadowany.
- `this.selectedFile = e.target.result;`: Przypisanie danych pliku (jako URL) do zmiennej `selectedFile`.
- `reader.readAsDataURL(file);`: Odczyt pliku jako URL (base64).
- `onSubmit(form: any)`: Metoda obsługująca przesłanie formularza. `form` zawiera dane formularza.
- `if (form.valid) {...}`: Sprawdzenie, czy formularz jest poprawnie wypełniony.
- `this.card = {...}`: Utworzenie obiektu `card` zawierającego dane z formularza.
- `name: form.value.name;`: Przypisanie wartości pola `name` do obiektu `card`.
- `jobTitle: form.value.jobTitle;`: Przypisanie wartości pola `jobTitle` do obiektu `card`.
- `photo: this.selectedFile;`: Przypisanie URL zdjęcia do obiektu `card`.
7. Stylowanie komponentu
Dodaj stylizację do pliku `form-card.component.css`, aby formularz oraz wizytówka wyglądały estetycznie:
```
.form-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form div {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], input[type="file"] {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.card {
margin-top: 20px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 8px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
margin-top: 10px;
border-radius: 4px;
}
```
Stylizacja pozwala na estetyczne wyświetlenie formularza oraz wizytówki.
8. Aktualizacja głównego komponentu
Zaktualizuj plik `app.component.html`, aby dodać stworzony komponent `form-card` do głównej strony aplikacji:
```
<app-form-card></app-form-card>
```
Dzięki temu komponent będzie wyświetlany na stronie głównej aplikacji.
9. Dodanie `FormsModule` do modułu aplikacji
Aby móc korzystać z `ngModel` i `ngForm`, musisz zaimportować `FormsModule` w pliku `app.module.ts`:
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Dodaj ten import
import { AppComponent } from './app.component';
import { FormCardComponent } from './form-card/form-card.component';
@NgModule({
declarations: [
AppComponent,
FormCardComponent
],
imports: [
BrowserModule,
FormsModule // Dodaj FormsModule do listy importów
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Import `FormsModule` umożliwia korzystanie z formularzy reaktywnych w Angularze.
10. Uruchomienie aplikacji
Po wprowadzeniu wszystkich zmian uruchom aplikację za pomocą polecenia:
```
ng serve
```
Aplikacja będzie dostępna pod adresem `http://localhost:4200/`. Powinieneś zobaczyć formularz, który pozwala na wprowadzenie danych oraz wgranie zdjęcia. Po wypełnieniu formularza i kliknięciu przycisku "Utwórz wizytówkę", zostanie wygenerowana wizytówka ze zdjęciem.
W tym tutorialu stworzyliśmy aplikację Angular, która umożliwia użytkownikowi wypełnienie formularza oraz wgranie zdjęcia, aby wygenerować wizytówkę. Dowiedzieliśmy się, jak używać komponentów, formularzy oraz stylizacji, aby stworzyć funkcjonalną aplikację. Jeśli masz jakieś pytania lub potrzebujesz dalszej pomocy, daj znać! 😊
