Chcesz, aby Twoja strona Angular była jak najszybciej i dostępna? Nie musisz szukać dalej.
Co to jest Angular?
Angular to platforma do tworzenia interfejsów użytkownika. Zawiera elementy składowe, które pomagają szybko skonfigurować skalowalną aplikację, której można używać. Angular umożliwia programistom tworzenie aplikacji dostępnych w internecie, na urządzeniach mobilnych lub na komputerach.
Co zawiera ta kolekcja?
W tym zbiorze omawiamy 5 głównych obszarów optymalizacji aplikacji Angular:
- Poprawa skuteczności aplikacji w celu zwiększenia liczby konwersji i zaangażowania użytkowników.
- Zwiększenie niezawodności aplikacji w przypadku słabych sieci przez wstępne zapisywanie zasobów za pomocą skryptu service worker Angular
- Zapewnienie wykrywalności aplikacji dla wyszukiwarek i botów mediów społecznościowych za pomocą renderowania wstępnego i renderowania po stronie serwera.
- możliwość zainstalowania aplikacji w taki sposób, by wyglądała podobnie do aplikacji na iOS lub Androida;
- Poprawa ułatwień dostępu do aplikacji, tak aby była użyteczna i zrozumiała dla wszystkich użytkowników.
Każdy post w tej kolekcji będzie opisywać techniki, które możesz zastosować bezpośrednio we własnych aplikacjach.
Czego nie ma w tej kolekcji?
W tym zbiorze założono, że znasz już języki Angular i TypeScript. Jeśli nie czujesz się jeszcze pewnie w ich obsłudze, zapoznaj się z dokumentacją TypeScriptu i przewodnikiem wprowadzającym do Angular w witrynie angular.io.
Rozpocznij projekt
Interfejs wiersza poleceń 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 tej kolekcji pokazują, jak dodawać bardziej zaawansowane funkcje, takie jak renderowanie po stronie serwera i obsługa wdrażania.
Konfigurowanie interfejsu wiersza poleceń
Aby rozpocząć, zainstaluj interfejs wiersza poleceń globalnie 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ć nowe uruchomienie projektu:
ng new my-app
To polecenie utworzy początkowe pliki i strukturę folderów dla aplikacji oraz zainstaluje potrzebne moduły węzłów.
Po pomyślnym ukończeniu konfiguracji uruchom aplikację, uruchamiając polecenie:
cd my-app
ng serve
Dostęp do aplikacji powinien być teraz możliwy pod adresem http://localhost:4200.
Co dalej?
Z pozostałej części tej kolekcji dowiesz się, jak poprawić wydajność, dostępność i SEO swojej aplikacji Angular. Oto co obejmuje m.in.:
- Podział kodu na poziomie trasy w Angular
- Budżety wydajności za pomocą interfejsu wiersza poleceń Angular
- Strategie wstępnego pobierania tras w Angular
- Optymalizacja wykrywania zmian w Angular
- Wirtualizacja dużych list za pomocą Angular CDK
- Precaching z użyciem skryptu service worker Angular
- Wstępne renderowanie tras za pomocą interfejsu wiersza poleceń Angular
- Renderowanie po stronie serwera za pomocą Angular Universal
- Dodawanie pliku manifestu aplikacji internetowej za pomocą interfejsu wiersza poleceń Angular
- Kontrola ułatwień dostępu w Codelyzer