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.