Angular, etterfølgeren til AngularJS, er en utviklingsplattform for å bygge mobile og stasjonære applikasjoner med TypeScript og / eller JavaScript og andre språk. Angular er populært for å bygge nettsteder med høyt volum og støtter nett-, mobilweb-, native mobile- og native desktop-applikasjoner.
Angular Core Development Team er delt mellom Google-ansatte og et robust samfunn. det går ikke bort snart. I tillegg til sine egne omfattende evner, har Angular-plattformen et sterkt eksternt økosystem: Flere fremtredende IDE støtter Angular, den har fire databiblioteker, det er et halvt dusin nyttige verktøy og over et dusin sett med UI-komponenter, og det er dusinvis av Kantete bøker og kurs. I 2015, da jeg ble tildelt AngularJS en Bossie Award, forklarte jeg at det er et AJAX-rammeverk for modellvisning-uansett (MVW) som utvider HTML med markering for dynamiske visninger og toveis databinding. Angular er spesielt bra for utvikling av enkeltsideprogrammer og kobling av HTML-skjemaer til modeller og JavaScript-kontrollere. Den nye Angular er skrevet i TypeScript i stedet for JavaScript, som har mange fordeler, som jeg vil forklare.
Det merkelig-klingende "modell-visning-hva som helst" mønsteret er et forsøk på å inkludere modell-visning-kontrolleren (MVC), modell-visning-vis-modell (MVVM) og modell-visning-presentatør (MVP) mønstre under ett moniker. Forskjellene mellom disse tre nært beslektede mønstrene er de slags ting som programmerere elsker å krangle om; Angular-utviklerne bestemte seg for å velge bort diskusjonen.
I utgangspunktet synkroniserer Angular automatisk data fra brukergrensesnittet ditt (visninger i AngularJS og maler i Angular 2 og over) med JavaScript-objektene dine (modell) gjennom toveis databinding. For å hjelpe deg med å strukturere applikasjonen bedre og gjøre det enkelt å teste, lærer Angular nettleseren hvordan du gjør avhengighetsinjeksjon og invertering av kontroll. Den nye Angular (versjon 2 og nyere) erstatter visninger og kontrollere med komponenter og vedtar standardkonvensjoner, noe som gjør det lettere å forstå, og lar utviklere konsentrere seg om å utvikle ECMAScript 6-moduler og klasser. Med andre ord er Angular 2 en total omskrivning av AngularJS som prøver å implementere de samme ideene på en bedre måte. Maler med vinkelvisning, som har en ganske enkel syntaks, blir samlet inn i JavaScript som er godt optimalisert for moderne JavaScript-motorer. Den nye komponentruteren i Angular 2 kan gjøre kodedeling (lat belastning) for å redusere mengden kode som leveres for å gjengi en visning.
last ned s Kom i gang med Angular Last ned denne Angular-opplæringen i praktisk PDF-formatHvorfor kantet? Og når er det ikke et godt valg?
Å velge et JavaScript-rammeverk for en webapp er en slags prosess som utløser religionskrig blant utviklere. Jeg er ikke her for å proselytisere Angular, men jeg vil at du skal vite fordelene og ulempene. Ideelt sett bør du velge rammeverket som passer for appen din, og ta hensyn til ferdighetene i organisasjonen din og rammene du bruker i andre applikasjoner. Generelt har Angular gode verktøy og er egnet for virkelig store prosjekter med høy trafikk. Angular, som en komplett omskrivning fra AngularJS, ble designet fra grunnen av for bruk på mobile enheter og for høy ytelse. Som sin forgjenger, bindes det enkelt og godt.
Angular bruker et webkomponentmønster, men ikke Web Components per se. Det er ikke Polymer, som skaper ekte nettkomponenter, selv om du kan bruke Polymer nettkomponenter i kantede applikasjoner hvis du ønsker det. Angular bruker inversjon av kontroll (IoC) og avhengighetsinjeksjons (DI) mønstre, og løser noen problemer med AngularJS-implementeringen av disse.
Angular bruker direktiver og komponenter som blander logikk med HTML-markering. En tankegang sier at å blande logikk med presentasjon er en kardinal synd. En annen tankegang sier at det å ha alt som et program gjør erklært på ett sted, gjør det lettere å utvikle og forstå. Det er et spørsmål du må bestemme selv, da jeg har funnet meg selv på forskjellige sider av spørsmålet for forskjellige prosjekter.
Angular har noen dokumentasjonsproblemer, hyppige bakoverkompatibilitetsproblemer og mange konsepter for en ny utvikler å lære. På den annen side har Angular et enormt økosystem som fyller hullene i Angular's dokumentasjon med tredjeparts nettveiledninger, videoer og bøker.
Om TypeScript
Angular er implementert i TypeScript, et supersett av duck-type JavaScript som sendes til JavaScript. Generelt er TypeScript-applikasjoner lettere å vedlikeholde i produksjonsskala enn JavaScript. Den enkle prosessen med å bestemme om typene dine er korrekte ved kompileringstid, eliminerer en stor klasse vanlige JavaScript-feil, og å vite typene gjør at redaktører, verktøy og IDEer kan være mer nyttige med kodefullføring, refactoring og kodekontroll.
Jeg er tilfeldigvis en stor fan av TypeScript. Jeg synes det er mye mer produktivt å jobbe med et stort TypeScript-prosjekt enn å jobbe med et stort JavaScript-prosjekt. Med JavaScript vet jeg egentlig aldri om feil lurer i koden og venter på å bite meg, uansett hvor ofte jeg kjører JSHint. I det minste når jeg har lagt til valgfrie typer, klasser, moduler og grensesnitt, føler jeg meg mye tryggere med TypeScript.
Kom i gang: Installer Angular, TypeScript og Visual Studio Code
Med det sagt, la oss installere programvaren og komme i gang.
Installer Node.js og NPM
Før du gjør noe annet, må du installere Node.js og NPM, Node-pakkebehandling, fordi de ligger til grunn for mye av Angular's installasjon og verktøy. For å finne ut om de er installert, og i så fall hvilke versjoner som er installert, går du til en konsoll eller terminalprompt og skriver inn følgende to kommandoer:
$ node -v $ npm -v
På datamaskinen min er den rapporterte Node.js-versjonen v6.9.5 og NPM-versjonen er 3.10.10. Dette er de nåværende versjonene for langsiktig støtte for øyeblikket, som jeg kan se fra å se på //nodejs.org/. Hvis versjonene dine er oppdaterte, kan du hoppe til neste seksjon. Hvis en av kommandoene ikke blir funnet eller noen av versjonene er utdaterte, bør du installere de gjeldende versjonene. Mine versjoner er gjeldende fordi jeg nylig installerte Node på nytt, som vist på skjermbildet nedenfor. Installere både Node.js og NPM er et spørsmål om å bla til nodejs.org, trykke på den grønne LTS-knappen og følge instruksjonene.
Når du har fullført installasjonen, må du sjekke versjonene igjen for å sikre at de virkelig er oppdatert. Jeg vet at gjentagelse av sjekken høres paranoid ut, men en god programmerer trenger en sunn dose paranoia for å unngå feil, og avbrutte installasjoner er ikke uvanlige.
1. Installer kantet
Det er to måter å installere og bruke Angular på. Jeg viser deg CLI-metoden (Command Line Interface) først, av flere grunner. Den første er at den passer bedre med måten jeg liker å jobbe på. Det andre er at CLI genererer en mer fullstendig startapplikasjon enn QuickStart-frøet. Den tredje er at oppryddingstrinnet i QuickStart-frøinstruksjonene virker som om det kan forårsake kaos hvis det brukes på feil tidspunkt eller i feil katalog.
Bla til //angular.io/ og klikk på en av de tre Kom i gang-knappene. De går alle til samme sted, Angular QuickStart.
Les denne siden over, og prøv gjerne QuickStart-eksemplet på Plunker via lenken etter den første kodeblokken. Når du tror du kan følge @Komponent dekoratørfunksjon og Angular interpolation bindende uttrykk {{Navn}}, klikk på CLI QuickStart-lenken til venstre. Ikke bekymre deg for mye om hvordan dekoratørfunksjonen og interpolasjonsbindingen implementeres: Vi kommer til det.
1a. Installer og test Angular-CL
Vi kommer til å følge instruksjonene for å sette opp CLI-utviklingsmiljøet. Det første trinnet er å installere Angular og dets CLI globalt med npm:
$ npm install -g @ vinkel / cli
Hvis du følger nøye med når installasjonen fortsetter, vil du se en rekke forutsetninger og verktøy installert før Angular og dets CLI. Hvis det er advarsler, ikke bekymre deg for dem. Hvis det er feil, må du kanskje fikse dem. Jeg har bare sett advarsler selv. Det er trygt å installere Angular CLI på nytt når du vil.
Neste trinn er å lage et nytt prosjekt med Angular CLI. Jeg satte min inn i en katalog som heter Work under hjemmebrukermappen min.
$ cd arbeid $ ng ny min-app
Som instruksjonene bemerker tar generering av den nye Angular-appen noen minutter. Dette er et godt tidspunkt å brygge en fin kopp te eller kaffe.
Du ser på skjermbildet at jeg dobbeltsjekket TypeScript-versjonen min (tsc -v) etter Angular CLI-installasjonen. Ja, det var litt paranoid. Og ja, det er en god ide for deg å gjøre det også. Hvis du ikke allerede har installert TypeScript, la oss ta oss av det nå:
$ npm install –g typescript
Vi er nesten der. Gå deretter inn i den nye katalogen og server applikasjonen.
$ cd min app $ ng server
Som serveren vil fortelle deg, hører det på port 4200. Så åpne en nettleserfane til // localhost: 4200, så ser du bildet til venstre.
Balansen på CLI QuickStart-siden instruerer deg om å endre tittelegenskapen og dens CSS. Gjør det gjerne med hva som helst programmering redaktør (ikke en tekstbehandler!) du tilfeldigvis har installert, eller vent til du installerer Visual Studio Code senere. Nettleservinduet oppdateres automatisk når du lagrer ettersom serveren ser på koden og oppdaterer om endringene.
Når du er ferdig med serveren, trykker du på Control-C i terminalvinduet for å drepe prosessen.
1b. Installer Angular QuickStart-frøet
Kun gjør dette trinnet hvis du har hoppet over trinn 1a. Hvis du gjør både trinn, vil denne installasjonen sperre deler av CLI-installasjonen, og du må gjøre om det hvis du vil bruke den igjen. Instruksjonene for å installere QuickStart-frøet har to alternativer for å starte prosessen: nedlasting av frø og pakke ut, eller alternativt kloning av frø, som følger:
$ git clone //github.com/angular/quickstart.git quickstart
Uansett hvilket alternativ du velger for å få koden, er de neste trinnene de samme:
$ cd hurtigstart
(eller hva du kalte mappen)
$ npm installasjon$ npm start
De npm installere trinn gjør egentlig det samme som $ npm install -g @ vinkel / cli trinn i CLI-versjonen av installasjonen, bortsett fra at den installerer TypeScript og den gjør det ikke installer Angular CLI, siden det ikke er på avhengighetslisten i pakke.json. Faktisk hvis Angular CLI allerede er installert, vil dette skriptet avinstallere den.
De npm start trinn kjører dette skriptet:
"start": "samtidig \" npm run build: watch \ "\" npm run serve \ ""
For å utvide det er build: watch og serve-skript:
"build: watch": "tsc -p src / -w"
og
"serve": "lite-server -c = bs-config.json"
Har jeg nevnt det tsc er TypeScript-kompilatoren? De -p alternativet angir at prosjektkatalogen skal kompileres, og -w alternativet sier å se inndatafiler.
De npm start trinn (kjører de to skriptene samtidig) vil egentlig gjøre det samme som ng server trinn i CLI-versjonen av installasjonen, bortsett fra at det sannsynligvis vil velge en annen port, pluss at den automatisk laster inn siden den serverer i standard nettleseren, og siden vil se ut som bildet til venstre.
Når du er ferdig med å spille med Angular QuickStart-appen, trykker du bare på Ctrl + C eller lukker terminalvinduet for å drepe prosessen. Du kan starte den på nytt ved å gå tilbake til katalogen og kjøre ng server.
Det neste (valgfrie) trinnet i QuikStart-frøinstruksjonene er det som gjør meg nervøs: Den forteller deg at du skal slette de ikke-viktige filene ved hjelp av rm -rf i MacOS eller del i Windows. Hvis du bestemmer deg for å gjøre det, må du i det minste dobbeltsjekke at du er i riktig katalog før du skyter av skriptet du kopierte fra dokumentasjonsstedet. Ikke prøv det etter at du har begynt å legge til filer i prosjektet.
Uansett om du fulgte CLI- eller QuickStart-frøinstruksjonene, blir ditt neste trinn å utforske kildekoden til et Angular-prosjekt. For å oppnå dette, la oss installere en Angular-klar redaktør.
2. Installer Visual Studio-koden
Angular resources-siden anbefaler tre IDEer: IntelliJ IDEA, Visual Studio Code og WebStorm. Jeg bruker alle tre, men i forbindelse med denne øvelsen er Visual Studio Code det beste valget fordi det er gratis og åpen kildekode. Bla til startsiden for Visual Studio Code og last ned den nåværende stabile versjonen for plattformen din, og installer deretter pakken.
Når Visual Studio Code er installert, kjører du den og åpner katalogen som inneholder grunnprosjektet. På min Mac er det CLI-genererte prosjektet kl ~ / arbeid / min-app og frøet er ved ~ / work / quickstartmaster. Plasseringen din vil variere avhengig av om du gjorde CLI-installasjonen eller frøinstallasjonen, og eventuelle valg du tok om målkatalogene deres. Kildetreet skal se ut slik:
Visual Studio Code støtter TypeScript ut av boksen, så det er ingenting annet å installere. Hvis du vil installere andre språk senere, er det enkelt å gjøre det i utvidelsespanelet, enkelt vises ved å klikke på nederste ikon øverst til venstre. Skriv inn navnet på språket eller verktøyet du vil ha, i søkeboksen øverst i utvidelsespanelet. Du kan gå tilbake til File Explorer ved å klikke på toppikonet øverst til venstre.
