====================================================
SPIS TREŚCI APLIKACJI RESTAURACJA
1.Instalacja Node.js i Angular CLI
2.Utworzenie nowego projektu Angular w Visual Studio 2022
3.Instalacja i konfiguracja Bootstrapa
4.Tworzenie komponentów aplikacji
5.Instalacja JSON Server (backend)
6.Pobieranie menu restauracji z API
7.Uruchamianie aplikacji
8.Najczęstsze problemy i porady
====================================================
KROK 1: INSTALACJA NODE.JS I ANGULAR CLI
1.Zainstaluj Node.js (wersja LTS) z https://nodejs.org
2.Sprawdź wersje Node.js i npm w terminalu (PowerShell lub CMD):
node -v
npm -v
3.Zainstaluj Angular CLI globalnie:
npm install -g @angular/cli
4.Zweryfikuj instalację Angular CLI:
ng version
====================================================
KROK 2: UTWORZENIE NOWEGO PROJEKTU ANGULAR
W VISUAL STUDIO 2022
1.Uruchom Visual Studio 2022.
• Możesz wybrać „Plik / File” -> „Otwórz / Open” -> „Folder…” i wskazać folder, gdzie chcesz utworzyć projekt Angular.
• Alternatywnie możesz utworzyć „Blank Solution” i w nim otworzyć folder.
2.Otwórz Terminal w Visual Studio 2022 (Widok / View -> Terminal).
3.Przejdź w terminalu do wybranego katalogu, np.:
cd C:\MojeProjekty
4.Utwórz nowy projekt Angular:
ng new RestauracjaZamowienia
• Odpowiedz „Yes” na pytanie o routing.
• Wybierz CSS lub SCSS.
5.Przejdź do utworzonego folderu:
cd RestauracjaZamowienia
6.Uruchom projekt, aby sprawdzić czy działa:
ng serve –open
• Aplikacja będzie dostępna pod adresem http://localhost:4200/
====================================================
KROK 3: INSTALACJA I KONFIGURACJA BOOTSTRAPA
1.W terminalu (będąc w folderze projektu) zainstaluj Bootstrap:
npm install bootstrap
2.Otwórz plik angular.json i w sekcji “styles” oraz “scripts” dopisz:
“styles”: [
“src/styles.scss”,
“node_modules/bootstrap/dist/css/bootstrap.min.css”
],
“scripts”: [
“node_modules/bootstrap/dist/js/bootstrap.bundle.min.js”
]
Upewnij się, że używasz prostych cudzysłowów.
3.Zrestartuj serwer:
ng serve
(lub przerwij bieżący ng serve klawiszami Ctrl + C i uruchom ponownie).
4.Sprawdź działanie Bootstrapa. W pliku src/app/app.component.html wstaw np.:
<div class=”container-mt-5″>
<h1 class=”text-primary”>System zamówień w restauracji</h1>
<button class=”btn-btn-success”>Kliknij mnie</button>
</div>
Jeśli przycisk ma styl Bootstrapa, wszystko jest w porządku.
====================================================
KROK 4: TWORZENIE KOMPONENTÓW APLIKACJI
(Upewnij się, że jesteś w folderze RestauracjaZamowienia.)
1.Komponent menu restauracji:
ng generate component components/menu
2.Komponent koszyka zamówień:
ng generate component components/cart
3.Komponent szczegółów zamówienia:
ng generate component components/order-details
4.Komponent nawigacji (navbar):
ng generate component components/navbar
====================================================
KROK 5: INSTALACJA JSON SERVER (BACKEND)
1.Zainstaluj JSON Server globalnie:
npm install -g json-server
2.W katalogu głównym projektu utwórz plik db.json z przykładowymi danymi:
{
“menu”: [
{ „id”: 1, “name”: „Pizza Margherita”, „price”: 25 },
{ „id”: 2, „name”: „Spaghetti Carbonara”, „price”: 30 },
{ „id”: 3, „name”: „Lasagna”, „price”: 28 }
],
„orders”: []
}
Upewnij się, że używasz prostych cudzysłowów w JSON.
3.Uruchom serwer JSON:
json-server –watch db.json –port 3000
• Serwer ruszy na http://localhost:3000/
• Dostęp do menu będzie pod http://localhost:3000/menu
====================================================
KROK 6: POBIERANIE MENU RESTAURACJI Z API
1.Utwórz serwis do obsługi API:
ng generate service services/menu
2.Otwórz plik src/app/services/menu.service.ts i wklej:
import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
import { Observable } from ‘rxjs’;
@Injectable({
providedIn: ‘root’
})
export class MenuService {
private apiUrl = ‘http://localhost:3000/menu’;
constructor(private http: HttpClient) { }
getMenu(): Observable {
return this.http.get(this.apiUrl);
}
}
lub
import { Injectable } from „@angular/core”;
import { HttpClient } from „@angular/common/http”;
import { Observable } from „rxjs”;
@Injectable({
providedIn: 'root’
})
export class MenuService {
private apiUrl = „http://localhost:3000/menu”;
constructor(private http: HttpClient) { }
getMenu(): Observable<Menu[]> {
return this.http.get<Menu[]>(this.apiUrl);
}
}
3.W pliku src/app/app.module.ts dołącz HttpClientModule:
import { BrowserModule } from „@angular/platform-browser”;
import { NgModule } from „@angular/core”;
import { HttpClientModule } from „@angular/common/http”;
import { AppComponent } from „./app.component”;
// importy innych komponentów
@NgModule({
declarations: [
AppComponent,
// twoje komponenty…
],
imports: [
BrowserModule,
HttpClientModule,
// inne moduły…
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
4.W pliku src/app/components/menu/menu.component.ts pobierz menu:
import { Component, OnInit } from „@angular/core”;
import { MenuService } from „../../services/menu.service”;
@Component({
selector: „app-menu”,
templateUrl: „./menu.component.html”,
styleUrls: [„./menu.component.scss”]
})
export class MenuComponent implements OnInit {
menuItems: any[] = [];
constructor(private menuService: MenuService) {}
ngOnInit(): void {
this.menuService.getMenu().subscribe(data => {
this.menuItems = data;
});
}
}
5.W src/app/components/menu/menu.component.html wyświetl menu:
<div class=”container mt-4″>
<h2>Menu Restauracji</h2>
<div class=”row”>
<div class=”col-md-4″ *ngFor=”let item of menuItems”>
<div class=”card p-3 mb-3″>
<h4>{{ item.name }}</h4>
<p>Cena: {{ item.price }} PLN</p>
<button class=”btn btn-primary”>Dodaj do koszyka</button>
</div>
</div>
</div>
</div>
====================================================
KROK 7: URUCHAMIANIE APLIKACJI
1.Uruchom JSON Server (backend):
json-server –watch db.json –port 3000
2.Uruchom Angular (frontend):
ng serve –open
Aplikacja powinna być dostępna na http://localhost:4200/, a API na http://localhost:3000/menu
====================================================
KROK 8: NAJCZĘSTSZE PROBLEMY I PORADY
1.„Krzywe” cudzysłowy i myślniki
• Zamiast – (półpauza) używaj – (dwa minusy).
• Upewnij się, że w JSON czy kodzie TS masz “ (proste cudzysłowy), a nie „ (cudzysłowy polskie).
2.Literówki w klasach Bootstrapa
• Używaj np. class=“btn btn-success” zamiast class=“btn-btn-success”.
• Używaj class=“container mt-5” zamiast class=“container-mt-5”.
3.Node.js / npm w Visual Studio 2022
• Czasem VS 2022 używa innej wersji Node. W terminalu sprawdź node -v, npm -v, ng version.
4.Projekt Angular + .NET
• Jeśli masz szablon „ASP.NET Core + Angular”, to Angular zwykle jest w folderze ClientApp. Tam uruchamiaj npm install, ng serve itd.
5.Debugowanie i przeglądarka
• Frontend standardowo: http://localhost:4200/
• Backend (JSON Server): http://localhost:3000/
====================================================