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:

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

$ npm install -g typescript

Kreiranje Angular projekta

Novi se projekt kreira naredbom:

$ ng new naziv-projekta

Angular CLI novi projekt

Struktura projekta izgleda ovako:

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

$ ng serve

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

$ ng serve --host 192.168.1.11 --port 4202

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

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

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ć

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

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