{"id":6212,"date":"2017-10-15T21:48:47","date_gmt":"2017-10-15T19:48:47","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=6212"},"modified":"2019-01-23T18:54:54","modified_gmt":"2019-01-23T16:54:54","slug":"uvod-angular-cli","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/uvod-angular-cli\/","title":{"rendered":"Uvod u Angular CLI"},"content":{"rendered":"

Kada \u017eelite razvijati aplikacije koriste\u0107i Angular<\/em> imate tri mogu\u0107nosti, kreirati projekt ru\u010dno<\/a>, preuzeti predlo\u017eak projekta<\/a> ili koristiti Angular CLI<\/a><\/strong>. <\/p>\n

Prva opcija je spora i nema potrebe zapo\u010dinjati svaki novi projekt na taj na\u010din, iako je korisno barem jednom pro\u0107i kroz taj postupak \u010disto iz razloga da se bolje upoznate s dijelovima od kojih se sastoji jedan Angular<\/em> projekt. Druga opcija je automatizirana verzija prve opcije i vrlo brzo imate spremnu po\u010detnu strukturu Angular<\/em> projekta. Tre\u0107a opcija je koriste\u0107i Angular CLI i to je definitivno najbolja i najbr\u017ea opcija jer osim kreiranja Angular<\/em> projekta nudi jo\u0161 puno toga, vi\u0161e o tome u nastavku.<\/p>\n

Angular CLI<\/em> – postavljanje<\/h2>\n

P.S. Kako bi mogli postaviti Angular CLI<\/em> potrebno je prvo instalirati Node<\/em><\/strong> >= 6.9.0 i NPM<\/em><\/strong> >= 3<\/a>.<\/p>\n

Angular CLI<\/em> instalira se jednostavnom naredbom:<\/p>\n

$ npm install -g @angular\/cli<\/pre>\n
I to je sve! Spremni ste za kreiranje prvog Angular<\/em> projekta koriste\u0107i CLI<\/em>. <\/p>\n
P.S.2 Preporuka je da odmah instalirate i TypeScript<\/a><\/em>.<\/p>\n
$ npm install -g typescript<\/pre>\n
Kreiranje Angular<\/em> projekta<\/h2>\n
Novi se projekt kreira naredbom:<\/p>\n
$ ng new naziv-projekta<\/pre>\n
\"Angular<\/a><\/p>\n
Struktura projekta izgleda ovako:<\/p>\n
\/\/ end-to-end-testovi\r\n|- e2e\/\r\n  |----- app.e2e-spec.ts\r\n  |----- app.po.ts\r\n  |----- tsconfig.e2e.json\r\n\r\n\/\/ npm paketi\r\n|- node_modules\/\r\n\r\n\/\/ javna verzija aplikacije. Ova \u0107e se mapa kreirati tek nakon pokretanja ng build\r\n|- dist\/\r\n\r\n\/\/ ovdje \u0107ete najvi\u0161e vremena provesti prilikom razvoja aplikacije\r\n|- src\/\r\n  |----- app\/\r\n      |----- app.component.css|html|spec.ts|ts\r\n      |----- app.module.ts\r\n  |----- assets\/\r\n  |----- environments\/\r\n      |----- environment.prod.ts|ts\r\n  |----- favicon.ico\r\n  |----- index.html\r\n  |----- main.ts\r\n  |----- polyfills.ts\r\n  |----- styles.css\r\n  |----- test.ts\r\n  |----- tsconfig.app.json\r\n  |----- tsconfig.spec.json\r\n  |----- typings.d.ts\r\n\r\n\/\/ overall configuration\r\n|- .angular-cli.json  \/\/ glavna konfiguracijska datoteka\r\n|- .editorconfig      \/\/ ako koristite VS Code\r\n|- .gitignore\r\n|- karma.conf.js\r\n|- package.json\r\n|- protractor.conf.js\r\n|- README.md\r\n|- tsconfig.json\r\n|- tslint.json<\/pre>\n
Pokretanje projekta<\/h2>\n
Projekt mo\u017eete pokrenuti koriste\u0107i naredbu:<\/p>\n
$ ng serve<\/pre>\n
Projekt mo\u017eete otvoriti u web pregledniku na adresi http:\/\/localhost:4200<\/a><\/p>\n
\"Angular<\/a><\/p>\n
Ako \u017eelite da projekt za vrijeme razvoja mogu vidjeti i drugi korisnici u va\u0161oj lokalnoj mre\u017ei pokrenite ga naredbom u kojoj navodite IP adresu va\u0161eg ra\u010dunala npr.:<\/p>\n
$ ng serve --host 192.168.1.11 --port 4202<\/pre>\n
\"https:\/\/192.168.1.11:4202\"<\/a><\/p>\n
U ovom slu\u010daju projekt se nalazi na adresi http:\/\/192.168.1.11:4202<\/a><\/p>\n
Kreiranje dijelova aplikacije<\/h2>\n
Sve do sada je bilo samo uvod u najve\u0107u snagu koju Angular CLI<\/em> ima, a to je <\/p>\n
ng generate<\/pre>\n
 \u0161to vam omogu\u0107ava kreiranje drugih gradivnih elemenata potrebnih za razvoj cjelovite Angular<\/em> aplikacije.<\/p>\n
Koriste\u0107i <\/p>\n
ng generate<\/pre>\n
 mo\u017eete kreirati: <\/p>\n