Započnite s Angular: Vodič za InfoWorld

Angular, nasljednik AngularJS-a, razvojna je platforma za izgradnju mobilnih i stolnih aplikacija koristeći TypeScript i / ili JavaScript i druge jezike. Angular je popularan za izradu internetskih stranica velike količine i podržava web, mobilne web, izvorne mobilne i matične stolne programe.

Jezgrov razvojni tim podijeljen je između Googleovih zaposlenika i robusne zajednice; ne odlazi uskoro. Uz vlastite opsežne mogućnosti, Angular platforma ima snažni vanjski ekosustav: nekoliko istaknutih IDE-a podržava Angular, ima četiri knjižnice podataka, postoji pola tuceta korisnih alata i preko desetak kompleta korisničkog sučelja, a postoje i deseci Kutne knjige i tečajevi. 2015. godine, kada mi je AngularJS dodijeljena nagrada Bossie, objasnio sam da se radi o modelu AJAX framework (MVW) koji proširuje HTML s oznakama za dinamičke preglede i dvosmjerno vezivanje podataka. Angular je posebno dobar za razvoj web aplikacija na jednoj stranici i povezivanje HTML obrazaca s modelima i JavaScript kontrolerima. Novi Angular napisan je TypeScriptom, a ne JavaScriptom, što ima brojne prednosti, kao što ću objasniti.

Čudno zvučeći obrazac "model-view-whatever" pokušaj je uključiti uzorke model-view-control (MVC), model-view-view-model (MVVM) i model-view-prezentator (MVP) pod jedan nadimak. Razlike između ova tri usko povezana obrasca su vrste stvari oko kojih se programeri vole žestoko prepirati; programeri Angular odlučili su odustati od rasprave.

U osnovi, Angular automatski sinkronizira podatke s vašeg korisničkog sučelja (pogledi u AngularJS i predlošci u Angulu 2 i novije) s vašim JavaScript objektima (modelom) putem dvosmjernog vezivanja podataka. Kako bi vam pomogao da bolje strukturirate svoju aplikaciju i olakšate testiranje, Angular podučava preglednik kako raditi injekciju ovisnosti i inverziju kontrole. Novi Angular (verzija 2 i novija) zamjenjuje poglede i kontrolere komponentama i usvaja standardne konvencije, što olakšava razumijevanje i omogućuje programerima da se koncentriraju na razvoj ECMAScript 6 modula i klasa. Drugim riječima, Angular 2 je potpuno prepisivanje AngularJS-a koji pokušava implementirati iste ideje na bolji način. Predlošci kutnog prikaza, koji imaju prilično jednostavnu sintaksu, sastavljeni su u JavaScript koji je dobro optimiziran za suvremene JavaScript motore.Novi usmjerivač komponenata u programu Angular 2 može podijeliti kod (lijeno učitavanje) kako bi smanjio količinu koda isporučenog za generiranje prikaza.

preuzimanje Započnite s radom Angular Preuzmite ovaj tutorial za Angular u prikladnom PDF formatu

Zašto kutni? A kada to nije dobar izbor?

Odabir JavaScript okvira za web aplikaciju vrsta je koja pokreće vjerske ratove među programerima. Nisam ovdje da progonim Angular, ali želim da znate njegove prednosti i nedostatke. U idealnom slučaju, trebali biste odabrati okvir koji odgovara vašoj aplikaciji, uzimajući u obzir vještine u vašoj organizaciji i okvire koje koristite u drugim aplikacijama. Općenito, Angular ima dobar alat i pogodan je za stvarno velike projekte s velikim prometom. Angular je, kao cjelovito prepisivanje iz AngularJS, dizajniran od temelja za upotrebu na mobilnim uređajima i za visoke performanse. Kao i njegov prethodnik, i on obavezivanje podataka čini lako i dobro.

Angular koristi obrazac web-komponente, ali ne i web-komponente same po sebi. Nije Polymer taj koji stvara stvarne web komponente, iako polimerne web komponente možete koristiti u kutnim aplikacijama ako želite. Angular koristi inverziju upravljanja (IoC) i obrasce ubrizgavanja ovisnosti (DI) i rješava neke probleme s njihovom implementacijom AngularJS.

Angular koristi smjernice i komponente koje kombiniraju logiku s HTML oznakama. Jedna škola mišljenja kaže da je miješanje logike i izlaganja glavni grijeh. Druga škola mišljenja kaže da ako se na jednom mjestu deklarira sve što program čini, olakšava se razvoj i razumijevanje. To je problem o kojem ćete sami morati odlučiti jer sam se za različite projekte našao na različitim stranama.

Angular ima nekih problema s dokumentacijom, čestih problema s kompatibilnošću unatrag i mnogih koncepata koje novi programer treba naučiti. S druge strane, Angular ima ogroman ekosustav koji praznine u Angularinoj dokumentaciji popunjava nezavisnim web tutorialima, video zapisima i knjigama.

O Typescriptu

