Angular - tworzenie lokalnego serwera na potrzeby serwisów
Stronę tą wyświetlono już: 1271 razy
W celu realizacji zadań związanych z komunikacją z serwerem konieczne będzie utworzenie lokalnie własnego serwera tak, aby możliwe było realizowanie podstawowych zadań z tego typu komunikacją związanych. W tym celu konieczne będzie zainstalowanie globalnie JSON server-a co też i czynię za pomocą następującego polecenia:
npm install -g json-server
Po tym jakże żmudnym zadaniu możliwe będzie uruchomienie JSON server-a w następujący sposób:
json-server server_data.json
Powyższe polecenie spowoduje utworzenie pliku server_data.json oraz uruchomienie lokalnego serwera na porcie 3000, który posiada zdolność obsługi następujących typów zapytań:
- GET - pobieranie danych z serwera;
- POST - wysyłanie danych do serwera, które mają zostać zapisane w bazie danych;
- PUT - wysyłanie danych do serwera, które mają zastąpić lub uaktualnić wpis istniejący w bazie danych;;
- PATCH
- DELETE - wysłanie żądania usunięcia wpisu z bazy danych;
- OPTIONS
Tylko cztery z powyższych opcji będą mnie interesować i tylko je będę wykorzystywał w następnych przykładach. Jak już wspominałem uruchomienie polecenia:
json-server server_data.json
utworzy plik JSON-a z przykładowymi danymi:
- {
- "posts": [
- {
- "id": 1,
- "title": "json-server",
- "author": "typicode"
- }
- ],
- "comments": [
- {
- "id": 1,
- "body": "some comment",
- "postId": 1
- }
- ],
- "profile": {
- "name": "typicode"
- }
- }
Jeżeli wystartowałeś swój JSON server to możesz wpisać w pasku adresu przeglądarki localhost:3000 by po chwili lub co najwyżej dwóch zobaczyć podstawowe informacje o tym serwerze. Warto też wpisać np. localhost:3000/posts aby zobaczyć w przeglądarce następujące dane:
- 0
- id 1
- body "some comment"
- postId 1
Wyświetlił się jeden wpis więc zmodyfikuję dane w pliku json_data.json:
- {
- "posts": [
- {
- "id": 1,
- "title": "json-server",
- "author": "typicode"
- },
- {
- "id": 2,
- "title": "json-server",
- "author": "typicode 2"
- },
- {
- "id": 3,
- "title": "json-server",
- "author": "typicode 3"
- }
- ],
- "comments": [
- {
- "id": 1,
- "body": "some comment",
- "postId": 1
- },
- {
- "id": 2,
- "body": "some comment 2",
- "postId": 2
- },
- {
- "id": 3,
- "body": "some comment 3",
- "postId": 3
- }
- ],
- "profile": {
- "name": "typicode"
- }
- }
Teraz po wpisaniu tego samego adresu w przeglądarce oczom twym ukazać powinny się następujące dane:
- 0
- id 1
- body "some comment"
- postId 1
- 1
- id 2
- body "some comment 2"
- postId 2
- 2
- id 3
- body "some comment 3"
- postId 3
zaś po wpisaniu loclahost:3000/2 powinien pokazać się wpis z id = 2:
- id 2
- body "some comment 2"
- postId 2

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman

Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta

Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri

Tytuł:
Angular w akcji
Autor:
Jeremy Wilken

Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman

Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz