Angular 2 odkrywa karty

Angular-2

20/07/2015 • GOYELLOblog @pl • Views: 112

Jak wspomniałem w moim poprzednim wpisie, Angular 2 to zupełnie nowa odsłona tego frameworka. Wiele opcji znanych z Angulara 1.x zostało usuniętych lub uległo gruntownej zmianie. W Angularze 2 nie znajdziemy kontrolerów, DDO, konceptu $scope, czy angular.module. Całkowicie przepisano wiązanie danych (data binding) i wykrywanie zmian (brak ng-model).

Mimo że prace nad Angularem 2 trwają, autorzy ujawnili już niektóre nowości. W tym wpisie omówię podstawowe założenia nowego frameworka na przykładzie fragmentów kodu, które prezentowałem podczas wystąpienia na infoShare 2015.

Kod powstał przy użyciu najnowszej (stan na dzień publikacji wpisu).wersji Angulara 2 (Angular 2 Alpha 26 as of time of writing this article).

Angular 2 tworzony jest przy pomocy TypeScript (1.5)

TypeScript jest nadzbiorem JavaScript, który kompiluje się do zwykłego JavaScriptu.

Można powiedzieć, że to ECMAScript 6 na sterydach, jako że oferuje dokładnie to, co ECMAScript 6. Zawiera jednak znacznie więcej opcji: m.in. statyczne typowanie, interfejsy, generyki, enumy i dekoratory.

Spójrzmy na przykład kodu napisanego w TypeScripcie:

1

TypeScript nie jest obowiązkowy w Angularze 2, chociaż jest rekomendowany. Developerzy mają jednak wybór: ES5, ES6, CoffeScript lub dowolny inny język, który kompiluje do JavaScript.

Jeśli chcecie wiedzieć więcej o TypeScripcie, zachęcam do odwiedzenia tej strony: http://www.typescriptlang.org/

Hello, World!

Rzućmy okiem na dwie aplikacje napisane odpowiednio w TypeScripcie i ECMAScript 5.

TypeScript (1.5):

2

JavaScript (ES5):

3

Jak zauważyliście, wersja stworzona w TypeScripcie jest nieco mniej rozbudowana, a dekoratory (@) wyraźnie oddzielają kod od meta danych.

Elementy składowe Angulara 2

Jak zapewne odnotowaliście, przedstawiony powyżej kod nie zawiera elementów znanych z Angulara 1.x: angular.module, DDO ani parametru $scope.

Komponent

Komponent to główny element budujący aplikację. Angular 2 to drzewko komponentów. Każda aplikacja stworzona w Angularze 2 musi mieć przynajmniej jeden komponent. Klasa komponentu to kontekst wykonawczy dla szablonu lub component controller. Komponent wymaga dekoratora @Component oraz przynajmniej jednego dekoratora @View.

Popatrzmy na całkiem podstawowy komponent w Angularze 2:

4

HelloAngular2Cmp ma dwie właściwości: text i clickCount, związane z widokiem szablonu zdefiniowanego przez atrybut szablonu @View decorator. Szablony mają dostęp do wszelkich właściwości i funkcji kontrolera komponentu.

Widok

Szablon sam w sobie wygląda następująco:

rafal_code

Składnia jest bardzo prosta:

  • {{ expression | pipe }} – interpolacja Angular 2,
  • #variable – lokalne zmienne dostępne w zakresie komponentu. Do zmiennej można następnie odnieść się w szablonie komponentu,
  • (event) – wiązanie do wydarzeń element lub dyrektywy,
  • [property] – wiązanie do właściwości elementu.

Wiązania

Za każdym razem, gdy zmienia się właściwość tekstowa komponentu, zmiana jest automatycznie odzwierciedlona w szablonie. Do właściwości elementów w szablonie dostajemy się poprzez umieszczanie ich w nawiasach kwadratowych. W powyższym przykładzie przycisk zostanie wyłączony, gdy właściwość tekstowa „text” komponentu równa się „Angular 2”. Tak w skrócie wygląda wiązanie właściwości (property binding) w Angular 2.

Angular 2 Property Binding

By móc propagować zmiany z DOM do komponentu, trzeba użyć wiązania zdarzeń. Wiązania zdarzeń przedstawiane są w Angularze 2 w nawiasach (zdarzenie). W powyższym przykładzie, jeśli przycisk zostanie kliknięty, zostanie uruchomiona funkcja onClick komponentu.

Podsumujmy. W Angularze 2:

Wiązania właściwości są uruchamiane automatycznie. Wiązania zdarzeń umożliwiają propagację zmian w DOM.

