Kategorija: Frontend

U ovom blog postu proći ću kroz proces postavljanja Angular 2 projekta od nule. Zašto od nule? Zato što mislim da je važno da prilikom postavljanja novog projekta znate zašto ste nešto koristili unatoč činjenici da postoje automatski generatori koji će cijeli projekt postaviti za vas.

Naravno, postoji i jednostavniji način koji ću spomenuti na kraju blog posta, a možda i napišem poseban blog post o tome ako netko izrazi želju u komentarima.

Cilj ovog blog posta:
– Kreirati osnovnu strukturu tj. osnovne datoteke
– Dodati podršku za TypeScript
– Postaviti temelj za Angular 2 i dodati System.js
– I konačno, početi koristiti Angular 2

I – Osnovna struktura

Započet ćemo s kreiranjem mape Angular2-starter-projekt.

I.I

Unutar mape kreirat ćemo index.html

I.II

i package.json pomoću naredbe npm init --yes. Što je $ npm init i čemu služi --yes?

Već sada možemo otvoriti index.html u web pregledniku i vidjeti “Angular 2 sadržaj”. Za sada je to samo obična HTML datoteka koju je potrebno osvježiti (F5) u web pregledniku prilikom svake promjene kako bi se one prikazale i daleko je od Angular 2 aplikacije koju želimo napraviti.

I.III

Da bi to promijenili dodat ćemo lite-server, prema preporuci angular.io resursa, koji će služiti za pokretanje aplikacije, automatsko otvaranje u web pregledniku i automatsko osvježavanje prilikom promjena u datotekama.

Lite-server dodajemo pomoću naredbe $ npm install lite-server --save-dev.

Nakon instalacije možemo primijetiti dvije stvari, a to su node_modules mapa, u kojoj će se nalaziti svi budući NPM paketi, i promjena unutar package.json u kojemu se sada nalazi i informacija da naš projekt koristi lite-server.

Ako sada pokušate pokrenuti naredbu $ npm run lite dobit ćete poruku o grešci npm ERR! missing script: lite jer vam nedostaje još samo jedna sitnica unutar package.json koji sada treba izgledati ovako:

Projekt od sada pokrećemo naredbom $ npm run lite te će se on automatski otvoriti u zadanom web pregledniku i osvježavati prilikom svake promjene.

Trenutni izgled aplikacije

Struktura projekta sada izgleda ovako:

II – TypeScript

TypeScript je superset JavaScripta i kada govorimo o Angular 2 projektima gotovo je nemoguće pronaći primjer gdje se TypeScript barem ne spominje kao opcija. Uglavnom, uz TypeScript dolazi puno prednosti o kojima možete nešto više saznati na https://www.typescriptlang.org/.

Angular 2 projekte možete raditi i koristeći čisti JavaScript. Prilikom proučavanja dokumentacije na angular.io u donjem lijevom uglu možete odabrati koju vrstu dokumentacije želite vidjeti. Dokaz koliko Angular gura TypeScript je i taj što ako odaberete JavaScript u najvećem broju slučajeva umjesto dokumentacije možete vidjeti poruku “This page is not yet available in JavaScript. We recommend reading it in TypeScript.“.

II.I

No, vratimo se ovom projektu. Prije svega, trebamo dodati TypeScript i Typings u projekt.

TypeScript služi kao prevoditelj ES6 u ES5 tj. JavaScript koji će web preglednik moći razumjeti, a Typings je alat koji omogućava dodavanje proširenja za TypeScript.

Oboje ih možemo istovremeno dodati u projekt naredbom
$ npm install --save-dev typescript typings.

Promjena se odmah reflektira na package.json koji sada izgleda malo drugačije:

II.II

Sada možemo kreirati tsconfig.json i typings.json prema uputama na https://angular.io/docs/ts/latest/guide/typescript-configuration.html

tsconfig.json ćemo kreirati ručno i kopirati sljedeće unutar datoteke:

typings.json ćemo kreirati pomoću naredbe $ typings install dt~core-js dt~jasmine dt~node --save --global, ali da ne bi dobili poruku o grešci typings: command not found prvo pokrenite naredbu $ npm install -g typings.

typings.json sada izgleda ovako:

Vraćamo se opet na package.json kojemu ćemo reći koje skripte da pokrene prilikom startanja projekta.

II.III

Dodat ćemo još jedan modul u projekt tako da možemo istovremeno pokrenuti lite-server koji će u web pregledniku podići projekt i typescript watch koji će pratiti promjene u .ts datotekama i kompajlirati ih u .js kako bi ih web preglednik mogao čitati.

Taj modul se zove concurrently a instaliramo ga pomoću naredbe
$ npm install concurrently --save-dev

Nakon instalacije potrebno je još ubaciti sljedeće u package.json

Aplikaciju od sada pokrećemo naredbom $ npm start.

Struktura projekta sada izgleda ovako:

III – Temelj za Angular 2 i System.js

Do sada smo postavili osnovnu strukturu budućeg starter projekta, dodali podršku za TypeScript i sada je vrijeme da prijeđemo na Angular 2. Ipak, pošto želimo koristiti napredne ES6 mogućnosti koje web preglednici još uvijek ne podržavaju trebaju nam neki dodaci poput Core JS Shim, Zone.js, Reflect Metadata, RxJS i SystemJS kako bi te prepreke zaobišli.

