Objašnjeno kutno sučelje naredbenog retka

Programiranje

Angular je usko povezan sa svojim sučeljem naredbenog retka (CLI). CLI usmjerava generiranje datotečnog sustava Angular. Bavi se većinom konfiguracije iza kulisa kako bi programeri mogli započeti s kodiranjem. CLI također ima nisku krivulju učenja koja se preporučuje svakom novopridošlom koji želi uskočiti. Dovraga, čak i iskusni Angular programeri oslanjaju se na CLI!

Montaža

Angularni CLI zahtijeva Node.js i Node Packet Manager (NPM). Možete provjeriti za ove programe s terminala naredbe: node -v; npm -v. Jednom instaliran, otvorite terminal i postavite kutni CLI s ovom naredbom: npm install -g @angular/cli. To se može izvršiti s bilo kojeg mjesta u vašem sustavu. CLI je konfiguriran za globalnu upotrebu s -goznakom.

Provjerite CLI je tamo s naredbom: ng -v. Ovo daje nekoliko redaka informacija. Jedan od ovih redaka navodi verziju instaliranog CLI-ja.

Prepoznajte da ngje to temeljni blok CLI-a. Sve vaše naredbe započet će ng. Vrijeme je da pogledamo četiri najčešće naredbe s prefiksom ng.

Ključne naredbe

  • ng novo
  • ng poslužiti
  • ng generirati
  • ng graditi
  • ng ažuriranje

Ključni pojmovi za svaki od njih prilično su poučni. Zajedno čine ono što će vam trebati da udarite u tlo radeći s Angulom. Naravno, ima ih još puno. Sve su naredbe navedene u CLI-jevoj GitHub dokumentaciji1. Vjerojatno ćete otkriti da će gore navedene naredbe pokriti potrebne osnove.

ng novo

ng newstvara novi sustav datoteka Angular. Ovo je nadrealni proces. Pomaknite se do mjesta datoteke poželjnog za novo generiranje aplikacija. Unesite ovu naredbu kao što slijedi, zamjenjujući [name-of-app]sa što god želite: ng new [name-of-app].

[name-of-app]Trebao bi se pojaviti datotečni sustav ispod mape . Slobodno istražite što se nalazi u vama. Pokušajte još ne mijenjati. Sve što vam treba za pokretanje vaše prve aplikacije Angular dolazi upakirano u ovaj generirani sustav datoteka.

ng poslužiti

Da bi se aplikacija pokrenula, ng servenaredba se mora izvršiti unutar [name-of-app]mape. Bilo gdje unutar mape će učiniti. Kutni CLI mora prepoznati da se nalazi u okruženju generiranom s ng new. Izvršit će se pod uvjetom da je to jedan uvjet. Idi naprijed i pokušajte ga: ng serve.

Aplikacija se prema zadanim postavkama izvodi na portu 4200. Aplikaciju Angular možete pregledati localhost:4200u bilo kojem web pregledniku. Angular radi u svim preglednicima. Ako ne upotrebljavate staru verziju Internet Explorera, program će se pojaviti. Prikazuje službeni logotip Angular uz popis korisnih poveznica.

Ok, aplikacija se pokreće. Nadamo se da funkcionira, ali morate znati što se događa ispod haube. Vratite se na [name-of-app]datotečni sustav. Navigacija [name-of-app] -> src -> app. U tome su datoteke odgovorne za ono što ste vidjeli localhost:4200.

ng generirati

Na .componentdatoteke definirati kutnog dijela uključujući i njegovu logiku ( .ts), stil ( .css), izgled ( .html) i testiranje ( .spec.ts). app.module.tsPosebno ističe. Ove dvije skupine datoteka zajedno djeluju kao componenti module. Oba componenti moduledva su odvojena primjera kutnih shema. Sheme klasificiraju različite blokove koda koji se generiraju pomoću ng generate.

Za potrebe ovog članka shvatite da se moduleizvozi i uvoze sredstva u i iz temeljnog stabla komponenata. componentSe odnosi s jednog dijela korisničkog sučelja. Logika, stil, izgled i testiranje te jedinice ostaju zatvoreni u različitim .componentdatotekama.

