Do sada sam objavio nekoliko blog postova na temu Angular Frameworka koje možete pronaći u kategoriji Razvoj, ali sam odlučio objaviti i ovaj blog post kako bi olakšao pronalazak i pregled svih blog postova vezanih upravo uz Angular Framework jednako kao što sam to napravio i za Ionic Framework, a nadam se da ću isto uskoro učiniti i za NodeJS tj. ExpressJS.
Ako niste pronašli vama zanimljiv/potreban blog post slobodno ostavite komentar s prijedlogom teme pa ću se potruditi objaviti blog post ili pronaći resurs koji će vam biti od pomoći.
Aplikacije napravljene u Angularu u startu nisu SEO optimizirane što ne znači da to tako mora i ostati. Koristeći ng-toolkit Universal moguće je kroz nekoliko koraka omogućiti da Angular aplikacija postane SEO-Friendly.
Angular CLI
Prije svega, moram provjeriti koju verziju Angular CLI-a imam instaliranu. U ovom slučaju to je verzija 6.0.8
Shell
1
$ng-v
Kreiranje Angular projekta
Novi projekt kreiram i pokrećem sljedećim naredbama
Shell
1
2
3
$ng newAngularSeo--routing
$cdAngularSeo
$ng serve-o
U web pregledniku mogu vidjeti kako projekt trenutno izgleda. Na početnoj se stranici nalazi nekoliko redova teksta.
Međutim, ako kliknem na desnu tipku miša i odaberem ‘View page source‘ mogu vidjeti sljedeće tj. niti jedan od ranije spomenutih redova teksta ovdje nije vidljiv, a trebao bi biti ako želim imati SEO optimizaciju.
Dodavanje nove komponente
Novu komponentu dodajem sljedećom naredbom
Shell
1
$nggcnova-komponenta
Nakon što je komponenta kreirana
trebam dodati i pripadajuću rutu kako bi se nova komponenta prikazala. To ću napraviti unutar datoteke app-routing.module.ts.
Međutim, koliko god ja sadržaja dodao tražilice ga neće vidjeti što znači da ga neće moći indeksirati što opet znači da moja Angular aplikacija neće biti SEO optimizirana.
SEO optimizacija
Angular CLI će i ovdje odraditi veliki dio posla umjesto mene.
Pokrećem sljedeću naredbu i nadam se da neće biti grešaka.
Shell
1
$ng add@ng-toolkit/universal
Aplikaciju ću sada pokrenuti sljedećom naredbom
Shell
1
2
$npm run build:prod
$npm run server
i odmah mogu vidjeti da je od sada moja Angular aplikacija SEO optimizirana.
Moguće je primijetiti da početna i nova stranica imaju jednak naslov
XHTML
1
<title>AngularSeo</title>
Za novu komponentu mogu napraviti poseban naslov na sljedeći način.
SEO optimizacija je daleko kompleksnije područje da bi se gore navedeni primjer mogao smatrati cjelovitim rješenjem, ali i ovo je dobar početak za svakog Angular developera.
Struktura projekta:
package.json
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
{
"name":"angular-seo",
"version":"0.0.0",
"scripts":{
"ng":"ng",
"start":"ng serve",
"build":"ng build",
"test":"ng test",
"lint":"ng lint",
"e2e":"ng e2e",
"build:server:prod":"ng run AngularSeo:server && webpack --config webpack.server.config.js --progress --colors",
"build:browser:prod":"ng build --prod",
"build:prod":"npm run build:server:prod && npm run build:browser:prod",
U ovom ću blog postu pokazati kako koristiti Ionic Range komponentu koja korisnicima mobilne aplikacije omogućava odabir vrijednosti pomicanjem klizača po horizontalnoj liniji.
Osim toga, mogu se napraviti i konkretnije stvari. Npr. klizač za izračun broja mjeseci otplate kredita pri čemu je 1 mjesec minimalna vrijednost, a 120 mjeseci tj. 10 godina maksimalna vrijednost.
home.html
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ion-header>
<ion-navbar>
<ion-title>
Ionic Range
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label>Otplata kredita u mjesecima</ion-label>
<div>Ukupno mjeseci za otplatu: {{vrijednost1}}</div>
<div>Godina: {{godina}} Mjeseci: {{mjesec}}</div>
</ion-content>
Funkcionalnost sada izgleda malo drugačije
home.ts
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import{Component}from'@angular/core';
import{NavController}from'ionic-angular';
@Component({
selector:'page-home',
templateUrl:'home.html'
})
exportclassHomePage{
vrijednost1:number;
godina:any;
mjesec:any;
constructor(public navCtrl:NavController){}
prikazVrijednosti(a){
this.godina=Math.floor(a/12);
this.mjesec=a%12;
console.log(a);
console.log(this.godina);
console.log(this.mjesec);
}
}
Zaključak
S obzirom da je ova komponenta toliko jednostavna tu se nema što posebno za zaključiti osim da je pomoću ove komponente moguće poboljšati korisničko iskustvo korištenja Ionic aplikacije.
Kada više developera, na različitim OS-ovima, sa različitim verzijama npr. Angulara, radi na istim projektima mogu se događati vrlo čudne stvari.
Rečenica “To radi na mojem računalu”, iako vrlo često posluži kao izgovor, nije rješenje.
Docker omogućava da se na razvojnom okruženju kreira kopija produkcijskog okruženja u kojemu se neka aplikacija može testirati prije puštanja u pogon. Na taj način developer može biti siguran da neće biti iznenadnih problema zbog različitih verzija nekog dijela sustava.
Uvod
Docker je platforma koja developerima i sistemskim administratorima omogućava kreiranje, distribuiranje i pokretanje aplikacija na različitim razvojnim okruženjima.
Docker se temelji na virtualizaciji tj. u slučaju korištenja Windowsa 10 na Hyper-V koji treba biti omogućen. Ja ga prije instalacije neću omogućiti pa ćemo vidjeti što će Docker napraviti po tom pitanju i hoće li sam pokrenuti pozadinske procese koji mu trebaju.
Ostavljam zadane postavke i klikom na ‘Ok‘ kreiram prečac na radnoj površiti.
Docker će sada otpakirati sve ranije preuzete komponente.
Kada instalacija završi potrebno se odjaviti iz Windowsa kako bi se postupak dovršio.
Nakon ponovne prijave u Windows pojavit će se poruka “Docker is starting… This will only take a few seconds“.
S obzirom da sam ranije spomenuo kako nisam aktivirao Hyper-V čini se da će Docker to sada učiniti za mene nakon čega će se Windowsi restartati.
Kada se Windowsi ponovno pokrenu napokon mogu pokrenuti Docker po prvi put i omogućiti mu određena prava.
“Docker is now up and running!”
Uspješnost instalacije provjeravam naredbama:
Shell
1
2
3
$docker--version
$docker version
$docker info
$ docker version
$ docker –version
$ docker info
Pokretanje
Sada ću koristiti Docker Hub repozitorij s kojeg ću preuzeti dva paketa za potrebu testiranja. Ondje mogu objaviti i svoje pakete jednom kada ih kreiram.
Naredbom
$docker pull seqvence/static-site preuzimam image na svoje računalo.
Ovaj put koristim naredbu
$docker run-d-Pseqvence/static-site za pokretanje, a nakon toga koristim i naredbu
$docker ps da vidim na kojoj ću adresi tj. kojem portu pristupiti aplikaciji.
U ovom slučaju to je http://localhost:32769/.
Popis do sada preuzetnih paketa vidim pokretanjem naredbe
$docker image ls
Zaključak
Postavljanje Dockera zahvjeta neko vrijeme kako bi se sve postavilo kako treba, ali kasnije se definitivno isplati.
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<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
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-nav – Material Sidenav
–
ng generate@angular/material:material-dashboard--name=my-dashboard – Material Dashboard
–
ng generate@angular/material:material-table--name=my-table – Material Data Table
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.
angular.json
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"projects":{
"my-project-name":{
"projectType":"application",
"architect":{
"build":{
"configurations":{
"production":{},
"demo":{},
"staging":{},
}
},
"serve":{},
"extract-i18n":{},
"test":{},
}
},
"my-project-name-e2e":{}
},
}
– 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
my-service.ts
JavaScript
1
2
3
4
5
6
import{Injectable}from'@angular/core';
@Injectable()
exportclassMyService{
constructor(){}
}
on morao navoditi unutar app.module.ts datoteke
app.module.ts
JavaScript
1
2
3
4
5
@NgModule({
...
providers:[MyService]
})
exportclassAppModule{}
dok je sada dovoljno unutar servisa navesti u kojem ga modulu želimo koristiti.
– 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.
