Nauka Angular4 / Angular2 / TypeScript od podstaw – część 1

Zaczynam naukę Angular2 :) Ledwo zacząłem się uczyć, a wyszedł nowy Angular4. Angular 3 został pominięty, gdyż chciano zynchronizować numery wersji modułów z corem Angulara (Angular Router już był w wersji 3.x.x). Chcę, żeby z tego czasu pozostał ślad i doświadczenie, z którego ja jak i Ty, będziemy mogli w przyszłości skorzystać. Podobno nowe podejście architektoniczne w Angular2 i teraz już też w Angular4 sprawia, że jest dużo prostszy do nauki. Czy tak faktycznie jest? Zapraszam do lektury.

Angular4 pierwszy krok i TypeScript

Z jakiego punktu startuję? Jakiś czas temu napisałem kilka aplikacji single page w AngularJS (Angular 1) oraz posiadam świeże doświadczenie w Aurelia.io, podczas którego zapoznałem się z „nowościami” ES2015. Od czasu nauki AngularJS minęło trochę czasu, ale pamiętam jak przebiegała nauka nowych zagadnień. Co jakiś czas była radość zrobienia czegoś nowego, a przy kolejnej rzeczy dowiadywałem się, że jeszcze Angulara nie umiem.

Mam dostęp do kursów na CodeSchool, także od tego miejsca zacząłem zgłębianie wiedzy o nowym Angularze. Interaktywne kursy z video, dobrze pozwalają się zorientować z czym masz do czynienia. Jednak jest to raczej tylko początkowe zapoznanie. W porównaniu do Angular2, Angular4 to głównie zmiany związane z optymalizacją, także jeżeli nie masz dostępu do kursu Angular4, możesz uczyć się z kursów Angular2.

UPDATE Aktualizacja projektu Angular2 do Angular4 (Linux/Mac):

Jeśli tak jak ja zacząłeś tworzyć projekt w Angular2 i chcesz zaktualizować go do Angular4, to możesz dokonać tego wykonując w konsoli poniższą komendę:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest <strong>zone.js@latest</strong> --save

Nowy Angular4 jest napisany w TypeScript. Nie trzeba go używać do pisania aplikacji w Angularze4, ale jest to sugerowany wybór, inaczej pewnie będzie niepotrzebnie trudniej. Dziś miałem farta! Na jednej z grup Facebookowych, ktoś wrzucił link do Udemy z kursem TypeScript w promocji za 0zł.

TypeScript jest rozbudowanym JavaScriptem, transpilowanym (kompilacja kodu źródłowego w inny kod źródłowy) do JavaScript. Zawiera to samo co JavaScript oraz trochę dodatków, które niejednego programistę ucieszą. TypeScript posiada między innymi silne typowanie, interfejsy i programowanie obiektowe oparte na klasach, w skrócie to co lubią programiści takich języków jak C#, czy Java. Jego popularność rośnie wraz z wrostem złożoności webowych aplikacji. Możesz poznać działanie TypeScript zaczynając od strony TypeScript Playground.

Czym jest silne typowanie? Jest wskazaniem jakiego typu dane mają być przechowywane pod daną zmienną. Dzięki temu już na etapie kompilacji można wychwycić podstawowe błędy. W JavaScripcie istnieją następujące typy: string, number, boolean, object, function, undefined. Szczególnie istotne jest wskazanie typów parametrów w deklaracjach funkcji.

Przykład silnego typowania w TypeScript

let age: number;
age = "2";
function addYear(age: number): number {
  return age + 1;
}
console.log(addYear(age));

Ten kod nie zostanie skompilowany, gdyż w drugiej linii jest próba przypisania stringa „2” do zmiennej age, która przyjmuje tylko liczby.

W JavaScript wyglądało by to tak:

var age;
age = "2";
function addYear(age) {
  return age + 1;
}
console.log(addYear(age));

Kod wykona się bez błędów, ale zwróci niepoprawną wartość „21” a nie 3 i do momentu wykonania kodu możemy być tego nieświadomi.

Nie jest to oczywiście kompletny kurs TypeScript, więc zachęcam do większego zgłębienia wiedzy na ten temat.

