Skip to content
Programy potrzebne do zainstalowania i programowania za pomocą frameworka Angular → VS Code, Node.js Po pobraniu oprogramowania otwieramy cmd (terminal) i wpisujemy tam:
npm install -g @angular/cli
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_projektuOtwieramy cały folder który utworzyliśmy w VS Code Sprawdzamy czy projekt się uruchamia. W tym celu:
- uruchamiamy w VS Code Debug Terminal
-wpisujemy komendę ng serve
Pliki poza folderem src folder
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
w folderze src/app stwórz 3 pliki :
- header.component.ts
- header.cmoponent.html
- header.component.cssPLIK TYPESCRIPT
PLIK HTML PLIK CSS
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) 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 W pliku .html aplikacji, w którym umieszczamy zdjęcia, przypinamy elementy z listy z odpowiednymi zmiennymi (input) z komponentu
Tworzymy funkcję kliknięcia w komponencie z przyciskiem w kodzie .ts i wywołujemy go w .html
W app component wywołujemy nasz przycisk i tworzymy funkcję która na konsoli wyświetla naszą liczbę
Aplikacje Webowe - Angular
Przygotowanie środowiska
❗Do Visual Studio Code warto dodać rozszerzenia “Angular Language Service” + ew. “Angular Essentials”
❗ Przy braku uprawień administratorskich (lub pracując na Mac’u) trzeba dodać ‘sudo’ i podać uprawnienia administratorskie
Utworzenie projektu
❗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)
❗Warto pozostawiać sobie otwarty ten serwer (nie zamykać/resetować terminala) - będziemy widzieć zmiany w czasie rzeczywistym
Struktura projektu
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
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
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
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
<Header>
<img src="assets/zdjecie.png"> </img>
<h1> Title Example </h1>
<Header>
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',
name: 'Menu',
avatar: 'Image1.png'
},
{
id: 'op2',
name: 'Menu2',
avatar: 'Image2.png'
},
{
id: 'op3',
name: 'Menu3',
avatar: 'Image3.png'
}];
import { Component, Input } from '@angular/core';
.
.
.
@Input() name!: string;
@Input() image!: string;
<img [src]="image" [alt] = "name"/>
<span>{{name}}</span>
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;
}
<main>
<ul id = "menulist">
<li>
<app-menu-button [name] = "menu[0].name" [image] ="menu[0].avatar"/>
<!-- [nazwa zmiennej komponentu] = "zmienna listy[indeks] . element z listy" -->
<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
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
}
}
<button (click) = "btnClicked()">
<span>przycisk1</span>
</button>
<main>
<app-button (btn) = onSelect($event)></app-button>
</main>
import { ButtonComponent } from './button/button.component';
.
.
export class AppComponent {
onSelect(liczba: number)
{
console.log(liczba);
}
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.