Kada želite razvijati aplikacije koristeći Angular imate tri mogućnosti, kreirati projekt ručno, preuzeti predložak projekta ili koristiti Angular CLI.
Prva opcija je spora i nema potrebe započinjati svaki novi projekt na taj način, iako je korisno barem jednom proći kroz taj postupak čisto iz razloga da se bolje upoznate s dijelovima od kojih se sastoji jedan Angular projekt. Druga opcija je automatizirana verzija prve opcije i vrlo brzo imate spremnu početnu strukturu Angular projekta. Treća opcija je koristeći Angular CLI i to je definitivno najbolja i najbrža opcija jer osim kreiranja Angular projekta nudi još puno toga, više o tome u nastavku.
Angular CLI – postavljanje
P.S. Kako bi mogli postaviti Angular CLI potrebno je prvo instalirati Node >= 6.9.0 i NPM >= 3.
Angular CLI instalira se jednostavnom naredbom:
1 |
$ npm install -g @angular/cli |
I to je sve! Spremni ste za kreiranje prvog Angular projekta koristeći CLI.
P.S.2 Preporuka je da odmah instalirate i TypeScript.
1 |
$ npm install -g typescript |
Kreiranje Angular projekta
Novi se projekt kreira naredbom:
1 |
$ ng new naziv-projekta |
Struktura projekta izgleda ovako:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// end-to-end-testovi |- e2e/ |----- app.e2e-spec.ts |----- app.po.ts |----- tsconfig.e2e.json // npm paketi |- node_modules/ // javna verzija aplikacije. Ova će se mapa kreirati tek nakon pokretanja ng build |- dist/ // ovdje ćete najviše vremena provesti prilikom razvoja aplikacije |- src/ |----- app/ |----- app.component.css|html|spec.ts|ts |----- app.module.ts |----- assets/ |----- environments/ |----- environment.prod.ts|ts |----- favicon.ico |----- index.html |----- main.ts |----- polyfills.ts |----- styles.css |----- test.ts |----- tsconfig.app.json |----- tsconfig.spec.json |----- typings.d.ts // overall configuration |- .angular-cli.json // glavna konfiguracijska datoteka |- .editorconfig // ako koristite VS Code |- .gitignore |- karma.conf.js |- package.json |- protractor.conf.js |- README.md |- tsconfig.json |- tslint.json |
Pokretanje projekta
Projekt možete pokrenuti koristeći naredbu:
1 |
$ ng serve |
Projekt možete otvoriti u web pregledniku na adresi http://localhost:4200
Ako želite da projekt za vrijeme razvoja mogu vidjeti i drugi korisnici u vašoj lokalnoj mreži pokrenite ga naredbom u kojoj navodite IP adresu vašeg računala npr.:
1 |
$ ng serve --host 192.168.1.11 --port 4202 |
U ovom slučaju projekt se nalazi na adresi http://192.168.1.11:4202
Kreiranje dijelova aplikacije
Sve do sada je bilo samo uvod u najveću snagu koju Angular CLI ima, a to je
1 |
ng generate |
što vam omogućava kreiranje drugih gradivnih elemenata potrebnih za razvoj cjelovite Angular aplikacije.
Koristeći ng generate možete kreirati:
- Component – ng g component my-new-component
- Directive – ng g directive my-new-directive
- Pipe – ng g pipe my-new-pipe
- Service – ng g service my-new-service
- Class – ng g class my-new-class
- Guard – ng g guard my-new-guard
- Interface – ng g interface my-new-interface
- Enum – ng g enum my-new-enum
- Module – ng g module my-new-module
Prilikom kreiranja elemenata kao što su component, directive ili pipe referenca na novi element će se automatski dodati u datoteku app.module.ts.
Verzija aplikacije za produkciju
Kada ste spremni vašu Angular aplikaciju pustiti u produkciju dovoljno je pokrenuti naredbu:
$ ng build tj. $ ng build --prod
U ovom se koraku kreira ranije spomenuta dist mapa u kojoj se nalazi produkcijska verzija vaše Angular aplikacije.
Zaključak
Angular CLI je svakim danom sve popularniji. Iz ranije viđenog nije teško zaključiti zašto je to tako.