Chcesz, aby Twoja strona Angular była szybka i łatwa w obsłudze? Nie musisz szukać dalej.
Co to jest Angular?
Angular to platforma do tworzenia interfejsów użytkownika. Zawiera elementy składowe, które ułatwiają szybkie konfigurowanie skalowalnych i łatwych w utrzymaniu aplikacji. Angular umożliwia programistom tworzenie aplikacji działających w przeglądarce, na urządzeniach mobilnych lub na komputerze.
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.
- Zwiększ niezawodność aplikacji w sieciach słabej jakości, wstępnie buforując zasoby za pomocą mechanizmu Service Worker Angular.
- Zapewnienie wykrywalności aplikacji dla wyszukiwarek i botów mediów społecznościowych przy użyciu renderowania wstępnego i renderowania po stronie serwera
- skonfigurować aplikację jako możliwą do zainstalowania, aby umożliwić użytkownikom korzystanie z niej podobnie jak w aplikacjach na iOS/Androida.
- poprawę ułatwień dostępu do aplikacji, aby była bardziej użyteczna i zrozumiała dla wszystkich użytkowników.
Każdy post w tej kolekcji opisuje techniki, które możesz zastosować bezpośrednio w swoich aplikacjach.
Czego nie znajduje się w tej kolekcji?
W tej kolekcji zakładamy, że znasz już Angular i TypeScript. Jeśli nie wiesz, jak używać tych rozwiązań, zapoznaj się z dokumentacją TypeScript i przewodnikiem Getting Started with Angular (w języku angielskim) na stronie angular.io.
Rozpocznij projekt
Interfejs wiersza poleceń Angular pozwala szybko skonfigurować prostą aplikację 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ń
Aby rozpocząć, zainstaluj interfejs wiersza poleceń globalnie i sprawdź, czy masz jego najnowszą wersję, uruchamiając te polecenia:
npm i -g @angular/cli
ng --version
Sprawdź, czy ostatnie polecenie zwraca wersję 8.0.3 lub nowszą.
Jeśli nie chcesz globalnie instalować interfejsu wiersza poleceń, 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 jej moduły węzłów.
Po pomyślnym zakończeniu procesu konfiguracji uruchom aplikację, uruchamiając polecenie:
cd my-app
ng serve
Dostęp do aplikacji powinien być teraz dostępny 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. Co obejmuje:
- Dzielenie kodu na poziomie trasy w Angular
- Budżety wydajności z interfejsem wiersza poleceń Angular
- Strategie pobierania z wyprzedzeniem w Angular
- Optymalizacja wykrywania zmian w Angular
- Wirtualizacja dużych list za pomocą narzędzia Angular CDK
- Wstępne buforowanie przy użyciu instancji roboczej Angular Service Worker
- Renderowanie z wyprzedzeniem tras za pomocą interfejsu wiersza poleceń Angular
- Renderowanie po stronie serwera w Angular Universal
- Dodaj plik manifestu aplikacji internetowej za pomocą interfejsu wiersza poleceń Angular
- Kontrola ułatwień dostępu przy użyciu Codelyzer