Uvod u Angular

Razvojno okruženje
• Node.js – okruženje koje omogućava izvršavanje JavaScript koda na
serverskoj strani
• bazirano na Google Chrome V8 JavaScript engine
• NPM – menadžer paketa
• TypeScript - jezik
• Angular CLI (Command line interface za Angular)
• Tekst editor – VS Code

2
 Angular CLI - instalacija
npm install -g @angular/cli ng v

3
VS Code ekstenzija Angular Language Service

4
Angular
• Angular je platforma za kreiranje web aplikacija
• Angular je kreiran od strane kompanije Google
• Angular razvojno okruženje se koristi za kreiranje klijentskog dela web
aplikacije (client-side framework) korišćenjem HTML-a, CSS-a i TypeScripta
• Angular je framework koji omogućava kreiranje aplikacija sa jednom
stranom
SPA - Single Page Application
• Ima modularni pristup
• Tekuća verzija je Angular 10 jun 2020
5
Moduli
• Svaka Angular aplikacija se sastoji od modula (NgModule)
• Modul je osnovni gradivni blok svake angular aplikacije
• Moduli su logičke celine angular aplikacije, blokovi funkcionalnosti (koreni
modul, modul za rutiranje i sl.)
• Modul se sastoji od komponenti

6
Angular komponente
• Komponenta kontroliše deo ekrana koji se naziva pogled
• Svaka komponenta obezbeđuje deo funkcionalnosti za aplikaciju
• Komponenta se sastoji od:
• Klase
• Metapodataka koji opisuju klasu i proširuju njenu funkcionalnost
• Šablona koji se koristi za definisanje html pogleda

7
Kreiranje angular aplikacije
• Kreiraj folder gde će biti smeštena aplikacija (može se koristiti i
postojeći folder npr. Desktop)
• Otvori folder u VS Code okruženju
• Prikaži terminal (View->Terminal)

8
Kreiranje angular aplikacije
ng new ImeAplikacije

9
Dodavanje modula za rutiranje

10
Izbor CSS formatiranja

11
Proces kreiranja aplikacije

12
Kreiran folder sa Angular aplikacijom

Zatvori postojeći folder i otvori folder u kome je kreirana angular aplikacija 13

Pokretanje angular aplikacije
ng serve --open

14
Pokrenuta aplikacija

15
Prikaz u browseru

16
 Zaustavljanje Live Development Servera

CTRL + C - zaustavljanje servera

17
Struktura kreirane aplikacije

18
Struktura kreirane aplikacije
• Folder e2e (end to end testing) sadrži konfiguracione fajlove za testiranje
aplikacije (unit test)
• Folder node_modules sadrži preuzete pakete
• Folder src sadrži izvor kod i ima 3 podfoldera
• app folder sadrži fajlove angular projekta: komponente, šablone, poglede,....
• assets folder sadrži statičke fajlove kao što su npr. slike
• environments folder sadrži fajlove vezane za okruženje, postoji razvojno i produkciono
okruženje
• Fajl tsconfig.json sadrži typescript konfiguraciju
• Fajl package.json je JSON fajl koji sadrži informacije o potrebnim paketima u
projektu
• Fajl angular.json sadrži konfiguracione opcije za kompajliranje i razmeštanje
projekta

19
Folder src
• Fajl index.html predstavlja glavnu html
stranu koja se učitava pri poseti sajta
• Fajl main.ts predstavlja glavnu ulaznu
tačku aplikacije, tu se specificira koreni
modul aplikacije koji se pokreće pri
pokretanju aplikacije
• favicon.ico je ikona koja se prikazuje u
tabu browsera

20
Folder app

21
Glavni(koreni) modul aplikacije
• Prilikom kreiranja nove angular aplikacije angular automatski
generise glavni(koreni, root) modul aplikacije AppModule
• Da bi neka klasa bila modul, mora da ima anotaciju
@NgModule
• Prilikom izrade aplikacije, učitavamo razlicite eksterne
module (druge biblioteke) u postojeći modul (aplikaciju)

22
 Glavni(koreni) modul aplikacije
app.module.ts

23
Glavni(koreni) modul aplikacije
• Deklaracija import služi za uzimanje funkcionalnosti iz
postojećih modula
• Dekoratoru (anotaciji) @NgModule se prosleđuje objekat koji
sadrži svojstva declarations, imports, providers i bootstrap
• Svim ovim svojstvima se dodeljuju nizovi
• declarations niz specificira koje komponente i direktive pripadaju modulu
• imports niz služi da se importuju funkcionalnost iz drugih modula
• providers niz služi da se specificiraju servisi koji obezbeđuju podatke
• bootstrap niz (govori angularu koje komponente da kreira u ubaci u DOM
browsera)
• Ovde se učitava glavna(korena) komponenta aplikacije i ubacuje u stranu index.html
24
Glavna komponenta aplikacije
• Glavni modul (koreni modul) aplikacije uvek ima glavnu (korenu ili root)
komponentu AppComponent, ali može sadržati i druge komponente
• Glavna komponenta se učitava prilikom pokretanja aplikacije

25
 Glavna komponenta

fajl app.component.ts
26
Struktura glavne komponente
• Direktiva import komponente importuje funkcionalnosti iz drugih modula
• Klasa komponente ima dekorator @Component
• Dekoratoru komponente se prosleđuje objekat koji sadrži svojstva
(metapodaci)
• selector, specificira ime html taga koji služi za ubacivanje komponente
• templateUrl je adresa html šablona koga koristi komponenta
• može se definisatii inline šablon pomoću svojstva template
• styleUrls definiše stilove pridružen šablonu
• može se definisati inline stil pomoću svostva styles

27
Promena fajla app.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
naslov = 'Uvod u Angular aplikacije';
ime = 'Marko';
prezime = 'Markovic';
}

