Tag: angular

Post #53 Angular Podstawy kompleksowy przewodnik dla początkujących
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.
2025-04-15

Post #28 Angular Api

Odświeżenie wiadomości i kodu Angular. Dowiedziałem się że właśnie jest stabilna v 18 wprowadzająca dużo zmian.

Treść zadania do Aplikacji Angular

Job Task Używając modułu HttpModule w Angular 2+, napisz fragment kodu, który z poniższego API pobierze drugi element o statusie 'pending’. Ocenimy także jakość i wydajność Twojego rozwiązania. Link do API: API To Do

Realizacja

Stworzyłem nową Aplikację Angular w wersji 14 i metodę fetch wraz z filtrem wyników. Dodatkowo stworzę rozwiązanie z Service i Subscribe,

Kod Obecnej aplikacji

Dodany jest Bootstrap jako UI oraz Component Api wraz z routerem

// Router

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { ApiComponent } from './components/api/api.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'api', component: ApiComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// App Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { ApiComponent } from './components/api/api.component';
import { NavComponent } from './components/nav/nav.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ApiComponent,
    NavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// API-Components

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { filter, map, tap } from 'rxjs/operators';

interface Task {
  id: number;
  user_id: number;
  title: string;
  due_on: string;
  status: string;
}

@Component({
  selector: 'app-api',
  templateUrl: './api.component.html',
  styleUrls: ['./api.component.css']
})
export class ApiComponent implements OnInit {

  tasks: Task[] = [];
  secondPendingTask: Task | undefined;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.getSecondPendingTask()
      .subscribe(task => {
        this.secondPendingTask = task;
      }, error => {
        console.error('Error fetching task:', error);
      });
  }

  getSecondPendingTask(): Observable<Task> {
    return this.http.get<Task[]>('https://gorest.co.in/public/v2/todos')
      .pipe(
        // Filter tasks with status 'pending'
        filter(tasks => tasks.length > 1 && tasks[1].status === 'pending'),
        // Map to the second pending task (if found)
        map(tasks => tasks[1]),
        // Handle the case where no second pending task exists
        tap(task => {
          if (!task) {
            console.log('No second pending task found');
          }
        })
      );
  }
}

Kod Html Api-component

<h1 class="display-4">API</h1>
<p class="lead">Api works!</p>

<div class="bg-light">
  <ul class="list-unstyled">
    <li *ngIf="secondPendingTask">
      (task Id: {{ secondPendingTask.id}}) **Second Pending Task:** <span>{{ secondPendingTask.title }} </span> (status:
      {{ secondPendingTask.status }})
    </li>
    <li *ngIf="!secondPendingTask">
      No second pending task found.
    </li>
  </ul>
</div>

Krótka instrukcja krok po kroku

Importuj moduł HttpClient z @angular/common/http w pliku api.component.ts.
Wstrzyknij HttpClient do konstruktora komponentu.
Stwórz metodę, która będzie wywoływać API za pomocą metody get() z HttpClient.
Wywołaj tę metodę w cyklu życia komponentu, np. ngOnInit().
Przechowaj odpowiedź z API w zmiennej w komponencie.
Wyświetl dane w szablonie komponentu za pomocą dyrektywy *ngFor.

2025-03-18

Tag: angular

Post #53 Angular Podstawy kompleksowy przewodnik dla początkujących

Dlaczego warto uczyć się Angulara?

Jak zacząć z Angular?

Instalacja Angular CLI

Uruchomienie projektu

Podstawowe elementy Angulara

Komponenty – Kluczowe Elementy Angular

Czym jest komponent?

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 wizualne (UI-only)

Dobre praktyki dla początkujących

Zagnieżdżanie komponentów

Czy komponent jest tylko wizualny?

Unikaj nadmiernego zagnieżdżania

Moduły

Routing

Tworzenie pierwszego formularza