Angular je implementiran u TypeScript, nadskupu JavaScripta koji se pretvara u JavaScript. Općenito je TypeScript aplikacije lakše održavati na proizvodnoj razini nego JavaScript. Jednostavan postupak utvrđivanja jesu li vaši tipovi ispravni u vrijeme sastavljanja eliminira veliku klasu uobičajenih JavaScript pogrešaka, a poznavanje tipova omogućava urednicima, alatima i IDE-ima da budu korisniji pri dovršenju koda, refaktoriranju i provjeri koda.

Slučajno sam veliki obožavatelj TypeScript-a. Smatram da je mnogo produktivnije raditi na velikom TypeScript projektu nego raditi na velikom JavaScript projektu. S JavaScriptom stvarno nikad ne znam vrebaju li programske pogreške u kodu čekajući da me ugrize, bez obzira koliko često pokrenuo JSHint. S TypeScriptom, barem kad dodam neobavezne vrste, klase, module i sučelja, osjećam se puno sigurnije.

Prvi koraci: Instalirajte Angular, TypeScript i Visual Studio Code

Uz to, instalirajmo softver i krenimo.

Instalirajte Node.js i NPM

Prije nego što napravite bilo što drugo, morate instalirati Node.js i NPM, upravitelj paketa Node, jer su oni u osnovi velikog dijela instalacije i alata programa Angular. Da biste saznali jesu li instalirane i ako jesu, koje su verzije instalirane, idite na konzolu ili terminal i upišite sljedeće dvije naredbe:

$ čvor -v $ npm -v

Na mom računalu prijavljena verzija Node.js je v6.9.5, a NPM verzija 3.10.10. To su trenutačne verzije dugoročne podrške, kao što vidim iz pregleda //nodejs.org/. Ako su vaše verzije trenutne, možete prijeći na sljedeći odjeljak. Ako nijedna naredba nije pronađena ili je bilo koja verzija zastarjela, trebali biste instalirati trenutne verzije. Moje su verzije trenutačne jer sam nedavno ponovno instalirao Node, kao što je prikazano na snimci zaslona u nastavku. Instalacija i Node.js i NPM stvar je pregledavanja nodejs.org, pritiska na zeleni LTS gumb i slijeđenja uputa.

Nakon što dovršite instalaciju, ponovno provjerite verzije kako biste se uvjerili da su se stvarno ažurirale. Znam da ponavljanje provjere zvuči paranoično, ali dobrom programeru treba zdrava doza paranoje kako bi izbjegao bugove, a pokidane instalacije nisu rijetkost.

1. Instalirajte Angular

Postoje dva načina za instalaciju i upotrebu Angular-a. Prvo ću vam pokazati metodu sučelja naredbenog retka (CLI) iz nekoliko razloga. Prva je da se bolje uklapa s načinom na koji volim raditi. Druga je da CLI generira cjelovitiju početnu aplikaciju od QuickStart sjemena. Treće je da se čini da korak čišćenja u uputama za QuickStart sjemena može nanijeti pustoš ako se koristi u pogrešno vrijeme ili u pogrešnom direktoriju.

Dođite do //angular.io/ i kliknite jedan od tri gumba Započni. Svi idu na isto mjesto, Angular QuickStart.

Molimo pročitajte tu stranicu i slobodno isprobajte primjer QuickStart na Plunkeru putem veze nakon prvog bloka koda. Jednom kada pomislite da možete slijediti @Componentfunkciju dekoratera i izraz vezivanja kutne interpolacije {{name}}, kliknite vezu CLI QuickStart s lijeve strane. Ne brinite previše o tome kako su implementirane funkcije dekoratera i povezivanje interpolacije: Doći ćemo do toga.

1a. Instalirajte i testirajte Angular-CL

Slijedit ćemo upute za postavljanje razvojnog okruženja CLI. Prvi korak je globalna instalacija Angular-a i njegovog CLI-a sa npm:

$ npm install -g @ angular / cli

Ako pažljivo promatrate nastavak instalacije, vidjet ćete hrpu preduvjeta i alata instaliranih prije Angulala i njegovog CLI-ja. Ako postoje upozorenja, ne brinite zbog njih. Ako postoje pogreške, možda ćete ih morati ispraviti; I sama sam vidjela samo upozorenja. Sigurno je ponovno instalirati Angular CLI kad god želite.

Sljedeći je korak stvaranje novog projekta s Angular CLI-om. Svoje sam stavio u direktorij pod nazivom Work ispod mape svog kućnog korisnika.

$ cd work $ ng nova moja aplikacija

Kao što napominju upute, generiranje nove aplikacije Angular traje nekoliko minuta. Ovo je dobro vrijeme da skuhate lijepu šalicu čaja ili kave.

Na snimci zaslona vidjet ćete da sam tsc -vnakon instalacije Angular CLI dvaput provjerio svoju verziju TypeScript ( ). Da, bilo je malo paranoično. I da, dobra je ideja da to učinite i vi. Ako već niste instalirali TypeScript, pobrinimo se za to sada:

$ npm install –g typecript

