Chcesz, aby Twoja witryna Angular była jak najszybsza i jak najbardziej dostępna? Nie musisz szukać dalej.
Czym jest Angular?
Angular to platforma do tworzenia interfejsów użytkownika. Udostępnia elementy składowe, które pomagają szybko skonfigurować łatwą w utrzymaniu i skalowalną aplikację. Angular umożliwia deweloperom tworzenie aplikacji internetowych, mobilnych i komputerowych.
Co zawiera ta kolekcja?
Ta kolekcja skupia się na 5 głównych obszarach optymalizacji aplikacji Angular:
- poprawić wydajność aplikacji, aby zwiększyć konwersję i zaangażowanie użytkowników;
- Zwiększanie niezawodności aplikacji w słabych sieciach przez wstępne buforowanie zasobów za pomocą skryptu service worker Angulara.
- Udostępnianie aplikacji wyszukiwarkom i botom mediów społecznościowych za pomocą renderowania wstępnego i renderowania po stronie serwera.
- Umożliwienie instalacji aplikacji, aby zapewnić użytkownikom wrażenia podobne do tych, jakie oferują aplikacje na iOS i Androida.
Każdy post w kolekcji będzie opisywać techniki, które możesz bezpośrednio zastosować we własnych aplikacjach.
Czego nie znajdziesz w tej kolekcji?
W tej kolekcji zakładamy, że znasz już Angulara i TypeScript. Jeśli nie czujesz się jeszcze pewnie, zapoznaj się z dokumentacją TypeScript i przewodnikiem Getting Started with Angular na stronie angular.io.
Rozpocznij projekt
Interfejs wiersza poleceń (CLI) Angular umożliwia szybkie skonfigurowanie prostej aplikacji Angular po stronie klienta. Ten post zawiera krótkie wprowadzenie do interfejsu wiersza poleceń, a inne posty w kolekcji pokazują, jak dodawać bardziej zaawansowane funkcje, takie jak renderowanie po stronie serwera i obsługa wdrażania.
Konfigurowanie interfejsu wiersza poleceń
Najpierw zainstaluj globalnie interfejs wiersza poleceń i sprawdź, czy masz najnowszą wersję, uruchamiają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ć interfejsu wiersza poleceń globalnie, możesz zainstalować go lokalnie i uruchomić za pomocą polecenia npx:
npm i @angular/cli
npx ng version
Tworzenie projektu
Aby utworzyć nowy uruchomiony projekt:
ng new my-app
To polecenie utworzy początkowe pliki i strukturę folderów aplikacji oraz zainstaluje potrzebne moduły węzłów.
Po zakończeniu procesu konfiguracji uruchom aplikację, wykonując polecenie:
cd my-app
ng serve
Aplikacja powinna być teraz dostępna pod adresem http://localhost:4200.
Co dalej?
W pozostałej części tej kolekcji dowiesz się, jak poprawić wydajność i SEO aplikacji Angular. Oto co obejmuje:
- Podział kodu na poziomie trasy w Angularze
- Budżety wydajności w interfejsie wiersza poleceń Angulara
- Strategie wstępnego pobierania tras w Angularze
- Optymalizacja wykrywania zmian w Angularze
- Wirtualizacja dużych list za pomocą Angular CDK
- Wstępne buforowanie za pomocą skryptu service worker Angular
- Wstępne renderowanie tras za pomocą Angular CLI
- Renderowanie po stronie serwera za pomocą Angular Universal
- Dodawanie pliku manifestu aplikacji internetowej za pomocą Angular CLI