Što se tiče ng generate, ova naredba može generirati kosture za svaku od dostupnih kutnih shema2. Dođite do [name-of-app -> src -> app]. Pokušaj stvaranja nove componentizvršavajući: ng generate component [name-of-component]. Zamijenite [name-of-component]onim što biste željeli. Pojavit će se nova datoteka [name-of-component]sa potrebnim componentdatotekama.

Možete vidjeti da ng generateubrzava Angular-ov standardni obrazac. ng generatetakođer ožiči stvari. Sheme stvorene u kontekstu Angularnog datotečnog sustava povezuju se s korijenskim modulom sustava. U ovom bi slučaju to bila app.module.tsdatoteka [name-of-app -> src -> app].

ng graditi

Kutni je prednji alat. CLI obavlja svoje operacije u ime prednjeg dijela. ng servebrine o postavci stražnjeg poslužitelja. To zadržava razvoj u potpunosti usredotočen na prednji kraj. Međutim, povezivanje vlastitog stražnjeg dijela s aplikacijom Angular također mora biti moguće.

ng buildispunjava ovu potrebu. Prije isprobavanja unutar datotečnog sustava. Dođite do [name-of-app] -> angular.json. Potražite ovu jednu liniju koda: "outputPath": "dist/my-app".

Ovaj jedan red konfiguracije određuje gdje će ng buildodlagati svoje rezultate. Rezultati su cijela Angular aplikacija sastavljena u jednu mapu dist/my-app. Unutar te mape postoji index.html. Čitava aplikacija Angular može se pokretati s index.html. Ne ng servetreba odavde. Pomoću ove datoteke možete lako povezati stražnji kraj.

Dati ga ići: ng build. Opet, ovo se mora izvršiti u datotečnom sustavu Angular. Na temelju ključne vrijednosti “outputPath:”u angular.json. Generirat će se datoteka u kojoj je izvorni program u potpunosti sastavljen. Ako je zadržao “outputPath:”isti, sastavio program će biti u: [name-of-app] -> dist -> [name-of-app].

ng ažuriranje

U kutnom ažuriranju klijenta napravite automatsko ažuriranje svih angularnih i npm paketa na najnovije verzije.

Evo sintakse i opcija s kojima se mogu koristiti ng update.

ng update [package]

Opcije

  • testno pokretanje --dry-run (alias: -d)

    Prođite bez ikakvih promjena.

  • sila --force

    Ako je false, ispast će pogreška ako su instalirani paketi nekompatibilni s ažuriranjem.

  • svi --all

    Treba li ažurirati sve pakete u paketu.json.

  • Sljedeći --next

    Koristite najveću verziju, uključujući beta i RC-ove.

  • samo za migraciju --migrate-only

    Izvršite samo migraciju, ne ažurira instaliranu verziju.

  • iz --from

    Verzija s koje se migrira. Dostupno samo s jednim paketom koji se ažurira i samo za migraciju.

  • do --to

    Verzija do koje će se primijeniti migracije. Dostupno samo s jednim paketom koji se ažurira i samo za migracije. Zahtijeva od da se navede. Otkrivena je zadana vrijednost instalirane verzije.

  • registar --registry

    NPM registar za upotrebu.

Ove naredbe pokrivaju osnove. Angular-ov CLI nevjerojatna je pogodnost koja ubrzava generiranje, konfiguraciju i proširenje aplikacija. Sve to čini zadržavajući fleksibilnost, omogućavajući programeru da uvede potrebne promjene.

Molimo provjerite te linkove localhost:4200ako već niste. Ne zaboravite trčati ng serveprije nego što ga otvorite. S boljim razumijevanjem CLI-ja, sada ste spremni naučiti više o tome što generiraju njegove najvažnije naredbe.

Više informacija:

  • Najbolji kutni primjeri
  • Najbolji vodiči za Angular i AngularJS
  • Kako potvrditi kutne reaktivne forme