28
Šablon komponente
<div style="text-align:center">
<h1>
{{naslov}}!
</h1>
<div>
{{ime}} {{prezime}}
</div>
</div>

string interpolacija

29
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uvod</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

30
Početna strana aplikacije

31
Pitanje 1
Angular aplikacija:
a. mora sadržati bar jedan modul
b. ne mora sadržati ni jedan modul
c. mora sadržati tačno 2 modula

Odgovor: a

32
Pitanje 2
Da bi neka typescript klasa bila Angular modul mora sadržati anotaciju :
a. @Module
b. @AngularModule
c. @NgModule

Odgovor: c

33
Pitanje 3
Da bi neka typescript klasa bila Angular komponenta mora sadržati anotaciju :
a. @Component
b. @AngularComponent
c. @NgComponent

Odgovor: a

34
Pitanje 4
Pokretanje angular aplikacije vrši se korišćenjem komande:
a. ng serve
b. ng start
c. ang start

Odgovor: a

35
Pitanje 5
Angular modul:
a. sadrži tačno jednu komponentu
b. može sadržati više komponenti
c. ne sadrži komponente

Odgovor: b

36
Angular databinding
Data Binding
• Data Binding je proces prosleđivanja podataka iz komponente ka
pogledu i obrnuto
• Vrši se povezivanje DOM elemenata sa svojstvima klase komponente
• Postoji 4 načina povezivanja podataka u Angularu:
• Interpolacija
• Povezivanje svojstva (Property binding)
• Povezivanje događaja (Event binding)
• Dvosmerno povezivanje (Two Way Binding)

38
Interpolacija -klasa komponente
export class AppComponent {
naslov = 'Data binding';
osoba = {ime: 'Marko', prezime: 'Markovic', grad: 'Beograd'};

citajIme(): string {
return this.osoba.ime + ' ' + this.osoba.prezime;
}
}

39
Interpolacija-pogled
<b>Vezivanje za svojstvo</b>
<h2>{{naslov}}</h2>
<p>
Ime: {{osoba.ime}}
</p>
<p>
Prezime: {{osoba.prezime}}
</p>
<b>Vezivanje za metodu</b>
<p>{{citajIme()}}</p>

40
Property binding
• Jednosmerna komunikacije između komponente i pogleda
• Podaci se prosleđuju od komponente do pogleda komponente
• Pristupa se svojstvu html elementa i postavlja mu se vrednost na
osnovu nekog svojstva klase komponente
• Koriste se srednje zagrade [] da se specificira binding target, odnosno
svojstvo html elementa
• Binding sors se smešta unutar navodnika i predstavlja svojstvo klase
komponente

41
Property binding

export class AppComponent {

adresaSlike = '/assets/angular.jpg';
zabrani = true;
}

<img [src]="adresaSlike">
<br>
<button [disabled]="zabrani">Prikazi</button>

42
Event binding
• Podaci se prosleđuju od pogleda komponente ka komponenti
• Izvršava akciju u komponenti kada korisnik izvršava akciju u
korisničkom interfejsu pogleda npr. klikne na dugme u pogledu
• Ime događaja se stavlja unutar malih zagrada npr. (click)
• Zatim se događaju dodeljuje funkcija iz komponente

43
Event binding
klasa komponente:

export class AppComponent {

brojac = 0;

uvecaj(): void{
this.brojac++;
console.log('Vrednost brojaca: ', this.brojac);
}
}

šablon komponente:

<button (click)="uvecaj()">Uvecaj</button>

44
Two Way Binding (dvosmerno povezivanje)
• Promene u komponenti se propagiraju do pogleda
• Promene u pogledu menjaju podatke u komponenti
• Koristi se kod formi za unos podataka
• Angular koristi kombinaciju povezivanja sa svojstvom (od komponente
ka pogledu) i povezivanja sa događajem (od pogleda ka komponenti)
da bi ostvario dvosmerno povezivanje
• Koristi se ngModel direktiva

45
Importovanje FormsModula u glavni modul
ngModel direktiva zahteva postojanje FormsModule modula

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
46
 Direktiva ngModel
export class AppComponent {
ime = '';
}

<p>
Unesite ime: <br>
<input type="text" [(ngModel)]="ime">
<br>
<span>{{ime}}</span>
</p>

47
Pitanje 1
Angular komponenta ima javno polje pod nazivom ime. Na koji način se sadržaj
ovog polja prikazuje u šablonu komponente
a. [ ime ]
b. {{ ime }}
c. { ime }
Odgovor: b

48
Pitanje 2
Angular komponenta ima javno polje: sakrivanje tipa boolean. Na koji način se
svojstvo hidden nekog div elementa u šablonu vezuje za vrednost ovog polja?
a. <div [hidden]= "sakrivanje">Div 1</div>
b. <div {hidden}= "sakrivanje">Div 1</div>
c. <div {{hidden}}= "sakrivanje">Div 1</div>

Odgovor: a

49
Pitanje 3
Klasa komponente ima funkciju prikazi() koja nema ulazne parameter i ne vraća
vrednost. U šablonu komponente treba omogućiti poziv ove funkcije pri kliku
na dugme:
a. <input type="button" value="Click" (click)="prikazi" />
b. <input type="button" value="Click" [click]="prikazi()" />
c. <input type="button" value="Click" (click)="prikazi()" />

Odgovor: c

50
Pitanje 4
Definisano je polje klase komponente tipa string pod nazivom ime. Za
dvosmerno povezivanje vrednosti tekstualnog polja šablona komponente sa
poljem ime komponente koristimo izraz:

a. <input type="text" [(ngModel)]="ime">

b. <input type="text" ngModel="ime">
c. <input type="text" (ngBind)="ime">

Odgovor: a

51