Angular 7.0 – Co nowego w nowym Avatarze?

Opublikowany: 2018-12-29

Siła budynku tkwi w jego betonowych filarach. Podobnie jest z frameworkiem aplikacji internetowej. Struktura oprogramowania zapewnia standardowy sposób projektowania, budowania i wdrażania aplikacji. W świecie platform Java framework Javascript był najczęściej wypowiadanym hasłem, dopóki Angular nie zyskał na znaczeniu.
Zobaczmy teraz kilka istotnych cech Angulara.

  • Angular to open source'owy framework JavaScript, który przekształcił się w coś, co teraz nazywa się „Typescript”.
  • Generowanie i opracowywanie kodu jest szybkie w porównaniu z kodem (Javascript) JS.
  • Wiersz wiersza polecenia (CLI) zawiera polecenia do szybszego kompilowania aplikacji.
  • Kodeks jest dobrze zorganizowany, ponieważ wykorzystuje komponenty, co zwiększa produktywność
  • Dyrektywa to dynamiczna funkcja, która obsługuje zmienne, instrukcje if i pętle w HTML
  • Angular jest wieloplatformowy, dlatego jest niezależny od przeglądarki i systemu operacyjnego
  • Angular CLI jest dostarczany z narzędziami testowymi, które są pomocne w testach jednostkowych

Ucz się kursów inżynierii oprogramowania online z najlepszych światowych uniwersytetów. Zdobywaj programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.

Spis treści

AngularJS – prekursor Angular

AngularJS był pierwszym produktem z serii Angular wprowadzonym przez Google w 2009 roku. Jest to framework po stronie klienta lub front-end. Oznacza to, że kod działa w przeglądarce użytkownika, a nie na serwerze WWW. AngularJS został napisany wyłącznie w JavaScript. Zostało to opracowane, aby oddzielić logikę aplikacji, jednak był to jedyny dość udany i utorowany sposób dla Angulara z jego obecnym awatarem 7.0.
Czy AngularJS jest właściwym wyborem do tworzenia kolejnych aplikacji mobilnych?

Rama Angular 7.0

Zrozummy pokrótce elementy składowe Angulara:

  1. Moduł : Zasadniczo logicznie rozkłada główne ekrany aplikacji. Na przykład, jeśli istnieje strona koszyka na zakupy, można chcieć mieć moduł koszyka na zakupy.
  2. Komponent : Jest to sekcja interfejsu użytkownika i jest „klasą” jak w programowaniu obiektowym. Jest to podstawowy blok konstrukcyjny interfejsu użytkownika (UI). Klasa komponentu zawiera podstawową logikę strony.
     Komponenty składają się z:

    1. Szablon : szablon jest napisany w HTML lub mogą być plikami HTML. Może mieć dynamiczne właściwości, takie jak zmienne, a użycie 'warunków warunkowych' jest możliwe z dyrektywami.
    2. Klasa : jest kodem aplikacji. Kod jest napisany w Typescript. Typescript to nadzbiór JavaScript. Typescript to „statyczny” język typów, w którym zmienne są deklarowane ze zdefiniowanymi typami. Dlatego błędy są przechwytywane podczas kompilacji programu, a nie w czasie wykonywania. Klasy Angular można również pisać w JavaScript. Komponenty mają właściwości i metody danych.
    3. Metadane : Aby zidentyfikować, że klasa jest komponentem Angular, używa się Metadanych. Metadane można dołączyć do Typescript za pomocą deklaracji dekoratora.
       Przejdźmy przez prosty komponent w Angularze.

       Importuj {komponent} z ''@angular/core'' ; Tutaj pakiet komponentów jest importowany z biblioteki Angular core.
@component ({ (jest to deklaracja dekoratora)
Selector : 'myapplication' …(.to niestandardowy tag HTML, którego używamy do wstawiania komponentu. )
Szablon: '<h1> Witaj {(imię)}</h1> (nazwa jest zmienną)
})
export class AppComponent{ (jest to klasa komponentu, a 'name' jest właściwością w klasie)
nazwa = ' Struktura kątowa';
}
<ciało>
<myapplication>Wczytuję tutaj przykładowy komponent aplikacji..</myapplication>
</body>
    4. Powiązanie danych : proces, który umożliwia komunikację między komponentem a widokiem. Tak więc dane są przekazywane z komponentu do widoku i odwrotnie. Istnieją cztery rodzaje wiązania danych. W przypadku interpolacji i powiązania właściwości dane są wysyłane z komponentu do widoku, a w przypadku powiązania zdarzeń dane są wysyłane do komponentu z widoku lub szablonu. W przypadku wiązania dwukierunkowego dane są przesyłane w obie strony.
    5. Usługa : jest to klasa napisana dla kodu wielokrotnego użytku, tj. kodu, do którego można uzyskać dostęp z wielu komponentów. Te klasy przesyłają dane i funkcje między składnikami. Klasy usług mogą również pobierać dane z bazy danych lub pliku js/JSON. Kiedy używa się klasy Service, kod wygląda na zorganizowany i pofragmentowany.
    6. Dyrektywa : dostosowanie atrybutów HTML w celu rozszerzenia możliwości HTML to dyrektywa. ngIf, ngFor, ngModel to dyrektywy. ngModel odpowiada za powiązanie widoku z modelem, czego wymagają inne dyrektywy, takie jak input, textarea czy Select.
       Oto fragment kodu, który pokazuje, jak działa ngmodel.

       <div ng-app="" ng-init="firstName='Jan'">