Da ne bi bilo da sam ja to sada izmislio, info o tome se do prije mjesec dana mogla pronaći u službenoj Angular 2 dokumentaciji. A ako bolje pogledate primijetit ćete da se i dalje nalazi u QuickStart seed projektu unutar index.html.

III.I

Potrebne dodatke dodat ćemo istovremeno u projekt pomoću naredbe
$ npm install core-js reflect-metadata zone.js rxjs systemjs --save

I kao što možete vidjeti package.json je postao bogatiji za

III.II

Sada možemo dodati osnovne pakete koje ćemo koristiti u svim budućim Angular 2 projektima, a koje ne bi mogli koristiti bez dodataka iz prethodnog koraka. Znači sada dodajemo sljedeće pakete:

• @angular/core
• @angular/common
• @angular/compiler
• @angular/platform-browser
• @angular/platform-browser-dynamic

Istovremeno ćemo ih dodati u projekt naredbom
$ npm install @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic --save

Osim tih osnovih paketa savjetujem da odmah dodate i sljedeće jer teško je zamisliti bilo kakav ozbiljan Angular 2 projekt bez ovih paketa:

$ npm install @angular/router @angular/http @angular/forms --save

• @angular/router
• @angular/http
• @angular/forms

Promjena se odmah reflektira na package.json:

III.III

Sada nam treba System.js koji će Angular 2 aplikaciji reći gdje se svi ranije instalirati paketi nalaze. Opet, da ne izmišljamo toplu vodu jednostavno ću kopirati sadržaj te datoteke iz QuickStart seed projekta. Inače, i ovo se do prije koji tjedan nalazilo u službenoj Angular 2 dokumentaciji.

U mapi projekta kreiramo systemjs.config.js sa sljedećim sadržajem:

III.IV

Vratimo se na index.html u koji ćemo sada dodati putanje do svega što smo dodali do sada.

Struktura projekta sada izgleda ovako:

IV – Napokon Angular 2

Sve do sada bilo je postavljanje projekta, s sada napokon možemo zaroniti u Angular 2. U mapi projekta kreirati ćemo novu mapu koja će se zvati app. To je mapa s kojom ćemo u budućnosti najviše raditi jer u njoj će se nalaziti sve ono što u konačnici čini Angular 2 aplikaciju.

IV.I

A mapi app kreirati ćemo datoteku app.component.ts te će se automatski kreirati app.component.js i app.component.js. Ako nisu samo pokrenite projekt koristeći $ npm start.

IV.II

Unutar app.component.ts kreirat ćemo prvu komponentu

IV.III

Sadržaj iz gornjeg H1 taga još uvijek se ne vidi na početnoj stranici projekta. Da bi se vidio potrebno je kreirati app.module.ts koji služi kao centralno mjesto za sve Angular 2 komponente koje onda možemo koristiti kroz cijelu aplikaciju.

IV.IV

I sada još to trebamo povezati sa ostatkom aplikacije. To ćemo napraviti tako da kreiramo main.ts

IV.V

I konačno. Sada možemo prikazati sadržaj komponente na početnoj stranici aplikacije, a to činimo dodavanjem selektora selector: 'my-app' komponente AppComponent u index.html

Aplikacija sada izgleda ovako:

Trenutna struktura projekta:

I to bi bilo to što se tiče postavljanja starter Angular 2 projekta. Imate sve što vam treba za sve buduće projekte i ne morate ovaj postupak ponovo prolaziti. Ipak, idemo još samo za kraj to malo uljepšati.

IV.VI

S obzirom da nam je prilikom rada na projektu najbitnija mapa app za kraj ćemo se fokusirati na nju i datoteke u njoj. Vjerujem da ste do sada već shvatili da su nam najbitnije .ts datoteke koje se automatski kompajliraju u js. i s obzirom da ćemo samo na njima raditi nema potrebe da nam i kompajlirane .js datoteke bezveze stoje u istoj mapi i smo prave gužvu. Zato ćemo sada napraviti da se kompajlirane .js datoteke automatski spremaju u dist mapu koju ćemo sada kreirati.

To ćemo postići tako da tsconfig.json pod "compilerOptions" dodamo "outDir": "dist" .

I zadnja stvar koju moramo napraviti kako bi dist mapa imala svoju svrhu je promijeniti 'app':'dist', u 'app': 'dist', unutar systemjs.config.js tako da web preglednik zna iz koje mape će čitati datoteke za prikaz aplikacije.

I konačna struktura projekta izgleda ovako:

Zaključak

I to je sve! Imate spreman starter Angular 2 + TypeScript projekt. Jednom kada ste ovo napravili spremite projekt na sigurno i koristite prilikom izrade svake sljedeće Angular 2 aplikacije kako bi si ubrzali posao. Naravno, možete dodati ili oduzeti NPM module po želji ovisno o tome što sve želite imati u osnovi svake sljedeće Angular 2 aplikacije.

Rekao sam na početku da ću spomenuti brži način za stvaranje starter projekta, a to je koristeći Angular-CLI koji za vas kreira čitav projekt spreman za korištenje kroz samo nekoliko sekundi. Ipak, korisno je ovako rastrančirati strukturu čisto da se bolje razumije od čega se uopće i zašto projekt sastoji.

Koristite li Angular 2 i TypeScript? Kakva su dosadašnja iskustva?