Angular, efterfølgeren til AngularJS, er en udviklingsplatform til opbygning af mobile og desktop applikationer ved hjælp af TypeScript og / eller JavaScript og andre sprog. Angular er populært til opbygning af websteder med stor volumen og understøtter web-, mobilweb-, native mobil- og native desktop-applikationer.
Angular-kerneudviklingsteamet er opdelt mellem Google-medarbejdere og et robust samfund; det forsvinder ikke snart. Ud over sine egne omfattende kapaciteter har Angular-platformen et stærkt eksternt økosystem: Flere fremtrædende IDE'er understøtter Angular, den har fire databiblioteker, der er et halvt dusin nyttige værktøjer og over et dusin sæt UI-komponenter, og der er snesevis af Kantede bøger og kurser. I 2015, da jeg tildelte AngularJS en Bossie Award, forklarede jeg, at det er et MVW-JavaScript AJAX-framework, der viser model-view-whatever, der udvider HTML med markering til dynamiske visninger og tovejs databinding. Angular er især god til at udvikle webapplikationer på en side og linke HTML-formularer til modeller og JavaScript-controllere. Den nye Angular er skrevet i TypeScript snarere end JavaScript, hvilket har mange fordele, som jeg vil forklare.
Det underligt klingende "model-view-whatever" mønster er et forsøg på at inkludere model-view-controller (MVC), model-view-view-model (MVVM) og model-view-presentator (MVP) mønstre under et moniker. Forskellene mellem disse tre nært beslægtede mønstre er de slags ting, som programmører elsker at diskutere voldsomt om; de Angular-udviklere besluttede at fravælge diskussionen.
Dybest set synkroniserer Angular automatisk data fra dit brugergrænseflade (visninger i AngularJS og skabeloner i Angular 2 og derover) med dine JavaScript-objekter (model) gennem tovejs databinding. For at hjælpe dig med at strukturere din applikation bedre og gøre det let at teste, lærer Angular browseren, hvordan man gør afhængighedsinjektion og inversion af kontrol. Den nye Angular (version 2 og nyere) erstatter visninger og controllere med komponenter og vedtager standardkonventioner, hvilket gør det lettere at forstå og giver udviklere mulighed for at koncentrere sig om at udvikle ECMAScript 6-moduler og klasser. Med andre ord er Angular 2 en total omskrivning af AngularJS, der forsøger at implementere de samme ideer på en bedre måde. Vinklede skabeloner, der har en ret simpel syntaks, er samlet til JavaScript, der er godt optimeret til moderne JavaScript-motorer. Den nye komponentrouter i Angular 2 kan udføre kodedeling (doven indlæsning) for at reducere mængden af leveret kode for at gengive en visning.
download 's Kom godt i gang med Angular Download denne Angular tutorial i praktisk PDF-formatHvorfor kantet? Og hvornår er det ikke et godt valg?
At vælge en JavaScript-ramme til en webapp er den slags proces, der udløser religiøse krige blandt udviklere. Jeg er ikke her for at proselytisere Angular, men jeg vil have dig til at kende dens fordele og ulemper. Ideelt set skal du vælge den ramme, der passer til din app, under hensyntagen til færdighederne i din organisation og de rammer, du bruger i andre applikationer. Generelt har Angular god værktøj og er velegnet til rigtig store projekter med høj trafik. Angular, som en komplet omskrivning fra AngularJS, blev designet fra bunden til brug på mobile enheder og til høj ydeevne. Ligesom sin forgænger binder det data let og godt.
Angular bruger et webkomponentmønster, men ikke webkomponenter i sig selv. Det er ikke polymer, der skaber rigtige webkomponenter, selvom du kan bruge polymerwebkomponenter i kantede applikationer, hvis du ønsker det. Angular bruger inversion af kontrol (IoC) og afhængighedsinjektionsmønstre (DI) og løser nogle problemer med AngularJS-implementeringen af disse.
Angular bruger direktiver og komponenter, der blander logik med HTML-markering. En tankegang siger, at blanding af logik med præsentation er en kardinal synd. En anden tankegang siger, at det at have alt, hvad et program gør erklæret ét sted, gør det lettere at udvikle og forstå. Det er et spørgsmål, du bliver nødt til at beslutte selv, da jeg har fundet mig selv på forskellige sider af spørgsmålet for forskellige projekter.
Angular har nogle dokumentationsproblemer, hyppige bagudkompatibilitetsproblemer og mange koncepter, som en ny udvikler kan lære. På den anden side har Angular et enormt økosystem, der udfylder hullerne i Angular's dokumentation med tredjeparts web-tutorials, videoer og bøger.
Om TypeScript
Angular er implementeret i TypeScript, et supersæt af duck-type af JavaScript, der sendes til JavaScript. Generelt er TypeScript-applikationer lettere at vedligeholde i produktionsskala end JavaScript. Den enkle proces til at bestemme, om dine typer er korrekte på kompileringstidspunktet, eliminerer en stor klasse af almindelige JavaScript-fejl, og at kende typerne gør det muligt for redaktører, værktøjer og IDE'er at være mere nyttige med færdiggørelse af koder, refactoring og kodekontrol.
Jeg er tilfældigvis en stor fan af TypeScript. Jeg finder det meget mere produktivt at arbejde på et stort TypeScript-projekt end at arbejde på et stort JavaScript-projekt. Med JavaScript ved jeg virkelig aldrig, om der lurer fejl i koden, der venter på at bide mig, uanset hvor ofte jeg kører JSHint. I det mindste når jeg har tilføjet de valgfri typer, klasser, moduler og grænseflader, føler jeg mig meget mere sikker med TypeScript.
Kom godt i gang: Installer Angular-, TypeScript- og Visual Studio-kode
Med det sagt, lad os installere softwaren og komme i gang.
Installer Node.js og NPM
Før du gør noget andet, skal du installere Node.js og NPM, Node-pakkehåndteringen, fordi de ligger til grund for meget af Angular's installation og værktøj. For at finde ud af, om de er installeret, og hvis ja, hvilke versioner der er installeret, skal du gå til en konsol eller terminalprompt og skrive følgende to kommandoer:
$ node -v $ npm -v
På min computer er den rapporterede Node.js-version v6.9.5, og NPM-versionen er 3.10.10. Det er de nuværende langvarige supportversioner i øjeblikket, som jeg kan se fra //nodejs.org/. Hvis dine versioner er aktuelle, kan du springe til næste afsnit. Hvis en af kommandoerne ikke findes, eller en af versionerne er forældede, skal du installere de aktuelle versioner. Mine versioner er aktuelle, fordi jeg for nylig geninstallerede Node, som vist i skærmbilledet nedenfor. Installation af både Node.js og NPM er et spørgsmål om at browse til nodejs.org, trykke på den grønne LTS-knap og følge instruktionerne.
Når du er færdig med installationen, skal du kontrollere versionerne igen for at sikre, at de virkelig opdateres. Jeg ved, at gentagelse af kontrollen lyder paranoid, men en god programmør har brug for en sund dosis paranoia for at undgå bugs, og afbrudte installationer er ikke ualmindelige.
1. Installer kantet
Der er to måder at installere og bruge Angular på. Jeg viser dig først kommandolinjegrænsefladen (CLI) af flere grunde. Den første er, at det passer bedre til den måde, jeg kan lide at arbejde på. Det andet er, at CLI genererer en mere komplet startapplikation end QuickStart-frøet. Det tredje er, at oprydningstrinnet i QuickStart-frøinstruktionerne ser ud til at det kan skabe kaos, hvis det bruges på det forkerte tidspunkt eller i den forkerte bibliotek.
Gå til //angular.io/, og klik på en af de tre Kom godt i gang-knapper. De går alle til samme sted, Angular QuickStart.
Læs denne side igennem, og prøv gerne QuickStart-eksemplet på Plunker via linket efter den første kodeblok. Når du først tror, du kan følge @Komponent dekoratørfunktion og Angular interpolation bindende udtryk {{navn}}, klik på CLI QuickStart-linket til venstre. Du skal ikke bekymre dig for meget om, hvordan dekoratørfunktionen og interpolationsbinding implementeres: Vi kommer til det.
1a. Installer og test Angular-CL
Vi følger instruktionerne for at opsætte CLI-udviklingsmiljøet. Det første trin er at installere Angular og dets CLI globalt med npm:
$ npm install -g @ vinkel / cli
Hvis du overvåger nøje, når installationen fortsætter, vil du se en masse forudsætninger og værktøjer installeret før Angular og dens CLI. Hvis der er advarsler, skal du ikke bekymre dig om dem. Hvis der er fejl, skal du muligvis rette dem; Jeg har kun set advarsler selv. Det er sikkert at geninstallere Angular CLI, når du vil.
Det næste trin er at oprette et nyt projekt med Angular CLI. Jeg lagde min i et bibliotek med navnet Work under min hjemmebrugermappe.
$ cd arbejde $ ng ny my-app
Som instruktionerne bemærker tager det et par minutter at generere den nye Angular-app. Dette er et godt tidspunkt at brygge en dejlig kop te eller kaffe.
Du kan se på skærmbilledet, at jeg dobbeltcheckede min TypeScript-version (tsc -v) efter Angular CLI-installationen. Ja, det var lidt paranoid. Og ja, det er en god idé for dig at gøre det også. Hvis du ikke allerede har installeret TypeScript, skal vi tage os af det nu:
$ npm installer –g typeskrift
Vi er næsten der. Gå derefter ind i den nye mappe, og server applikationen.
$ cd min-app $ ng server
Som serveren vil fortælle dig, lytter den på port 4200. Åbn så en browserfane til // localhost: 4200, så ser du billedet til venstre.
Saldoen på CLI QuickStart-siden beder dig om at ændre titelegenskaben og dens CSS. Du er velkommen til at gøre det med hvad som helst programmering redaktør (ikke en tekstbehandler!) du tilfældigvis har installeret, eller vent til du installerer Visual Studio Code senere. Browservinduet opdateres automatisk, hver gang du gemmer, da serveren ser koden og opdaterer om ændringer.
Når du er færdig med serveren, skal du trykke på Control-C i terminalvinduet for at dræbe processen.
1b. Installer Angular QuickStart-frøet
Kun gør dette trin, hvis du har springet trin 1a over. Hvis du gør begge trin, vil denne installation blokere en del af CLI-installationen, og du bliver nødt til at gøre det igen, hvis du vil bruge den igen. Instruktionerne til installation af QuickStart-frøet giver to muligheder for at starte processen: Hentning af frøet og udpakning af det eller alternativt kloning af frøet som følger:
$ git klon //github.com/angular/quickstart.git hurtigstart
Uanset hvilken mulighed du vælger for at få koden, er de næste trin de samme:
$ cd hurtigstart
(eller hvad du navngav mappen)
$ npm installation$ npm start
Det npm installation trin gør stort set det samme som $ npm install -g @ vinkel / cli trin i CLI-versionen af installationen, bortset fra at den installerer TypeScript, og den gør det ikke installer Angular CLI, da det ikke er på afhængighedslisten i pakke.json. Faktisk, hvis Angular CLI allerede er installeret, vil dette script afinstallere det.
Det npm start trin kører dette script:
"start": "samtidig \" npm run build: watch \ "\" npm run serve \ ""
For at udvide det er build: watch og serve-scripts:
"build: watch": "tsc -p src / -w"
og
"serve": "lite-server -c = bs-config.json"
Har jeg nævnt det tsc er TypeScript-kompilatoren? Det -p indstiller projektmappen til at kompilere, og -w option siger at se inputfiler.
Det npm start trin (kørsel af de to scripts samtidigt) vil stort set gøre det samme som ng server trin i CLI-versionen af installationen, bortset fra at det sandsynligvis vælger en anden port, plus at den automatisk indlæser den side, den serverer i din standardbrowser, og siden vil se ud som billedet til venstre.
Når du er færdig med at spille med din Angular QuickStart-app, skal du bare trykke på Ctrl + C eller lukke terminalvinduet for at dræbe processen. Du kan starte det igen ved at vende tilbage til biblioteket og køre ng server.
Det næste (valgfri) trin i QuikStart-frøinstruktionerne er det, der gør mig nervøs: Det fortæller dig at slette de ikke-vigtige filer ved hjælp af rm -rf i MacOS eller del i Windows. Hvis du beslutter dig for at gøre det, skal du i det mindste dobbelttjekke, om du er i den rigtige mappe, før du skyder det script, du kopierede fra dokumentationssiden, ud. Prøv det ikke, når du er begyndt at tilføje filer til projektet.
Uanset om du fulgte CLI- eller QuickStart-frøinstruktionerne, vil dit næste trin være at udforske kildekoden til et Angular-projekt. Lad os med det formål installere en vinkelbevidst editor.
2. Installer Visual Studio-kode
Siden Angular resources anbefaler tre IDE'er: IntelliJ IDEA, Visual Studio Code og WebStorm. Jeg bruger alle tre, men i forbindelse med denne øvelse er Visual Studio Code det bedste valg, fordi det er gratis og open source. Gå til Visual Studio Code-startsiden, og download den aktuelle stabile version til din platform, og installer derefter pakken.
Når Visual Studio Code er installeret, skal du køre den og åbne den mappe, der indeholder dit basisprojekt. På min Mac er det CLI-genererede projekt kl ~ / arbejde / min-app og frøet er ved ~ / arbejde / hurtigstartmaster. Din placering vil variere afhængigt af, om du har installeret CLI eller seedinstallationen, og eventuelle valg, du har foretaget med hensyn til deres målmapper. Kildetræet skal se sådan ud:
Visual Studio Code understøtter TypeScript ud af boksen, så der er intet andet at installere. Hvis du vil installere andre sprog senere, er det let at gøre det i panelet Udvidelser, der let vises ved at klikke på det nederste ikon øverst til venstre. Indtast navnet på det ønskede sprog eller værktøj i søgefeltet øverst i panelet Udvidelser. Du kan komme tilbage til File Explorer ved at klikke på topikonet øverst til venstre.
