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
- Zwiększ niezawodność aplikacji w sieciach słabej jakości, wstępnie buforując zasoby za pomocą mechanizmu 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;
- poprawa dostępności aplikacji, aby była ona zrozumiała i łatwo dostępna dla wszystkich użytkowników;
Każdy post w kolekcji będzie opisywać techniki, które możesz bezpośrednio zastosować w swoich aplikacjach.
Co 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ń, a w kolejnych wpisach z tej kolekcji dowiesz się, 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 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
Teraz możesz uzyskać dostęp do aplikacji pod adresem http://localhost:4200.
Co dalej?
Z dalszej części tej kolekcji dowiesz się, jak poprawić wydajność, dostępność i SEO aplikacji Angular. Co obejmuje:
- Dzielenie kodu na poziomie przekierowań w Angular
- Budżety wydajności za pomocą interfejsu wiersza poleceń Angulara
- Strategie pobierania z wyprzedzeniem 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
- Wstępna renderyzacja tras za pomocą interfejsu wiersza poleceń Angular CLI
- Renderowanie po stronie serwera za pomocą Angular Universal
- Dodaj plik manifestu aplikacji internetowej za pomocą interfejsu wiersza poleceń Angular
- Kontrola ułatwień dostępu za pomocą narzędzia Codelyzer