Zawartość
- 01. Uruchom sprawdzenie wersji
- 02. Zainstaluj Angular
- 03. Utwórz szkielet projektu
- 04. Obciążenie różnicowe uprzęży
- 05. ... i zobacz wyniki
- 06. Stwórz pracownika sieci
- 07. Poznaj kod
- 08. Ustawić rusztowanie
- 09. Nie martw się brakiem konstruktora
- 10. Wykonaj mały przebieg kompilacji
- 11. ... i znajdź wynik
- 12. Zabierz się do pracy
- 13. Przeglądaj Ivy
- 14. Spróbuj zmodyfikować przetwarzanie ng
- 15. Ciesz się ulepszoną migracją
- 16. Zapoznaj się z kontrolą obszaru roboczego
- 17. Przyspiesz proces
- 18. Unikaj chodzących trupów
- 19. Spójrz na dziennik zmian
Angular 8 to najnowsza wersja Google Angular - jednej z najlepszych dostępnych struktur JavaScript. W tym artykule omówimy, co wyróżnia Angular 8, i pokażemy, jak zacząć. Najpierw krótkie spojrzenie wstecz na to, co wydarzyło się do tej pory z frameworkiem.
Wprowadzenie Angulara doprowadziło do zmiany paradygmatu w tworzeniu stron internetowych: podczas gdy większość bibliotek ograniczyła się do zapewnienia wsparcia programistom o stosunkowo niewielkim wpływie na architekturę, zespół programistów Angular poszedł w innym kierunku. Ich produkt zmusza do zastosowania określonej architektury, z odchyleniami od trudnych do komercyjnie bezcelowych. W rzeczywistości większość kodu Angular przechodzi przez stosunkowo złożony łańcuch narzędzi transpilacji, zanim trafi do przeglądarki.
Dzięki ogromnemu sukcesowi Angulara, zarówno w Google Inc., jak i poza nim, rozwój - ogólnie rzecz biorąc - ustabilizował się. Oznacza to, że wprowadzanie zmian w kodzie jest niewiele, a aktualizacje dokonywane co pół roku koncentrują się na dostosowaniu frameworka do zmian w środowisku przeglądania sieci.
Na przykład w przypadku Angular 8 wdrażany jest nowy kompilator JavaScript (aczkolwiek nadal eksperymentalnie). Optymalizuje generowany kod zgodności, aby był znacznie mniejszy i szybszy kosztem starszych przeglądarek. Ponadto zintegrowano obsługę Web Worker, aby zwiększyć możliwości przetwarzania w Angular. Krótko mówiąc, jest wiele do zobaczenia - więc zanurzmy się od razu.
Jeśli wolisz zaprojektować witrynę bez kodu, wypróbuj jeden z tych prostych kreatorów witryn. Aby wszystko działało jeszcze sprawniej, wybierz odpowiednią usługę hostingową.
01. Uruchom sprawdzenie wersji
Łańcuch narzędzi Angulara znajduje się w środowisku NodeJS. W chwili pisania tego tekstu potrzebny jest Node.js 10.9 lub nowszy - jeśli znajdziesz starszą wersję, odwiedź witrynę internetową Node.js i uzyskaj aktualizację. Poniższy kod przedstawia stan wersji na tym komputerze.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Zainstaluj Angular
Łańcuch narzędzi Angulara znajduje się w narzędziu wiersza poleceń o nazwie ng. Można go zainstalować za pośrednictwem dobrze znanego NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng wersja
Uważaj, aby odpowiedzieć na pytanie pokazane na poniższym obrazku.
Pobieranie informacji o wersji z narzędzia jest dość trudne - nie tylko składnia jest unikalna, ale również dane wyjściowe są szczegółowe (patrz ilustracja poniżej).
03. Utwórz szkielet projektu
ng generuje dla nas rusztowanie kątowe. W kolejnych krokach chcemy dodać routing i użyć Sass do transpilacji CSS. Jeśli z jakiegoś powodu wdrożenie nie powiedzie się, opróżnij katalog roboczy i uruchom ponownie ng z prawami administratora.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng nowy test roboczy
04. Obciążenie różnicowe uprzęży
Nowa wersja Angular optymalizuje kod kompatybilności wstecznej w celu zmniejszenia wpływu - plik o nazwie lista przeglądarek pozwala zdecydować, które przeglądarki mają być obsługiwane. otwarty lista przeglądarek i usuń słowo nie przed IE 9 do IE11.
. . . > 0,5% ostatnich 2 wersji Firefox ESR nie jest martwy. IE 9-11 # Aby uzyskać obsługę IE 9-11, usuń „nie”.
05. ... i zobacz wyniki
Zamów kompilację projektu, przejdź do folderu dystrybucyjnego i wyczyść niepotrzebne pliki map.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Wywołaj drzewo, aby zobaczyć wyniki - ng tworzy wiele wersji różnych plików kodu (patrz obrazek poniżej).
06. Stwórz pracownika sieci
Pracownicy sieciowi pozwalają JavaScriptowi wkroczyć na ostatnią granicę aplikacji natywnych: masowo równoległe przetwarzanie zadań. Dzięki Angular 8 pracownik sieciowy może zostać utworzony bezpośrednio w zaciszu ng narzędzie wiersza poleceń.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generuj web-worker myworker CREATE tsconfig.worker.json (212 bajtów) CREATE src / app / myworker.worker.ts (157 bajtów) AKTUALIZACJA tsconfig.app.json (236 bajtów ) UPDATE angular.json (3640 bajtów)
07. Poznaj kod
ngNa pierwszy rzut oka wyniki mogą wyglądać onieśmielająco. Otwieranie pliku src / app / myworker.worker.ts w wybranym edytorze kodu ujawnia kod, który powinieneś dobrze znać z WebWorker specyfikacja. Zasadniczo pracownik otrzymuje wiadomości i przetwarza je w razie potrzeby.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `work response to $ {data}`; postMessage (response);});
08. Ustawić rusztowanie
Aplikacje kątowe składają się z komponentów. Wypalanie naszego web Workera najlepiej wykonać wewnątrz AppComponent, który został rozszerzony o detektor OnInit zdarzenie. Na razie będzie emitować tylko informacje o statusie.
importuj {Component, OnInit} z „@ angular / core”; @Component ({...}) Klasa eksportu AppComponent implementuje OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Nie martw się brakiem konstruktora
Doświadczeni programiści TypeScript zadają sobie pytanie, dlaczego nasz kod nie korzysta z konstruktora dostarczonego przez język programowania. Powód jest taki ngOnInit jest zdarzeniem cyklu życia, które jest uruchamiane za każdym razem, gdy ma miejsce zdarzenie inicjujące - nie musi być skorelowane z wywołaniem klasy.
10. Wykonaj mały przebieg kompilacji
W tym momencie program jest gotowy do uruchomienia. Wykonamy to z serwera wewnątrz ng, które można wywołać za pomocą polecenia serv. Ciekawym aspektem tego podejścia jest to, że program wykrywa zmiany i rekompiluje projekt w locie.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Spójrz na rysunek, aby zobaczyć to w akcji na poniższym obrazku.
11. ... i znajdź wynik
ng służyć umieszcza adres swojego lokalnego serwera WWW, którym zwykle jest http: // localhost: 4200 /. Otwórz stronę internetową i otwórz narzędzia programistyczne, aby zobaczyć wyjście statusu. Weź pod uwagę, że console.log wysyła dane do konsoli przeglądarki i pozostawia konsolę instancji NodeJS nietkniętą.
12. Zabierz się do pracy
W tym momencie tworzymy wystąpienie pracownika i przekazujemy mu komunikat. Jego wyniki są następnie wyświetlane w konsoli przeglądarki.
if (typeof Worker! == ’undefined’) {// Create a new const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log ('page has message: $ {data }'); }; worker.postMessage („cześć”); } else {console.log ("Brak wsparcia dla pracowników"); }
13. Przeglądaj Ivy
Przyszłe wersje Angulara będą korzystały z bardziej zaawansowanego kompilatora, co prowadzi do jeszcze mniejszych widoków. Chociaż produkt nie jest jeszcze ukończony, szkielet z włączonym bluszczem można odrodzić za pośrednictwem ng new ivy-project - enable-ivy. Alternatywnie zmień ustawienia kompilatora, jak pokazano we fragmencie.
"angularCompilerOptions": {"enableIvy": true}
Słowo ostrzeżenia: bluszcz prowadzi do niesamowitych redukcji rozmiaru, ale nie jest darmowy. Produkt nie został jeszcze ustabilizowany, dlatego nie zaleca się używania go w środowiskach produkcyjnych.
14. Spróbuj zmodyfikować przetwarzanie ng
Angular's ng narzędzie wiersza poleceń używało wewnętrznie skryptów potomnych przez pewien czas. Angular 8 podnosi poprzeczkę, ponieważ możesz teraz również używać tego narzędzia do uruchamiania własnych zadań, gdy aplikacja jest składana i kompilowana.
"architekt": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Jedna zgrabna aplikacja ng skrypty obejmują bezpośrednie przesyłanie aplikacji do usług w chmurze. Repozytorium Git zawiera przydatny skrypt, który przesyła Twoją pracę na konto Firebase.
15. Ciesz się ulepszoną migracją
Deweloperzy odchodzący od Angular 1.x, znanego również jako AngularJS, mieli spory udział w problemach z poprawnym działaniem nawigatora w „połączonych” aplikacjach. Nowa usługa Unified Location Service ma na celu usprawnienie tego procesu.
16. Zapoznaj się z kontrolą obszaru roboczego
Duże projekty korzystają z możliwości dynamicznej zmiany struktury obszaru roboczego. Odbywa się to za pośrednictwem nowego interfejsu API obszaru roboczego wprowadzonego w Angular 8.0 - fragment kodu towarzyszący temu krokowi zapewnia szybki przegląd zachowania.
funkcja async demonstruje () {const host = obszary robocze. createWorkspaceHost (nowy NodeJsSyncHost ()); const workspace = czekaj na przestrzenie robocze. readWorkspace („ścieżka / do / obszaru roboczego / katalogu /”, host); projekt const = obszar roboczy.projects. get („moja-aplikacja”); const buildTarget = project.targets. get ('build'); buildTarget.options.optimization = true; await workspaces.writeWorkspace (obszar roboczy, host); }
17. Przyspiesz proces
Budowanie dużych baz kodu JavaScript staje się żmudne. Przyszłe wersje AngularJS będą korzystać z systemu kompilacji Bazel firmy Google, aby przyspieszyć ten proces - niestety, w momencie pisania tego tekstu nie był on jeszcze gotowy na czas największej oglądalności.
18. Unikaj chodzących trupów
Mimo że Google bardzo stara się nie złamać kodu, niektóre funkcje należy po prostu usunąć, ponieważ nie są już potrzebne. Sprawdź tę listę amortyzacji, aby dowiedzieć się więcej o funkcjach, których należy unikać.
19. Spójrz na dziennik zmian
Jak zawsze, jeden artykuł nigdy nie odda całego wydania. Na szczęście ten dziennik zmian zawiera szczegółową listę wszystkich zmian - na wypadek, gdybyś miał ochotę sprawdzić puls funkcji, która jest Ci szczególnie bliska.
Masz dużo plików gotowych do przesłania do swojej witryny? Twórz kopie zapasowe w najbardziej niezawodnym magazynie w chmurze.
Ten artykuł został pierwotnie opublikowany w magazynie poświęconym kreatywnemu projektowaniu stron internetowych Projektant stron internetowych.
