Angular (2,4,5) 6 je ‘sranje’ !?

Nije prošlo dugo kako sam objavio blog post o ažuriranju na Angular CLI 1.7.4, a sada smo već na verziji Angular 6.

Ako ništa drugo, napokon su objedinjeni Angular Framework, Angular Material i Angular CLI:

@angular/angular 6.0.0
@angular/cli 6.0.0
@angular/material 6.0.0

Dosadašnje verzije išle su ovim redom:

Angular 2, Angular 4, Angular 5, Angular 6
Angular CLI 1, Angular CLI 6
Angular Material 2, Angular Material 5, Angular Material 6

Što novoga donosi Angular 6?

The 6.0.0 release of Angular is here! This is a major release focused less on the underlying framework, and more on the toolchain and on making it easier to move quickly with Angular in the future. – Version 6 of Angular Now Available

ng update

ng update <package> je nova CLI naredba koja analizira sadržaj package.json datoteke i predlaže potrebna ažuriranja. U pozadini koristi npm/yarn čime se proces dodatno automatizira. Sada je na autorima paketa da ih prilagode novom pristupu.

– ng add

ng add <package> je također nova CLI naredba koja mi se sviđa čak i više od prethodne, a omogućava jednostavno dodavanje novih mogućnosti unutar projekta.

ng add @angular/pwa – pretvara ‘običnu’ Angular aplikaciju u PWA
ng add @ng-bootstrap/schematics – dodaje podršku za ng-bootstrap
ng add @angular/material – dodaje i postavlja Angular Material

Angular Elements

Omogućava korištenje postojećih Angular komponenti izvan Angular projekta na način da ih registrira kao Custom Elements. Ovo je toliko dobra stvar da to nije za vjerovati.

Najjednostavnije rečeno, omogućava korištenje neke Angular komponente unutar nekog drugog Frameworka ili CMS-a.

– Angular Material Starter Components

Nakon pokretanja naredbe ng add @angular/material tj. dodavanja podrške za Angular Material otvara se mogućnosti korištenja 3 gotove starter komponente, čime se na brz i jednostavan način stvara lijep kostur nove Angular aplikacije.

ng generate @angular/material:material-nav --name=my-navMaterial Sidenav
ng generate @angular/material:material-dashboard --name=my-dashboardMaterial Dashboard
ng generate @angular/material:material-table --name=my-tableMaterial Data Table

CLI Workspaces

CLI v6 omogućava istovremeni rad više projekata tj. aplikacija ili biblioteka. Svaka aplikacija može imati svoju strukturu koja se nalazi unutar angular.json datoteke.

– Tree Shakable Providers

Servisi se više ne moraju navoditi unutar app.module.ts datoteke čime se automatski smanjuje veličina aplikacije.

Prije se nakon kreiranja servisa

on morao navoditi unutar app.module.ts datoteke

dok je sada dovoljno unutar servisa navesti u kojem ga modulu želimo koristiti.

Od ostalog tu su još:

– izbacivanje web animations polyfilla koji više nije potreban
RxJS v6
Long Term Support (LTS)

Zbog svega navedenog jedna čekam započeti nove Angular projekte i nadam se da mi ovaj početni entuzijazam neće prisjesti.

Kako ažurirati projekt na Angular 6.0.0?

Detalje je moguće pronaći na adresi https://update.angular.io/.

Postupak se može podijeliti u tri faze:

– Ažurirati @angular/cli
– Ažurirati Angular Framework pakete unutar projekta
– Ažurirati ostale pakete unutar projekta

Angular je, bio, ‘sranje’?

Sjećam se vremena kada sam bio zaljubljen u Angular 1.x i „$scope“. To su bila vremena kada je Angular život developera činio donekle jednostavnijim.

The whole idea of a good framework is that you start with the simple stuff and you make it more complicated only when and where you want it to be more complicated. While Angular team went in a completely opposite way. – Why Angular 2 (4, 5, 6) sucks

Postojala je, kao i u svemu, određena krivulja učenja, ali jednom kada se savladala stvari su išle svojim tokom. HTML kompajler, TypeScript, Webpack, CLI, angular-cli.json -> angular.json,… nisu bile stvari kojima se developer trebao opterećivati. U konačnici su sve te stvari vrlo korisne, ali početniku u svijetu developmenta kao da daju dovoljno razloga da odustane od svega.

Osobno mi odgovara TypeScript, ali to ne znači da mora odgovarati svima. Netko je možda odabrao JavaScript upravo iz razloga zato što je jednostavan za početnike (dovoljno je imati web preglednik). Nakon nekog vremena taj početnik sazna za Angular i umjesto da mu se omogući korištenje Angulara sa do sada stečenim znanjima njemu se nameće nekakav TypeScript (Type,Interface,Decorator) za kojega niti ne zna čemu služi osim da mu, u tom trenutku, stvara otpor prema učenju.

Na stranu sada i ovo gore spomenuto, ali definitivno najgora stvar koju Angular radi upornim promjenama je zastarijevanje dokumentacije. U dvije godine imali smo nekoliko verzija, svaka sa svojim ‘cakama‘ pa se ti onda snađi ‘guglajući‘.