<p>Wpisz nazwę w polu wprowadzania:</p>
<p>Nazwa: <input type="text" ng-model="firstName"></p>
<p>Napisałeś: {{ imię }}</p>
</div>

      Tak więc imię zostało zainicjowane na „Jan” i po wprowadzeniu nowej wartości w polu tekstowym imię i nazwisko będzie zawierało nowe wprowadzone imię.

    7. Wstrzykiwanie zależności (DI) : Klasy potrzebują obiektów do wykonania określonej funkcji. Zamiast tworzyć obiekty za każdym razem w klasie, klasa otrzymuje obiekty (zależności) ze źródeł zewnętrznych. W ramach DI są następujące kroki, które należy wykonać:
      1. Utwórz klasę usług, np. Dane pracownika
      2. Zarejestruj tę klasę usług we wtryskiwaczu. Injector to kontener, który zawiera wszystkie klasy zależności
      3. Zadeklaruj klasę Employeedata jako zależność w klasie, która tego potrzebuje, np. Klasa listy pracowników
Co robi programista?

Wersje Angulara

Po AngularJS wydano Angular 2, który był kompletnym przepisaniem AngularJS. Komponenty zostały dodane z Angulara 2. Angular 2 nie był kompatybilny wstecz. Angular składa się z kilku pakietów, a pakiet routera w Angular 3 nie był zsynchronizowany. Stąd zespół Angulara przeniósł się do Angulara 4, który został wydany ze wszystkimi poprawkami i funkcjami z kompatybilnością wsteczną z Angularem 2. Następnie Angular 5, Angular 6 został wydany, a najnowsza wersja to teraz Angular 7 .

Co nowego w Angularze 7.0?

  1. Podpowiedzi CLI : Zmiana w wierszu poleceń Angular polega na tym, że CLI monituje użytkownika o wybranie funkcji podczas uruchamiania typowych poleceń. Użytkownik może wybrać takie funkcje, jak routing Angular lub format arkusza stylów i wiele innych. W poprzednich wersjach Angulara trzeba było zapamiętać i wpisać opcje w monicie.
  2. Wydajność aplikacji :
    1. Powszechne błędy:
       W tej wersji zespół Angular przeanalizował i usunął kilka typowych błędów popełnianych przez programistów, takich jak wypełnienie „metadane odbicia”, które zostało włączone do produkcji, co w rzeczywistości jest potrzebne tylko w fazie rozwoju.
    2. Budżety pakietów:
       Aby poprawić wydajność aplikacji, domyślne budżety pakietów są zdefiniowane w angular.JSON. Deweloperzy zostaną teraz ostrzeżeni, jeśli rozmiar pakietu aplikacji przekroczy limit 5 MB, a początkowy pakiet przekroczy 2 MB. Te wartości można w razie potrzeby modyfikować w pliku JSON.
  3. Materiały kątowe i CDK: Zestaw rozwojowy komponentów kątowych (CDK) został utworzony z materiału kątowego (UI dla bibliotek). Dwie nowe funkcje dodane do CDK to:
    1. Wirtualne przewijanie:
       Aby załadować tylko widoczną część ekranu, pakiet <cdk-virtual-scroll-viewport> zapewnia pomocników dla dyrektyw reagujących na zdarzenia przewijania. Więc wyrenderuje tylko te elementy, które zmieszczą się na ekranie. Gdy użytkownik przewinie listę, DOM będzie ładował i rozładowywał elementy dynamicznie w oparciu o rozmiar ekranu.
    2. Obsługa przeciągania i upuszczania:
       Moduł @angular/cdk/drag-drop pomaga swobodnie przeciągać i upuszczać element, zmieniać kolejność elementów na liście, przenosić elementy na liście i tak dalej. Odbywa się to za pomocą dyrektyw cdkDropList i cdkDrag.
  4. Angular 7.0 zaktualizował swoje zależności, aby obsługiwać Typescript 3.1, RxJS 6.3 i Node 10 .
  5. Ulepszony dostęp do selekcji: Natywny „wybór” ma pewne zalety w zakresie wydajności, dostępności i użyteczności, dlatego użycie natywnego elementu wyboru w „mat-form-field” jest nową funkcją w Angular 7.0.
  6. Elementy kątowe: Mała zmiana, ale nowa w Angular 7
     „ Angular Elements obsługuje teraz projekcję treści przy użyciu standardów internetowych dla elementów niestandardowych ”. — Tak mówi Stephen Fluin, Angular.
  7. Współpraca z partnerami: Zespół Angular współpracuje z projektami społecznościowymi, które zostały niedawno uruchomione, jednym z nich jest Angular Console. Angular Console to interfejs użytkownika dla Angular CLI. Jest dobry dla początkujących i ekspertów, ponieważ jest o wiele łatwiejszy niż podpowiedzi. Istnieją różne wersje interfejsu użytkownika dla systemów Windows i Mac OS .
Przewodnik dla początkujących po architekturze MVC w Javie

Większość zmian w Angular 7.0 dotyczy ulepszeń wydajności i naprawiania błędów. Dlatego jest to najbezpieczniejsza jak dotąd wersja, a migracja z wcześniejszych wersji jest prosta. Ivy to nowy, nadchodzący silnik renderujący, nad którym pracuje zespół Angulara. Do tego czasu czekajmy i patrzmy. Ucz się dalej !

Jeśli chcesz dowiedzieć się więcej o tworzeniu oprogramowania z pełnym stosem, zapoznaj się z programem Executive PG UpGrad i IIIT-B w tworzeniu oprogramowania – specjalizacja w tworzeniu pełnego stosu, który jest przeznaczony dla pracujących profesjonalistów i oferuje ponad 500 godzin rygorystycznego szkolenia, 9+ projekty i zadania, status absolwentów IIIT-B, praktyczne praktyczne projekty zwieńczenia i pomoc w pracy z najlepszymi firmami.

Zostań programistą Full Stack

Złóż wniosek o certyfikację PG związaną z pracą w inżynierii oprogramowania