Angular4 CLI – pierwszy projekt

Wracając do samego Angulara, aby stworzyć nowy projekt najłatwiej jest użyć do tego Angular CLI (command line interface) i postepować zgodnie z instrukacjami podanymi na stronie Angular4 QuickStart.

Będziesz potrzebować NodeJS w wersji minimum 6.9.x oraz npm minimum 3.x.x.

Jeśli już masz to pierwsze co musisz zrobić, to zainstalować Angular CLI globalnie (na Macu/Ubuntu dodaj z przodu „sudo „):

npm install -g @angular/cli

A następnie musisz uruchomić kreator nowego projektu:

ng new my-app

Przejść do folderu z projektem:

cd my-app

I uruchomić server, opcja –open automatycznie otworzy też przeglądarkę:

ng serve --open

Po wykonaniu tych komend powinieneś widzieć w oknie przeglądarki tekst: „app works!”.

Jak widać samo stworzenie projektu jest banalnie proste. Teraz należy ten podstawowy szablon projektu zacząć rozwijać.

Budowa projektu w Angular4

Podstawowym składnikiem projektów w Angular4 są kompontenty. Kompontent kontroluje fragment strony. Po stworzeniu projektu przez Angular CLI główny komponent: AppComponent, który kontroluje i zawiera wszystkie pozostałe komponenty. Każdy komponent może mieć swoją klasę, html i css.

Komponent AppComponent jest zdefiniowany w pliku:

src/app/app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

Górna cześć komponentu nazywana jest dekoratorem komponentu. To tutaj wskazane jest miejsce (element drzewa DOM) renderowania kompontentu (selector), wygląd komponentu (templateUrl) oraz jego style (styleUrls). To właśnie dekorator zamienia JavaScriptową klasę w kompontent.

Dyrektywy w Angular4

Dyrektywy w Angular4 (ang. Angular4 Directives) są sposobem dodawania dynamicznego zachowania do HTMLa.

Typy dyrektyw:

• komponent (ang. Compontent) – jest dyrektywą z templatką.
• strukturalne (ang. Structural) – zmieniają wygląd dodając, usuwając lub zmieniając elementy HTML np: *ngFor, *ngIf
• atrybutowe (ang. Attribute)- zmieniają wygląd lub zachowanie elementu, komponentu albo innej dyrektywy

Przykład:

<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>

Filtry w Angular4

Filtry w Angular4 (ang. Angular4 Pipes) służą do zamiany danych wejściowych w pożądany format wyjściowy. Poniżej jest przykład transformacji tytułu do wielkich liter:

<h1>{{title | uppercase}}</h1>

Domyślnie dostępne filtry w Angular4 możesz znaleźć wchodząc na oficjalną dokumentację.

SASS, gdzie jest SASS?

Angular4 CLI utworzył projekt, ale nie pytał o konfigurację projektu i domyślnie utworzył projekt bez preprocessora CSS. Aby dodać SASS do projektu wykonaj następujące zmiany.

Zainstaluj sass:

npm install node-sass --save-dev

Zedytuj angular-cli.json. Zmień styleExt na scss:

"defaults": {
"styleExt": "scss",
"component": {}
}

oraz rozszerzenie głównego pliku ze stylami:

"styles": [
"styles.scss"
],

Zmień rozszerzenia plików ze stylami np. app.component.css na app.component.scss

Zmień ścieżki do plików ze stylami w komponentach:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.<strong>scss</strong>']
})
export class AppComponent {
  title = 'app works!';
}

Podsumowanie
Jeśli miałeś do czynienia z konsolą unixową i jakimś JavaScriptowym frameworkiem MVC, to łatwo jest stworzyć nowy projekt i dużo łatwiej jest się zacząć wdrażać w Angular4, niż w starszym AngularJS(Angular 1). Osobiście bardzo mi się spodobał TypeScript i nowa architektura Angulara, bardziej też niż w Aurelia.io. Na pewno będę rozwijał się dalej w tym kierunku i Tobie też polecam rozpoczęcie nauki Angular4.