Zaključak

Ne mislim da je Angular 6 ‘sranje’ jer donosi puno poboljšanja kojima je cilj olakšati developerima život. Smatram da je to bio cilj i svake od prethodnih verzija samo je možda sve odrađeno na pomalo nespretan način čime se stvarao kaos.

I nadam se da će Angular sada napokon prestati s tim izmjenama da stvarno ne bi postao ‘sranje’ jer ‘sranje’ nije slatko.

Ovaj blog post je primarno bio zamišljen kao uvod u Angular 6 i sve ono, novo, što on donosi. I dok sam tako razmišljao o strukturi blog posta palo mi je na pamet da ću na kraju imati više blog postova o različitim verzijama koje svako malo dolaze što za posljedicu ima zastarijevanje prijašnjih blog postova bržim tempom nego što ih ponovno mogu napisati/objaviti. Usred tog razmišljanja i ‘guglanja‘ što o tome misle drugi developeri naletio sam na članak „Why Angular 2 (4, 5, 6) sucks“ čime je ovaj blog post dobio sasvim jednu drugu notu.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

U ovom ću blog postu pokazati postupak ažuriranja Angular CLI-a sa verzije angular-cli (1.0.0-beta.28.3) na verziju @angular/cli (1.7.4).

Zašto ažuriranje?

Angular ima mnogo značajki kao što su TypeScript i Ahead of Time (AOT) koje pomažu kod prepoznavanja pogrešaka prilikom ‘buildanjaAngular aplikacije. Tim koji stoji iza Angulara trudi se svakom novom verzijom te značajke poboljšavati kako bi prepoznale još više grešaka i radile brže.

Zbog toga se zna dogoditi da kod ažuriranja na noviju verziju budu prepoznate neke greške koje ranije nisu bile uočene.

Uz to, ne treba zaboraviti niti dosta novih značajki koje dolaze s novijim verzijama kao što su Service Worker za progresivne web aplikacije (PWA) i mnoge druge.

Sve to su razlozi za ažuriranje.

Kako ažurirati?

Ažuriranje je potrebno napraviti na dvije razine. Globalno na računalu i lokalno tj. unutar svakog projekta.

Globalna razina

Za početak, provjeravam trenutnu globalnu verziju CLI-a i vidim da je u pitanju angular-cli 1.0.0-beta.28.3 što znači da je ažuriranje potrebno.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Pokretanjem sljedeće naredbe uklanjam trenutnu verziju s računala

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Odmah ću očistiti i cache

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Sada ću instalirati novi @angular/cli

Ažuriranje Angular projekta sa angular-cli na @angular/cli

I to je sve što se tiče globalne razine.

Lokalna razina

Sada se prebacujem unutar lokalnog projekta i ako ga pokušam pokrenuti koristeći $ ng serve dobit ću sljedeću poruku

Ažuriranje Angular projekta sa angular-cli na @angular/cli

Uzrok tome nalazi se unutar package.json datoteke, a znači da se globalna i lokalna verzija CLI-a ne slažu i da zato nije moguće pokrenuti projekt.

Ako želim postojeći projekt prilagoditi da radi sa novim Angular CLI-em trebam napraviti više izmjena. S druge strane, imam i sljedeću opciju, a to je kreirati novi projekt i onda u njega prebaciti dijelove postojećeg projekta što ću sada i napraviti.

Novi projekt kreiram naredbom

Iz postojećeg projekta u novi prebaciti ću sljedeće:

– mapu src/assets
– mapu src/app
– datoteku src/index.html
– datoteku src/styles.css
– datoteku src/favicon.ico

Osim toga, unutar nove datoteke package.json trebam dodati i module iz postojećeg projekta.

package.json sada izgleda ovako. Označio sam module koje sam dodao iz ‘stare’ package.json datoteke

Nakon toga pokrećem sljedeću naredbu kako bi se ti moduli instalirali u projekt.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

I to je to! Projekt je sada temeljen na novom Angular CLI-u i moguće ga je pokrenuti naredbom $ ng serve

CSS i JS se nisu učitali!

Ažuriranje Angular projekta sa angular-cli na @angular/cli

U slučaju da nisu učitane sve JS tj. CSS datoteke potrebno ih je iz src/index.html prebaciti unutar src/angular-cli.json na sljedeći način:

Iz index.html-a uzimam

i stavljam ih unutar angular-cli.json

Zaključak

Iako na prvu ovaj proces može djelovati komplicirano zapravo je vrlo logičan i jednostavan. Ovisno od projekta do projekta može se dogoditi da je potrebno napraviti još dodatne prilagodbe. O svemu tome obavijesti će se nalaziti unutar CMD prozora.

Angular & Marvel API – demo aplikacija

U ovom ću blog postu pokazati kako koristiti Marvel API unutar Angular projekta. Fokus će biti na pravilnoj konfiguraciji API-ja nakon koje je moguće, prema dokumentaciji, koristeći različite parametre dobiti konkretne rezultate.

O Marvel API-ju

