{"id":4487,"date":"2016-12-31T16:47:33","date_gmt":"2016-12-31T14:47:33","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=4487"},"modified":"2019-01-05T19:58:36","modified_gmt":"2019-01-05T17:58:36","slug":"postavljanje-angular2-typescript-projekta","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/postavljanje-angular2-typescript-projekta\/","title":{"rendered":"Postavljanje Angular 2 + TypeScript projekta"},"content":{"rendered":"

U ovom blog postu pro\u0107i \u0107u kroz proces postavljanja Angular 2<\/em> projekta od nule. Za\u0161to od nule? Zato \u0161to mislim da je va\u017eno da prilikom postavljanja novog projekta znate za\u0161to ste ne\u0161to koristili unato\u010d \u010dinjenici da postoje automatski generatori koji \u0107e cijeli projekt postaviti za vas. <\/p>\n

Naravno, postoji i jednostavniji na\u010din koji \u0107u spomenuti na kraju blog posta, a mo\u017eda i napi\u0161em poseban blog post o tome ako netko izrazi \u017eelju u komentarima.<\/p>\n

Cilj ovog blog posta:
\n– Kreirati osnovnu strukturu tj. osnovne datoteke
\n– Dodati podr\u0161ku za TypeScript<\/em>
\n– Postaviti temelj za Angular 2<\/em> i dodati System.js<\/em>
\n– I kona\u010dno, po\u010deti koristiti Angular 2<\/em><\/p>\n

I – Osnovna struktura<\/h2>\n

Zapo\u010det \u0107emo s kreiranjem mape Angular2-starter-projekt<\/strong>. <\/p>\n

I.I<\/p>\n

Unutar mape kreirat \u0107emo index.html<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html lang=\"hr\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Angular 2 - starter projekt<\/title>\r\n  <!-- CSS -->\r\n  <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\">\r\n  <!-- JS -->\r\n \r\n<\/head>\r\n\r\n<body>\r\n   Angular 2 sadr\u017eaj.\r\n<\/body>\r\n<\/html><\/pre>\n
I.II<\/p>\n
i package.json<\/strong> pomo\u0107u naredbe  npm init –yes<\/span>.  \u0160to je  $ npm init<\/span>  i \u010demu slu\u017ei  –yes<\/span>?<\/a><\/p>\n
{\r\n  \"name\": \"Angular2-starter-projekt\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"scripts\": {\r\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n  },\r\n  \"keywords\": [],\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\"\r\n}<\/pre>\n
Ve\u0107 sada mo\u017eemo otvoriti index.html<\/strong> u web pregledniku i vidjeti “Angular 2 sadr\u017eaj”. Za sada je to samo obi\u010dna HTML datoteka koju je potrebno osvje\u017eiti (F5) u web pregledniku prilikom svake promjene kako bi se one prikazale i daleko je od Angular 2<\/em> aplikacije koju \u017eelimo napraviti.<\/p>\n
I.III<\/p>\n
Da bi to promijenili dodat \u0107emo lite-server<\/a>, prema preporuci angular.io resursa<\/a>, koji \u0107e slu\u017eiti za pokretanje aplikacije, automatsko otvaranje u web pregledniku i automatsko osvje\u017eavanje prilikom promjena u datotekama.<\/p>\n
Lite-server<\/strong> dodajemo pomo\u0107u naredbe  $ npm install lite-server –save-dev<\/span>. <\/p>\n
\"NPM<\/a><\/p>\n
Nakon instalacije mo\u017eemo primijetiti dvije stvari, a to su node_modules<\/strong> mapa, u kojoj \u0107e se nalaziti svi budu\u0107i NPM<\/em> paketi, i promjena unutar package.json<\/strong> u kojemu se sada nalazi i informacija da na\u0161 projekt koristi lite-server.<\/p>\n
\"devDependencies\": {\r\n    \"lite-server\": \"^2.2.2\"\r\n  }<\/pre>\n
Ako sada poku\u0161ate pokrenuti naredbu $ npm run lite<\/span> dobit \u0107ete poruku o gre\u0161ci  npm ERR! missing script: lite<\/span>  jer vam nedostaje jo\u0161 samo jedna sitnica unutar package.json<\/strong> koji sada treba izgledati ovako:<\/p>\n
{\r\n  \"name\": \"Angular2-starter-projekt\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"scripts\": {\r\n    \"lite\": \"lite-server\"\r\n  },\r\n  \"keywords\": [],\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\",\r\n  \"devDependencies\": {\r\n    \"lite-server\": \"^2.2.2\"\r\n  }\r\n}<\/pre>\n
Projekt od sada pokre\u0107emo naredbom  $ npm run lite<\/span>  te \u0107e se on automatski otvoriti u zadanom web pregledniku i osvje\u017eavati prilikom svake promjene.<\/p>\n
\"NPM<\/a><\/p>\n
Trenutni izgled aplikacije<\/p>\n
\"Angular2<\/p>\n
Struktura projekta sada izgleda ovako:<\/p>\n
| - Angular2-starter-projekt\/\r\n     | - node_modules\/\r\n          | - .bin\/\r\n          | - lite-server\/\r\n     | - index.html\r\n     | - package.json<\/pre>\n
II – TypeScript<\/h2>\n
TypeScript<\/em> je superset JavaScripta<\/em> i kada govorimo o Angular 2<\/em> projektima gotovo je nemogu\u0107e prona\u0107i primjer gdje se TypeScript<\/em> barem ne spominje kao opcija. Uglavnom, uz TypeScript<\/em> dolazi puno prednosti<\/a> o kojima mo\u017eete ne\u0161to vi\u0161e saznati na https:\/\/www.typescriptlang.org\/<\/a>. <\/p>\n
\"angular.io Angular 2<\/em> projekte mo\u017eete raditi i koriste\u0107i \u010disti JavaScript<\/em>. Prilikom prou\u010davanja dokumentacije na angular.io<\/a> u donjem lijevom uglu mo\u017eete odabrati koju vrstu dokumentacije \u017eelite vidjeti. Dokaz koliko Angular<\/em> gura TypeScript<\/em> je i taj \u0161to ako odaberete JavaScript<\/em> u najve\u0107em broju slu\u010dajeva umjesto dokumentacije mo\u017eete vidjeti poruku “This page is not yet available in JavaScript. We recommend reading it in TypeScript<\/a>.<\/em>“.<\/p>\n
II.I<\/p>\n
No, vratimo se ovom projektu. Prije svega, trebamo dodati TypeScript<\/strong><\/a> i Typings<\/strong><\/a> u projekt. <\/p>\n
TypeScript<\/em> slu\u017ei kao prevoditelj ES6<\/em> u ES5<\/em><\/a> tj. JavaScript<\/em> koji \u0107e web preglednik mo\u0107i razumjeti, a Typings<\/em> je alat koji omogu\u0107ava dodavanje pro\u0161irenja<\/a> za TypeScript<\/em>.<\/p>\n
\"NPM<\/a><\/p>\n
Oboje ih mo\u017eemo istovremeno dodati u projekt naredbom
\n$ npm install –save-dev typescript typings<\/span>.<\/p>\n
Promjena se odmah reflektira na package.json<\/strong> koji sada izgleda malo druga\u010dije:<\/p>\n
{\r\n  \"name\": \"Angular2-starter-projekt\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"scripts\": {\r\n    \"lite\": \"lite-server\"\r\n  },\r\n  \"keywords\": [],\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\",\r\n  \"devDependencies\": {\r\n    \"lite-server\": \"^2.2.2\",\r\n    \"typescript\": \"^2.1.4\",\r\n    \"typings\": \"^2.1.0\"\r\n  }\r\n}<\/pre>\n
II.II<\/p>\n
Sada mo\u017eemo kreirati tsconfig.json<\/strong> i typings.json<\/strong> prema uputama na https:\/\/angular.io\/docs\/ts\/latest\/guide\/typescript-configuration.html<\/a><\/p>\n
tsconfig.json<\/a><\/strong> \u0107emo kreirati ru\u010dno i kopirati sljede\u0107e unutar datoteke:<\/p>\n
{\r\n  \"compilerOptions\": {\r\n    \"target\": \"es5\",\r\n    \"module\": \"commonjs\",\r\n    \"moduleResolution\": \"node\",\r\n    \"sourceMap\": true,\r\n    \"emitDecoratorMetadata\": true,\r\n    \"experimentalDecorators\": true,\r\n    \"removeComments\": false,\r\n    \"noImplicitAny\": false\r\n   }\r\n}<\/pre>\n
typings.json<\/strong> \u0107emo kreirati pomo\u0107u naredbe  $ typings install dt~core-js dt~jasmine dt~node –save –global<\/span>, ali da ne bi dobili poruku o gre\u0161ci  typings: command not found<\/span> prvo pokrenite naredbu  $ npm install -g typings<\/span>.<\/p>\n
typings.json sada izgleda ovako:<\/p>\n
{\r\n  \"globalDependencies\": {\r\n    \"core-js\": \"registry:dt\/core-js#0.9.7+20161130133742\",\r\n    \"jasmine\": \"registry:dt\/jasmine#2.5.0+20161228223817\",\r\n    \"node\": \"registry:dt\/node#6.0.0+20161229171858\"\r\n  }\r\n}<\/pre>\n
Vra\u0107amo se opet na package.json<\/strong> kojemu \u0107emo re\u0107i koje skripte da pokrene prilikom startanja projekta.<\/p>\n
{\r\n  \"name\": \"Angular2-starter-projekt\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"scripts\": {\r\n    \"lite\": \"lite-server\",\r\n    \"tsc\": \"tsc\",\r\n    \"tsc:w\": \"tsc -w\",\r\n    \"typings\": \"typings\",\r\n    \"postinstall\": \"typings install\"\r\n  },\r\n  \"keywords\": [],\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\",\r\n  \"devDependencies\": {\r\n    \"lite-server\": \"^2.2.2\",\r\n    \"typescript\": \"^2.1.4\",\r\n    \"typings\": \"^2.1.0\"\r\n  }\r\n}<\/pre>\n
II.III<\/p>\n
Dodat \u0107emo jo\u0161 jedan modul u projekt tako da mo\u017eemo istovremeno pokrenuti<\/a> lite-server<\/strong> koji \u0107e u web pregledniku podi\u0107i projekt i typescript watch<\/strong> koji \u0107e pratiti promjene u .ts datotekama i kompajlirati ih u .js kako bi ih web preglednik mogao \u010ditati.<\/p>\n
Taj modul se zove concurrently<\/a><\/strong> a instaliramo ga pomo\u0107u naredbe
\n$ npm install concurrently –save-dev<\/span> <\/p>\n
\"NPM:<\/a><\/p>\n
Nakon instalacije potrebno je jo\u0161 ubaciti sljede\u0107e u package.json<\/strong><\/p>\n
\"scripts\": {\r\n    \"start\": \"tsc && concurrently \\\"npm run tsc:w\\\" \\\"npm run lite\\\"\",\r\n    \"lite\": \"lite-server\",\r\n    \"tsc\": \"tsc\",\r\n    \"tsc:w\": \"tsc -w\",\r\n    \"typings\": \"typings\",\r\n    \"postinstall\": \"typings install\"\r\n  },<\/pre>\n
Aplikaciju od sada pokre\u0107emo naredbom  $ npm start<\/span>.<\/p>\n
Struktura projekta sada izgleda ovako:<\/p>\n
| - Angular2-starter-projekt\/\r\n     | - node_modules\/\r\n          | - .bin\/\r\n          | - concurrently\/\r\n          | - lite-server\/\r\n          | - typescript\/\r\n          | - typings\/\r\n     | - index.html\r\n     | - package.json\r\n     | - tsconfig.json\r\n     | - typings.json <\/pre>\n
III – Temelj za Angular 2 i System.js<\/h2>\n
Do sada smo postavili osnovnu strukturu budu\u0107eg starter projekta, dodali podr\u0161ku za TypeScript<\/em> i sada je vrijeme da prije\u0111emo na Angular 2<\/em>. Ipak, po\u0161to \u017eelimo koristiti napredne ES6<\/em> mogu\u0107nosti koje web preglednici jo\u0161 uvijek ne podr\u017eavaju trebaju nam neki dodaci poput Core JS Shim<\/a>, Zone.js<\/a>, Reflect Metadata<\/a>, RxJS<\/a> i SystemJS kako bi te prepreke zaobi\u0161li. <\/p>\n
\"Angular2<\/a>Da ne bi bilo da sam ja to sada izmislio, info o tome se do prije mjesec dana mogla prona\u0107i u slu\u017ebenoj Angular 2 dokumentaciji<\/a>. A ako bolje pogledate primijetit \u0107ete da se i dalje nalazi u QuickStart seed<\/em> projektu unutar index.html<\/a>.<\/p>\n
III.I<\/p>\n
Potrebne dodatke dodat \u0107emo istovremeno u projekt pomo\u0107u naredbe
\n$ npm install core-js reflect-metadata zone.js rxjs systemjs –save<\/span> <\/p>\n
I kao \u0161to mo\u017eete vidjeti package.json<\/strong> je postao bogatiji za <\/p>\n
 \"dependencies\": {\r\n    \"core-js\": \"^2.4.1\",\r\n    \"reflect-metadata\": \"^0.1.9\",\r\n    \"rxjs\": \"^5.0.2\",\r\n    \"systemjs\": \"^0.19.41\",\r\n    \"zone.js\": \"^0.7.4\"\r\n  }<\/pre>\n
III.II<\/p>\n
Sada mo\u017eemo dodati osnovne pakete koje \u0107emo koristiti u svim budu\u0107im Angular 2<\/em> projektima, a koje ne bi mogli koristiti bez dodataka iz prethodnog koraka. Zna\u010di sada dodajemo sljede\u0107e pakete:<\/p>\n