Angular to jeden z najpopularniejszych frameworków do tworzenia aplikacji webowych. Jeśli dopiero zaczynasz swoją przygodę z programowaniem front-endowym, ten przewodnik pomoże Ci zrozumieć podstawowe koncepcje Angulara i rozpocząć tworzenie własnych aplikacji. Angular Podstawy
Dowiedz się jakie były moje początki z Angular Angular Podstawy
Dlaczego warto uczyć się Angulara?
Angular wyróżnia się:
- Kompleksowością: Wszystko, czego potrzebujesz do tworzenia aplikacji webowych, znajdziesz w jednym miejscu.
- Stabilnością: Framework jest wspierany przez Google i rozwijany z myślą o dużych projektach.
- Wszechstronnością: Możesz tworzyć aplikacje SPA (Single Page Application) oraz aplikacje progresywne (PWA).
Jak zacząć z Angular?
Instalacja Angular CLI
CLI (Command Line Interface) to narzędzie, które ułatwia tworzenie i zarządzanie projektami w Angularze. Oto jak je zainstalować:
npm install -g @angular/cli
Po instalacji możesz utworzyć nowy projekt za pomocą polecenia:
ng new my-first-app
Uruchomienie projektu
Przejdź do folderu projektu:
cd my-first-app
Uruchom serwer deweloperski:
ng serve
Twoja aplikacja będzie dostępna pod adresem http://localhost:4200.
Podstawowe elementy Angulara
Angular opiera się na kilku kluczowych koncepcjach. Oto najważniejsze z nich:
Komponenty – Kluczowe Elementy Angular
Komponenty w Angularze to kluczowe elementy aplikacji, które odpowiadają za modularność i organizację kodu. Są to podstawowe bloki funkcjonalne, które łączą logikę z interfejsem użytkownika (UI).
Czym jest komponent?
Komponent to zestaw plików odpowiedzialny za konkretną funkcjonalność aplikacji. Składa się z:
- HTML – Określa strukturę widoku.
- CSS – Stylizuje elementy widoczne w komponencie.
- TypeScript – Zawiera logikę komponentu (np. metody, zmienne).
- Spec.ts (testowy) – Obsługuje testy jednostkowe, co zapewnia jakość kodu.
Przykładowo, komponent nawigacji może składać się z plików navbar.component.html, navbar.component.css, navbar.component.ts i navbar.component.spec.ts
Dwie główne role komponentów
Komponenty funkcyjne (z logiką):
Posiadają metody i właściwości, które pozwalają na obsługę danych, zdarzeń i interakcji użytkownika. Przykład: Formularz logowania, który waliduje dane i wysyła je do serwera. Przykładowa metoda w komponencie:
export class NavbarComponent {
isLoggedIn: boolean = false;
toggleLogin() {
this.isLoggedIn = !this.isLoggedIn;
}
}
Komponenty wizualne (UI-only)
Odpowiadają jedynie za wyświetlanie elementów interfejsu użytkownika, bez dodatkowej logiki. Przykład: Karta z obrazkiem i tekstem w galerii zdjęć. Przykład prostego komponentu wizualnego:
export class GalleryCardComponent {
@Input() title: string = '';
@Input() imageUrl: string = '';
}
Dobre praktyki dla początkujących
Organizacja komponentów w folderach:
Umieszczaj każdy komponent w osobnym folderze. To ułatwia nawigację i zarządzanie projektem.
Przykład struktury:
src/
app/
components/
navbar/
navbar.component.html
navbar.component.css
navbar.component.ts
navbar.component.spec.ts
Zagnieżdżanie komponentów
W Angularze możesz „zagnieżdżać” komponenty, czyli umieszczać jeden komponent wewnątrz innego. Jest to kluczowa cecha pozwalająca na tworzenie złożonych interfejsów użytkownika. Przykład: Komponent navbar może zawierać komponent user-menu w swoim widoku: Kod HTML komponentu navbar:
<nav class="navbar">
<app-user-menu></app-user-menu>
</nav>
Czy komponent jest tylko wizualny?
Decyduj, czy komponent ma pełnić jedynie rolę wizualną (np. karta, przycisk), czy też będzie posiadał logikę (np. obsługa zdarzeń, walidacja danych). To pozwala na lepsze zarządzanie kodem.
Unikaj nadmiernego zagnieżdżania
Mimo że Angular pozwala na zagnieżdżanie komponentów, staraj się nie tworzyć zbyt głębokiej hierarchii. Ułatwi to debugowanie i utrzymanie projektu.
Poniżej ilustracja przedstawiająca przykładową organizację plików w Angularze
Dodając taką sekcję z obrazem i szczegółami, wyjaśnimy w prosty sposób, jak zarządzać komponentami w Angularze.
Przykład prostego komponentu:
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template: `<h1>Witaj w Angularze!</h1>`,
styles: [`h1 { color: blue; }`]
})
export class HelloComponent {}
Moduły
Angular używa modułów do organizacji aplikacji. Każda aplikacja zaczyna się od modułu AppModule.
Przykład definicji modułu:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {}
Routing
Routing pozwala nawigować pomiędzy różnymi widokami w aplikacji SPA. Oto jak skonfigurować prosty router:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Tworzenie pierwszego formularza
Dynamiczne formularze są jedną z najważniejszych funkcji Angulara. Oto prosty przykład:
HTML:
<form (ngSubmit)="onSubmit()" #form="ngForm">
<label for="name">Imię:</label>
<input type="text" id="name" name="name" ngModel required>
<button type="submit" [disabled]="!form.valid">Wyślij</button>
</form>
TypeScript:
import { Component } from '@angular/core';
@Component({
selector: 'app-form',
templateUrl: './form.component.html'
})
export class FormComponent {
onSubmit() {
console.log('Formularz został wysłany!');
}
}
Podsumowanie
Angular to potężne narzędzie dla programistów, którzy chcą tworzyć zaawansowane aplikacje webowe. W tym artykule zapoznaliśmy się z podstawowymi koncepcjami i przykładami kodu. Teraz czas na praktykę! Możesz także odwiedzić wpis #36 gdzie przedstawiam dobry praktyczny kurs Angular z Udemy podczas którego możesz poznać praktyczne zastosowania.