Marvel API je RESTful alat koji pomaže developerima stvoriti web stranice i aplikacije pomoću podataka iz 70 godišnje povijesti Marvela. Trenutno je dostupno šest vrsta resursa kao što su individualni stripovi (Comics), grupe ili serije stripova (Comic series), dijelovi pojedinih stripova (Comic stories), veliki događaji iz pojedinih stripova (Comic events and crossovers), žene, muškarci i organizacije koji su kreatori stripova (Creators) i likovi iz stripova (Characters).

Originalna putanja za pristup resursima nalazi se na http(s)://gateway.marvel.com/ i trenutno je moguće koristiti samo GET metodu.

Svaki zahtjev koji se uputi na gore navedeni URL mora u sebi sadržavati nekoliko parametara koji se dobiju nakon registracije.

Angular i Marvel API

API koji ću koristiti u nastavku ima sljedeći oblik

http://gateway.marvel.com/v1/public/comics?ts=1&apikey=1234&hash=ffd275c5130566a2916217b101f26150

iz čega je vidljivo da se sastoji od tri glavna parametra

  • apikey = PublicKey
  • tstimestamp (or other long string which can change on a request-by-request basis)
  • hashmd5 ključ ts parametra (npr. md5(ts+privateKey+publicKey))

Postavljanje Angular projekta

Koristeći Angular CLI kreiram novi projekt naredbom

Odmah ću kreirati i servis za API koristeći naredbu

Angular i Marvel API

Kao što se može vidjeti na slici iznad API servis trenutno ne zadovoljava potrebne preduvjete za uspješno korištenje. S obzirom da će taj servis primarno biti korišten za pozivanje HTTP(S) protokola moram dodati @angular/http. Također, koristiti ću i map operator koji će dobivenu vrijednost transformirati u JSON. Na kraju, prema ranije spomenutoj Marevl API dokumentaciji, moram koristiti MD5 hash, u tome će mi pomoći ts-md5 NPM paket koji instaliram naredbom $ npm i ts-md5 --save.

API servis na kraju izgleda ovako

Sada taj servis mogu koristiti u bilo kojem dijelu Angular aplikacije. Za potrebu ovog primjera zadržat ću se na app.component.ts.

Otvaranjem http://localhost:4200/ adrese odmah se dohvaćaju Marvel likovi sa ranije kreiranog API-ja.

Angular i Marvel API

Na kraju to može izgledati i ovako

Angular i Marvel API

Na slici iznad se može primijetiti da je prikaz vremena lijepo formatiran i da tako nije izgledao ranije u animaciji. Za to je zaslužan MomentJS.

Zaključak

Iz cijelog ovog blog posta najvažniji dio je API servis koji sadržava sve potrebno za uspješan dohvat podataka sa Marvel API-ja. Prikaz podataka radi se ovisno o potrebama od slučaja do slučaja. Konkretno u ovom blog postu fokus je bio na uspješnom dohvatu podataka.

Struktura projekta prema package.json

Angular & pdfmake – kreiranje PDF-a

U ovom ću blog postu pokazati kako kreirati PDF dokument unutar Angular web aplikacije koristeći pdfmake.

Što je pdfmake?

pdfmake je biblioteka temeljena na JavaScriptu koja omogućava kreiranje PDF dokumenata iz JSON-a. Može se koristiti na serverskoj npm install pdfmake i klijentskoj bower install pdfmake strani.

Osobno, više sam za NPM nego za Bower. Razloga je nekoliko.

Kreiranje Angular projekta

Koristeći Angular CLI pokrećem novi projekt

Nakon što sam pokrenuo web aplikaciju u web pregledniku i uvjerio se da sam sve ispravno postavio mogu krenuti u instalaciju pdfmake biblioteke.

pdfmake implementacija

Nakon instalacije uvozim pdfmake u komponentu unutar koje želim kreirati PDF.

Što se vidljivog dijela aplikacije tiče ondje će se u ovom primjeru nalaziti samo tri gumba, po jedan za otvaranje, preuzimanje i ispis PDF-a.

Angular – kreiranje PDF-a koristeći pdfMake

Kreiranje PDF-a moguće je na tri načina:

1.) Otvara PDF u novom tabu web preglednika.

pdfmake open

2.) Otvara prozor za ispis.

pdfmake print

3.) Preuzimanje PDF-a na računalo. U ovom je slučaju moguće unaprijed odrediti naziv PDF-a.

pdfmak download

Kao što se vidi iz gore navedenih funkcija sadržaj od kojega se kreira PDF dobije se iz objekta this.docDefinition koji u ovom konkretnom primjeru izgleda ovako:

Više primjera moguće je pronaći na poveznici http://pdfmake.org/playground.html

Osim toga, tražio sam popis mogućih CSS stilova i za sada sam pronašao poveznicu https://stackoverflow.com/a/32805835/5059916 na kojoj se spominje nekoliko njih.

Zaključak

pdfmake omogućava brzo i jednostavno kreiranje PDF-a unutar Angular aplikacije.

I za kraj, u nastavku dajem strukturu projekta prema package.json datoteci.