Skoro smo stigli. Zatim uđite u novi direktorij i poslužite aplikaciju.

$ cd my-app $ ng serve

Kao što će vam poslužitelj reći, sluša na priključku 4200. Dakle, otvorite karticu preglednika na // localhost: 4200 i vidjet ćete sliku s lijeve strane.

Saldo stranice CLI QuickStart upućuje vas da promijenite svojstvo naslova i njegov CSS. Slobodno to učinite s bilo kojim programskim uređivačem (a ne s procesorom teksta!) Koji ste slučajno instalirali ili pričekajte dok kasnije ne instalirate Visual Studio Code. Prozor preglednika automatski će se ažurirati kad god spremite, dok poslužitelj gleda kôd i ažurira promjene.

Kad završite s poslužiteljem, pritisnite Control-C u prozoru terminala da biste zaustavili postupak.

1b. Instalirajte kutno sjeme QuickStart

Ovaj korak učinite samo ako ste preskočili korak 1a. Ako napravite oba koraka, ova će instalacija ukloniti dio instalacije CLI-a, a to ćete morati ponoviti ako ga želite ponovno koristiti. Upute za instaliranje sjemena QuickStart nude dvije mogućnosti za pokretanje postupka: preuzimanje sjemena i njegovo raspakiranje, ili pak kloniranje sjemena, kako slijedi:

$ git klon //github.com/angular/quickstart.git quickstart

Koju god opciju odabrali za dobivanje koda, sljedeći koraci su isti:

$ cd brzi početak

(ili kako ste već imenovali mapu)

$ npm instalacija

$ npm početak

npm installKorak se u osnovi istu stvar kao $ npm install -g @angular/clikorak u CLI verziji instalacije, osim što se instalirati pisaćim strojem i to ne ne instalirati kutni CLI, jer to nije na popisu ovisnosti u package.json. Ako je Angular CLI već instaliran, ova će ga skripta deinstalirati .

npm startKorak vodi ovu skriptu:

"start": "istodobno \" npm run build: watch \ "\" npm run serve \ ""

Da biste to proširili, skripte build: watch and serve su:

"build: watch": "tsc -p src / -w"

i

"serve": "lite-server -c = bs-config.json"

Jesam li spomenuo da tscje to prevodilac TypeScript? -pOpcija postavlja projekt imenik sastaviti, a -wopcija kaže gledati ulaznih datoteka.

npm startKorak (trčanje dva pisma istovremeno) će učiniti u biti isto kao ng servekorak u CLI verziji instalacije, osim da je vjerojatno da će izabrati neku drugu luku, plus to će automatski učitati stranicu je na službi u vašem zadanom preglednik, a stranica će izgledati poput slike lijevo.

Kada završite s igranjem aplikacije Angular QuickStart, samo pritisnite Ctrl + C ili zatvorite prozor terminala da biste zaustavili postupak. Možete ga ponovo pokrenuti vraćanjem u direktorij i pokretanjem ng serve.

Sljedeći (neobavezni) korak u uputama za sjeme QuikStart je onaj koji me čini nervoznim: govori vam da izbrišete nebitne datoteke koristeći rm -rfMacOS ili delWindows. Ako se odlučite na to, barem dvaput provjerite jeste li u ispravnom direktoriju prije otpuštanja skripte koju ste kopirali s dokumentacijskog mjesta. Molimo nemojte pokušavati nakon što počnete dodavati datoteke u projekt.

Bez obzira jeste li slijedili CLI ili QuickStart upute za početak, sljedeći će vam korak biti istraživanje izvornog koda Angular projekta. U tu svrhu instalirajmo uređivač svjestan Angular-a.

2. Instalirajte Visual Studio Code

Stranica Angular resources preporučuje tri IDE-a: IntelliJ IDEA, Visual Studio Code i WebStorm. Koristim sve tri, ali za potrebe ove vježbe Visual Studio Code je najbolji izbor jer je besplatan i otvoren. Otvorite početnu stranicu Visual Studio Code i preuzmite trenutnu stabilnu verziju za svoju platformu, a zatim instalirajte paket.

Nakon što instalirate Visual Studio Code, pokrenite ga i otvorite direktorij u kojem se nalazi vaš osnovni projekt. Na mom Macu, CLI-generirani projekt je ~/work/my-appi sjeme je na ~/work/quickstartmaster. Vaše će se mjesto razlikovati ovisno o tome jeste li instalirali CLI ili instalirali sjeme i bilo koji izbor koji ste napravili u vezi s njihovim ciljnim direktorijima. Izvorno stablo trebalo bi izgledati otprilike ovako:

Visual Studio Code podržava TypeScript iz kutije, pa se nema što drugo instalirati. Ako kasnije želite instalirati druge jezike, to je lako učiniti na ploči Proširenja, lako se prikazuje klikom na donju ikonu u gornjem lijevom kutu. Upišite naziv jezika ili alata koji želite u okvir za pretraživanje na vrhu ploče Proširenja. U File Explorer možete se vratiti klikom na gornju ikonu u gornjem lijevom kutu.