Uvod u Angular CLI

Uvod u Angular CLI

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:

I to je sve! Spremni ste za kreiranje prvog Angular projekta koristeći CLI.

P.S.2 Preporuka je da odmah instalirate i TypeScript. Typescript je superset od JavaScripta i koristite ga u kombinaciji sa Angularom.

Kreiranje Angular projekta

Novi se projekt kreira naredbom:

Angular CLI novi projekt

Struktura projekta izgleda ovako:

Pokretanje projekta

Projekt možete pokrenuti koristeći naredbu:

Projekt možete otvoriti u web pregledniku na adresi http://localhost:4200

Angular Demo CLI projekt localhost

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.:

https://192.168.1.11: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

što vam omogućava kreiranje drugih gradivnih elemenata potrebnih za razvoj cjelovite Angular aplikacije.

Koristeći ng generate možete kreirati:

  • Componentng g component my-new-component
  • Directiveng g directive my-new-directive
  • Pipeng g pipe my-new-pipe
  • Serviceng g service my-new-service
  • Classng g class my-new-class
  • Guardng g guard my-new-guard
  • Interfaceng g interface my-new-interface
  • Enumng g enum my-new-enum
  • Moduleng 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

Angular CLI: 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.

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *

Ova web-stranica koristi Akismet za zaštitu protiv spama. Saznajte kako se obrađuju podaci komentara.