3.

Angular framework (instalacija i arhitektura)

3.1. Preduslovi
Pre nego što počnemo sa radom, potrebno je podesiti razvojno okruženje i instalirati potrebne
alate i biblioteke.
Prvo je potrebno instalirati Node.js® i npm (Node Package Manager). Node.js može se
preuzeti sa zvanične stranice: https://nodejs.org/en/download/, a preporučuje se poslednja
LTS (Long Time Support) verzija (u vreme pisanja ovog dela teksta aktuelna verzija je 16.14.0),
a instalacija uklјučuje i npm tako da se ne mora instalirati posebno.
Nakon instalacije Node.js proveravamo instaliranu verziju:

Umesto konzole operativnog sistema (kod Windows operativnog sistema “cmd.exe”) može se
PowerShell ili ugrađen terminal kod Visual Studio Code (View->Integrated Terminal ili Ctrl+`),
tako da se dobija:

Zatim je potrebno da instalirati Angular CLI (Command Line Interface verzija za Angular, koja
omogućava brže kreiranje projekata, dodavanje fajlova i druge aktivnosti tokom razvoja
softvera, kao što su testiranje, kreiranje konačne verzije i deployment), što se na konzoli
postiže komandom:
 npm install -g @angular/cli

U slučaju da je Angular već instaliran, postojeći paketi će biti osveženi, dok neki mogu biti
uklonjeni ili dodati u skladu sa poslednjom verzijom:

Nakon uspešne instalacije, proveravamo da je Angular dostupan, kao i verziju, komandom:

ng -v
čime se dobija:

U slučaju da Angular nameravate da koristite sa Windows naloga koji nema administratorska

prava pristupa, morate instalirati Angular sa tog naloga, a iz administratorskog naloga dodati
u “Path”, bilo sistemski ili za tog korisnika (Desni klik na MyComputer -> Properties ->
Advanced system settings -> Environment variables) putanju do Angular bin direktorijuma,
npr. za korisnika NNN u pitanju je direktorijum:
C:\Users\NNN\AppData\Roaming\npm\node_modules\@angular\cli\bin
Uz Angular dolazi TypeScript kompajler, ali u slučaju da razvijate TypeScript aplikacije
nezavisno od Angular-a, potrebno je da instalirate TypeScript kompajler sledećom
komandom:
npm install –g typescript
Naravno, na kraju proverimo da li je kompajler dostupan, kao i verziju:
tsc -v

U slučaju da komanda nije dostupna, potrebno je dodati putanju u “Path”, slično kao i za
Angular:
C:\Users\NNN\AppData\Roaming\npm\node_modules\typescript\bin

3.2. Kreiranje Angular projekta

Novi Angular projekat kreiramo komandom:
ng new my-app
gde je “my-app” naziv projekta. Angular CLI instalira odgovarajuće npm pakete i kreira
neophodne fajlove za projekat, a takođe i generiše podrazumevanu (default) aplikaciju unutar
projekta.
Lokaciju projekta određujemo tako što datu komandu pozivamo iz direktorijuma unutar koga
želimo da kreiramo projekat.
Nakon kreiranja projekta sadržaj direktorijuma je kao na sledećoj slici.

Aplikaciju pokrećemo iz direktorijuma same aplikacije komandom

ng serve –open

ng serve komanda pokreće server, prati eventualne izmene u fajlovima i automatski ponovo
kreira aplikaciju sa uklјučenim izmenama, dok --open parametar automatski otvara browser
na adresi: http://localhost:4200/, čime se dobija strana kao na slici.
Ovo je novi izgled podrazumevanie Angular aplikacije, a ranije je ta aplikacija izgledala kao na
sledećoj slici. Ova izmena je bila planirana da se uvede od Angular verzije 7, međutim uvedena
je tek nešto kasnije. Ako vam više odgovara stari izgled početne aplikacije, možete sadržaj
odgovarajućeg fajla (app.component.html) zameniti sadržajem datim na:
https://github.com/mjnaderi/stryker-
old/blob/master/e2e/test/angular-project/src/app/app.component.html

Izvorni kod za početnu aplikaciju može se videti u src/app direktorijumu, gde za ovu aplikaciju
fajl app.component.ts predstavlјa glavnu komponentu. Ako u toj komponenti promenimo
vrednost za „title“, ta vrednost će se automatski prikazati u browser-u.
Takođe, u fajlu app.component.css možemo dodati CSS stil za H1 element.

Ovakva Angular aplikacija je pandan “Hello, World!” aplikacijama koja se često daje kao
osnovni primer u pojedinim programskim jezicima.

3.3. Struktura projekta (src direktorijum)

Sve Angular komponente, šabloni, stilovi, slike i bilo kakvi drugi podaci potrebni aplikaciji
nalaze se u src direktorijumu/folderu. Svi ostali fajlovi, koji se nalaze izvan ovog direktorijuma,
prestavlјaju samo podršku za izgradnju aplikacije.
3.3.1. src direktorijum
Opis strukture osnovne Angular aplikacije dajemo u sledećoj tabeli.
 File Purpose
app/app.component.x Defines the AppComponent along with an HTML template, CSS
stylesheet, and a unit test. It is the root component of what will become
x={ts,html,css,spec.ts} a tree of nested components as the application evolves.

Defines AppModule, the root module that tells Angular how to

app/app.module.ts assemble the application. Right now it declares only the
AppComponent. Soon there will be more components to declare.
A folder where you can put images and anything else to be copied
assets/*
wholesale when you build your application.

This folder contains one file for each of your destination environments,
each exporting simple configuration variables to use in your application.
The files are replaced on-the-fly when you build your app. You might use
environments/*
a different API endpoint for development than you do for production or
maybe different analytics tokens. You might even use some mock
services. Either way, the CLI has you covered.

A configuration file to share target browsers between different front-end

browserslist
tools.
Every site wants to look good on the bookmark bar. Get started with
favicon.ico
your very own Angular icon.

The main HTML page that is served when someone visits your site. Most
of the time you'll never need to edit it. The CLI automatically adds all js
index.html
and css files when building your app so you never need to add any
<script> or <link> tags here manually.

Unit test configuration for the Karma test runner, used when running ng
karma.conf.js
test.

The main entry point for your app. Compiles the application with the JIT
compiler and bootstraps the application's root module (AppModule) to
main.ts run in the browser. You can also use the AOT compiler without changing
any code by appending the--aot flag to the ng build and ng
serve commands.

Different browsers have different levels of support of the web standards.

Polyfills help normalize those differences. You should be pretty safe with
polyfills.ts
core-js and zone.js, but be sure to check out the Browser Support
guide for more information.

Your global styles go here. Most of the time you'll want to have local
styles.css styles in your components for easier maintenance, but styles that affect
all of your app need to be in a central place.

This is the main entry point for your unit tests. It has some custom
test.ts configuration that might be unfamiliar, but it's not something you'll need
to edit.

TypeScript compiler configuration for the Angular app

tsconfig.{app|spec}.json (tsconfig.app.json) and for the unit tests
(tsconfig.spec.json).
Additional Linting configuration for TSLint together with Codelyzer, used
tslint.json
when running ng lint. Linting helps keep your code style consistent.
3.3.2. root direktorijum
Pored fajlova u src direktorijumu postoje i drugi fajlovi i direktorijumu unutar glavnog
direktroijuma aplikacije.
File Purpose
Inside e2e/ live the end-to-end tests. They shouldn't be inside src/ because e2e
e2e/ tests are really a separate app that just so happens to test your main app. That's
also why they have their own tsconfig.e2e.json.
Node.js creates this folder and puts all third party modules listed in
node_modules/
package.json inside of it.
Simple configuration for your editor to make sure everyone that uses your project
.editorconfig has the same basic configuration. Most editors support an .editorconfig file.
See http://editorconfig.org for more information.
Git configuration to make sure autogenerated files are not committed to source
.gitignore
control.
Configuration for Angular CLI. In this file you can set several defaults and also
angular.json configure what files are included when your project is built. Check out the official
documentation if you want to know more.
npm configuration listing the third party packages your project uses. You can also
package.json
add your own custom scripts here.
protractor.conf.js End-to-end test configuration for Protractor, used when running ng e2e.
Basic documentation for your project, pre-filled with CLI command information.
README.md Make sure to enhance it with project documentation so that anyone checking out
the repo can build your app!
TypeScript compiler configuration for your IDE to pick up and give you helpful
tsconfig.json
tooling.
Linting configuration for TSLint together with Codelyzer, used when running ng
tslint.json
lint. Linting helps keep your code style consistent.
3.4. Problemi sa Angular, Node.js i npm
Događa se da Angular aplikaciju nije moguće kompajlirati zbog nekompatibilnosti između
instaliranih modula ili paketa, kao i nepodržane verzije Node.js ili Typescript-a.
Ako postoji problem između zavisnih paketa (dependency tree), problem se može rešiti
komandom:
npm install --legacy-peer-deps
Ako se npm install poziva iz skripte, opcija --legacy-peer-deps može se postaviti kao
podrazumevana:
npm config set legacy-peer-deps true
Ovim se rešava problem eventualne nekompatibilnosti između instaliranih paketa, ako i dalje
postoji problem, može se u nekim slučajevima rešiti brisanjem node_modules direktorijuma i
fajla package-lock.json.
3.4.1. Node version manager (nvm)
Kako bi se izbegli problemi sa različitim verzijama modula, paketa, verzije Node.js, npm,
Angular-a, itd., poželjno je da svi članovi tima, koji koriste Angular na projektu, postave svoje
okruženje i konfigurišu projekat na isti način, prema dogovoru.
Jedan način primene tog postupka opisan je u sledećem članku:
https://medium.com/most-wanted-experts/strict-rules-for-new-angular-project-7cbd32f37163

Ako se radi na više projekata, često postoji problem oni zahtevaju različite verzije Node.js-a,
a Node version manager omogućava da u bilo kom trenutku za tekući projekat aktiviramo
tačno određenu verziju Node.js-a. U pomenutom članku dat je opis za Linux i MacOS računare,
kao i Windows Subsistem for Linux (WSL), a za Windows je dostupan NVM for Windows:
https://github.com/coreybutler/nvm-windows