Jeżeli chcecie lepiej zrozumieć, jak działa wiązanie danych w Angularze 2, zachęcam Was do obejrzenia tego filmu: https://angularu.com/Video/2015sf/misko-hevery-talks-about-databinding-in-angular-2

Formularze

Wiązanie właściwości i zdarzeń umożliwia dwukierunkowe wiązanie danych. Trzeba jednak wykonać dodatkową pracę, by to osiągnąć. Na szczęście, Angular 2 będzie dostarczany z modułem Angular Forms. Moduł ten będzie używany do obsługi danych wprowadzanych przez użytkownika, poprzez zdefiniowanie i budowanie obiektów kontrolnych i odwzorowanie ich na DOM. Obiekty kontrolne mogą być następnie użyte do odczytu informacji z elementów formularza.

Więcej na temat Angular 2 Forms: http://angularjs.blogspot.com/2015/03/forms-in-angular-2.html

Dyrektywa

Komponent nie jest jedynym elementem tworzącym interfejs w Angularze 2. Są jeszcze dyrektywy, które umożliwiają nadawanie zachowań elementom w DOM.

Różnica między komponentem a dyrektywą w Angularze 2 polega na tym, że komponent to dyrektywa z widokiem, podczas gdy dyrektywa to dekorator bez widoku.

Dyrektywa wymaga pojedynczego dekoratora @Directive oraz klasy:

5

Powyższa dyrektywa, użyta na elemencie, nadaje mu efekt obramowania. ElementRef jest automatycznie dostarczany w Angularze 2 przez moduł wstrzykiwania zależności.

Oto przykład jego użycia:

6

Wstrzykiwanie zależności (Dependency Injection)

W Angularze 2 jest jeden sposób na wstrzykiwanie zależności do dyrektywy lub komponentu. W przykładzie poniżej usługi zdefiniowane przez użytkownika są wstrzykiwane do komponentu. Message Service deklaruje pewną logikę biznesową:

7

Komponent wymaga, by framework zapewniał niezbędną zależność poprzez wstrzyknięcie jej do konstruktora:

8

MessageService jest importowany z zewnętrznego modułu, a następnie trzeba go udostępnić Angularowi 2. Sposobem na udostępnienie zależności jest globalne zarejestrowanie ich funkcją bootstrap(), jak poniżej:

9

Zauważcie, że serwisy, dyrektywy i komponenty Frameworka, lista komponentów (@Query) i atrybutów (@Attribute) może zostać wstrzyknięta w taki sam, jednolity sposób. Nowy moduł wstrzykiwania zależności został zaprojektowany w taki sposób, by ułatwiać rozszerzanie (DependencyAnnotation), więc można stworzyć nawet niestandardową adnotację do wstrzyknięciu zależności. Dodatkowo, Angular 2 dostarcza takich adnotacji, jak: promise;@InjectPromise), dependencies (@InjectLazy) oraz opcjonalne zależności (@Optional).

Więcej na temat wstrzykiwania zależności w Angularze 2 znajdziecie w tym tekście: http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

Podsumowanie

Jak widzicie zatem, Angular 2 różni się znacznie od Angulara 1.x. Nie ma w nim DDO, parametru $scope, ani angular.module. Jest za to nowy sposób wykrywania zmian i wiązania, jednolita składnia szablonów, nowy sposób wstrzykiwania zależności, nowy moduł formularza, nowy moduł rutingu i wiele innych funkcji.

Nowa wersja frameworka powinna być znacznie łatwiejsza do opanowania, dzięki prostszym koncepcjom, jak m.in. komponentowa architektura. Oprócz tego Angular 2 powinien działać znacznie szybciej niż poprzednik, dzięki wspomnianemu nowemu wiązaniu danych i wykrywaniu zmian.

Czy jest prosty sposób na migrację z Angulara 1.x? Moim zdaniem nie będzie to łatwe zadanie. Poniżej znajdziecie jednak kilka wskazówek, które Wam w tym pomogą:

  • Wybieraj jednokierunkowe wiązanie danych zamiast dwukierunkowego,
  • Używaj składni ControllerAs, by łatwiej migrować komponenty,
  • Nie aktualizuj stanu aplikacji wewnątrz funkcji watch,
  • Śledź najnowsze release’y (1.4, 1.5) i rób aktualizacje,
  • Rozważ użycie nowego rutera (1.5) (https://angular.github.io/router/),
  • Rozważ użycie TypeScriptu w aplikacjach tworzonych w Angular 1.x.

Źródła

Related Post