Chcesz, aby Twoja witryna Angular była jak najszybsza i jak najbardziej dostępna? Jesteś we właściwym miejscu.
Co to jest Angular?
Angular to platforma do tworzenia interfejsów użytkownika. Udostępnia ono elementy, które ułatwiają szybkie skonfigurowanie skalowanej i łatwej w utrzymaniu aplikacji. Angular umożliwia programistom tworzenie aplikacji działających w internecie, na urządzeniach mobilnych i na komputerach.
Co zawiera ta kolekcja?
Ta kolekcja skupia się na 5 głównych obszarach optymalizacji aplikacji Angular:
- Poprawa wydajności aplikacji w celu zwiększenia liczby konwersji i zaangażowania użytkowników
- Poprawianie niezawodności aplikacji w sieciach o słabej jakości przez wstępne zapisywanie zasobów za pomocą skryptu service worker Angular
- Sprawianie, że aplikacja jest łatwo dostępna dla wyszukiwarek i botów mediów społecznościowych dzięki wstępnemu renderowaniu i renderowaniu po stronie serwera
- zainstalować, aby zapewnić użytkownikom wrażenia podobne do tych, jakie daje aplikacja na iOS lub Androida;
Każdy post w kolekcji będzie opisywać techniki, które możesz bezpośrednio zastosować w swoich aplikacjach.
Czego nie znajduje się w tej kolekcji?
Ta kolekcja zakłada, że znasz już Angulara i TypeScripta. Jeśli nie czujesz się jeszcze pewnie, zapoznaj się z dokumentacją TypeScript i przewodnikiem Początki z Angular na stronie angular.io.
Rozpocznij projekt
Interfejs wiersza poleceń Angular (CLI) umożliwia szybkie skonfigurowanie prostej aplikacji Angular po stronie klienta. W tym poście znajdziesz krótkie wprowadzenie do interfejsu wiersza poleceń. W innych postach znajdziesz informacje o tym, jak dodać bardziej zaawansowane funkcje, takie jak renderowanie po stronie serwera i obsługa wdrażania.
Konfigurowanie interfejsu wiersza poleceń
Najpierw zainstaluj interfejs wiersza poleceń globalnie i sprawdź, czy masz najnowszą wersję, wykonując te polecenia:
npm i -g @angular/cli
ng --version
Upewnij się, że ostatnie polecenie zwraca wersję 8.0.3 lub nowszą.
Jeśli nie chcesz instalować wiersza poleceń globalnie, możesz go zainstalować lokalnie i uruchomić za pomocą polecenia npx:
npm i @angular/cli
npx ng --version
Tworzenie projektu
Aby utworzyć nowe uruchomienie projektu:
ng new my-app
To polecenie utworzy początkowe pliki i strukturę folderów aplikacji oraz zainstaluje potrzebne moduły węzła.
Po pomyślnym zakończeniu procesu konfiguracji uruchom aplikację, uruchamiając polecenie:
cd my-app
ng serve
Teraz możesz uzyskać dostęp do aplikacji pod adresem http://localhost:4200.
Co dalej?
W dalszej części tej kolekcji dowiesz się, jak poprawić wydajność i optymalizację pod kątem wyszukiwarek aplikacji Angular. Co obejmuje:
- Dzielenie kodu na poziomie przekierowań w Angular
- Budżety wydajności z interfejsem wiersza poleceń Angular
- Strategie wstępnego pobierania tras w Angular
- Zmień optymalizację wykrywania w Angular
- Wirtualizacja dużych list za pomocą pakietu CDK Angular
- Wstępne zapisywanie za pomocą skryptu service worker Angular
- Renderowanie z wyprzedzeniem tras za pomocą interfejsu wiersza poleceń Angular
- Renderowanie po stronie serwera w Angular Universal
- Dodawanie pliku manifestu aplikacji internetowej za pomocą narzędzia wiersza poleceń Angular