Explore

Aplikacje Webowe - Angular

Przygotowanie środowiska

Programy potrzebne do zainstalowania i programowania za pomocą frameworka Angular → VS Code, Node.js

❗Do Visual Studio Code warto dodać rozszerzenia “Angular Language Service” + ew. “Angular Essentials”

Po pobraniu oprogramowania otwieramy cmd (terminal) i wpisujemy tam: npm install -g @angular/cli

❗ Przy braku uprawień administratorskich (lub pracując na Mac’u) trzeba dodać ‘sudo’ i podać uprawnienia administratorskie

Utworzenie projektu

Tworzymy folder dla naszego projektu

Za pomocą komendy cd w terminalu przechodzimy do lokalizacji stworzonego folderu (lub otwieramy terminal w folderze)

tworzymy pusty projekt za pomocą komendy: ng new nazwa_projektu

Otwieramy cały folder który utworzyliśmy w VS Code

❗Jeśli są błędy w kodzie zaraz po otworzeniu projektu, wpisujemy npm install → doinstaluje wszystkie zależności (robimy to tylko raz dla projektu)

Sprawdzamy czy projekt się uruchamia. W tym celu: - uruchamiamy w VS Code Debug Terminal -wpisujemy komendę ng serve

❗Warto pozostawiać sobie otwarty ten serwer (nie zamykać/resetować terminala) - będziemy widzieć zmiany w czasie rzeczywistym

Struktura projektu

Pliki poza folderem

tsconfig → 3,4 pliki = pliki konfiguracyjne dla typescript, kontrolują komplikacjęTypeScript na JavaScript

package → 2,3 pliki = wszystkie biblioteki z angulara

angular → 1 plik = plik konfiguracyjny dla Angulara

src folder

style.css →globalne style strony

index.html → html dane dla naszej strony

main.ts → plik TypeScript → pierwszy kod odczytywany przez aplikację

assets → folder do którego wrzucamy zdjęcia i inne pliki zewnętrzne

app → folder z częścią właściwą aplikacji → tutaj edytujemy większość

Components - Komponenty

Komponentem jest każdy wyróżniający się obiekt w aplikacji internetowej - menu, tabela, nagłówek → wszystkie mogą być osobnymi komponentami w strukturze naszej aplikacji

program finalnie wyświetla za pomocą przeglądarki index.html

jednak dzięki angular widzimy również main.ts (główny plik typescript - przerobiony javascript dla angulara )

Komponenty znajdujemy w folderze src/app → są one wywoływane później przez main.ts na naszej stronie

Dekorator

Decorator jest feature’m typowym dla języka TypeScript → dodaje extra dane (metadata) do klasy

@Component({

selector: 'app-root', jakiego elementu angular ma szukać w pliku html, żeby podmienić go z tym komponentem

standalone: true, angular obecnie używa autonomicznych komponentów, ale w starych projektach można spotkać się z modułami, wtedy oznaczamy tą wartość jako 'false'

imports: [],

templateUrl: './app.component.html', html baza dla komponentu (markup)

styleUrl: './app.component.css', podstawowe właściwości (start setup)

})

}

Tworzenie customowych komponentów

w folderze src/app stwórz 3 pliki : - header.component.ts - header.cmoponent.html - header.component.css

PLIK TYPESCRIPT

import {Component} from '@angular/core';

@Component({

selector: 'app-header', minimum 2 słowa oddzielone myślnikiem

standalone: true,

imports: [],

templateUrl: './header.component.html',

styleUrl: './header.component.css', lub styles - dla pojedynczych styli wewnątrz

})

export class HeaderComponent{}

! żeby angular widział, że dodaliśmy nowy komponent, trzeba go zaimportować

Komponenty w Angular powinny być dodawane w strukturze drzewa, a więc mamy główny AppComponent i to do niego przypisujemy inne komponenty

⁠

image.png failed to upload

⁠

Czyli chcąc dodać Header Component jako odgałęzienie App Component musimy zaimportować to w pliku app.component.ts za pomocą:

import {HeaderComponent} from '.header.component';

Następnie dodajemy HeaderComponent do rubryki “imports” w dekoratorze

PLIK HTML

<h1> Title Example </h1>

PLIK CSS

header {

display: flex;

flex-direction: column;

align-items: center;

gap: 1rem;

width: 90%;

max-width: 50rem;

margin: 0 auto 2rem auto;

text-align: center;

background: linear-gradient(

to bottom,

#2c0a4c,

#450d80

);

padding: 1rem;

border-bottom-right-radius: 12px;

border-bottom-left-radius: 12px;

box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);

}

img {

width: 3.5rem;

object-fit: contain;

}

h1 {

font-size: 1.25rem;

margin: 0;

padding: 0;

}

p {

margin: 0;

font-size: 0.8rem;

text-wrap: balance;

}

! Za pomocą terminala można tworzyć domyślne komponenty za pomocą “ng generate component nazwa” lub skrótowo “ng g c nazwa”

Zdjęcia

Najprościej:

-dodajemy zdjęcia w folderze Public

⁠

image.png failed to upload

⁠

-odwołujemy się do nich bezpośrednio

Przykładowa lista (słownik) grupa zdjęć dla wielu instancji tego samego komponentu

export const MENU_OPTIONS = [

{

id: 'op1',

avatar: 'Image1.png'

{

id: 'op2',

avatar: 'Image2.png'

{

id: 'op3',

avatar: 'Image3.png'

}];

Tworzymy plik .ts z listą obiektów i przypisanymi do niego zdjęciami

Tworząc nowy komponent, który ma zawierać zdjęcia, dodajemy do niego odpowiedni input w jego pliku .ts (z importem)

import { Component, Input } from '@angular/core';

@Input() name!: string;

@Input() image!: string;

Zmienne z input w pliku .html umieszczamy domyślnie w klamrach, jeśli chodzi o odniesienia do zdjęć to jedynie w “ ”

W głównym komponencie, do którego planujemy dodać nasz komponent ze zdjęciami, musimy zaimportować listę i komponent

import { MenuButtonComponent } from './menu-button/menu-button.component';

import { MENU_OPTIONS } from './menu-button/userlists';

imports: [RouterOutlet, HeaderComponent, MenuButtonComponent],

export class AppComponent {

menu = MENU_OPTIONS;

}

W pliku .html aplikacji, w którym umieszczamy zdjęcia, przypinamy elementy z listy z odpowiednymi zmiennymi (input) z komponentu

<main>

<li>

<app-menu-button [name] = "menu[0].name" [image] ="menu[0].avatar"/>

<app-menu-button [name] = "menu[1].name" [image] ="menu[1].avatar"/>

<app-menu-button [name] = "menu[2].name" [image] ="menu[2].avatar"/>

<app-menu-button [name] = "menu[3].name" [image] ="menu[3].avatar"/>

<app-menu-button [name] = "menu[4].name" [image] ="menu[4].avatar"/>

</li>

</ul>

</main>

Losowe zdjęcie z listy

const losowy_index = Math.floor(Math.random() * MENU_ELEMENTS.length);

//i w export:

losowy_element = MENU_ELEMENTS[losowy_index];

Event’s

Dodawanie eventu kliknięcia przycisku i wywołanie go

Tworzymy funkcję kliknięcia w komponencie z przyciskiem w kodzie .ts i wywołujemy go w .html

import { Component,Output, EventEmitter } from '@angular/core';

export class ButtonComponent {

@Output() btn = new EventEmitter(); //odwołanie do przycisku

@Output() liczba!: number; //zmienna liczba typu number

btnClicked()

{

this.liczba = Math.floor(Math.random() * 6) + 1; //przypisujemy losową wartość dla liczby

this.btn.emit(this.liczba); //emitujemy - wysyłamy liczbę w ramach tego zdarzenia

}

<span>przycisk1</span>

</button>

W app component wywołujemy nasz przycisk i tworzymy funkcję która na konsoli wyświetla naszą liczbę

<main>

<app-button (btn) = onSelect($event)></app-button>

</main>

import { ButtonComponent } from './button/button.component';

export class AppComponent {

onSelect(liczba: number)

{

console.log(liczba);

}

Dynamic UI Content

Wyszukiwanie zmiennej przypisanej do obiektu na podstawie innej

Szukamy ‘name’ przypisanego do konkretnego nr id → zależnego od tego który przycisk wduszamy

export class AppComponent {

menu = MENU_OPTIONS;

randomoption = MENU_OPTIONS[rnd];

selectedUserid = 'op1';

get selectedUser()

{

//zwróc znajdź w pliku menu wartość dla 'name' jeśli jego 'id' jest takie samo jak id aktualnie wybranego przycisku

return this.menu.find((name) => name.id === this.selectedUserid); //jeśli występuje błąd typu (undefined) trzeba albo dodać tutaj '!' albo do input '?'

// '!' sygnalizuje, że jesteśmy pewni że ta zmienna zawsze będzie miała przypisaną jakąś wartość

// '?' sygnalizuje, że jest możliwość, w której zmienna będzie undefined i program nie ma zwracać wtedy błędu

}

onSelectDo(id: string)

{

console.log(id);

this.selectedUserid = id;

}

⁠