AngularJS: n seuraaja Angular on kehitysalusta mobiililaitteiden ja työpöytäsovellusten rakentamiseen TypeScript- ja / tai JavaScript-kielellä ja muilla kielillä. Angular on suosittu suurten volyymisivustojen rakentamiseen, ja se tukee verkko-, mobiiliverkko-, natiivimobiili- ja natiivipöytäsovelluksia.
Angular core -kehitystiimi on jaettu Googlen työntekijöiden ja vankan yhteisön kesken; se ei katoa pian. Omien laajan kykynsä lisäksi Angular-alustalla on vahva ulkoinen ekosysteemi: Useat tunnetut IDE: t tukevat Angularia, sillä on neljä tietokirjastoa, käytettävissä on puoli tusinaa hyödyllisiä työkaluja ja yli tusina joukkoa käyttöliittymäkomponentteja ja kymmeniä Kulmalliset kirjat ja kurssit. Vuonna 2015, kun minulle myönnettiin AngularJS: lle Bossie-palkinto, selitin, että se on malli-näkymä riippumatta (MVW) JavaScript AJAX -kehys, joka laajentaa HTML-koodia dynaamisten näkymien merkinnöillä ja kaksisuuntaiseen datan sitomiseen. Angular on erityisen hyvä yhden sivun verkkosovellusten kehittämiseen ja HTML-lomakkeiden linkittämiseen malleihin ja JavaScript-ohjaimiin. Uusi kulma on kirjoitettu TypeScriptillä eikä JavaScriptillä, jolla on monia etuja, kuten selitän.
Outo kuulostava "malli-näkymä-mikä tahansa" -malli on yritys sisällyttää malli-näkymä-ohjain (MVC), malli-näkymä-näkymä-malli (MVVM) ja malli-näkymä-esittäjä (MVP) -mallit yhden alle. lempinimi. Näiden kolmen läheisesti liittyvän mallin väliset erot ovat sellaisia asioita, joista ohjelmoijat rakastavat kiistellä kiivaasti; Angular-kehittäjät päättivät olla pois keskustelusta.
Pohjimmiltaan Angular synkronoi automaattisesti käyttöliittymän tiedot (näkymät AngularJS: ssä ja mallit Angular 2: ssa ja uudemmissa) JavaScript-objektiisi (mallin) kanssa kaksisuuntaisen datan sitomisen avulla. Auttaakseen sinua rakentamaan sovelluksesi paremmin ja helpottamaan testaamista, Angular opettaa selaimelle miten riippuvuuden injektointi ja ohjauksen kääntäminen. Uusi Angular (versio 2 tai uudempi) korvaa näkymät ja ohjaimet komponenteilla ja hyväksyy vakiokäytännöt, mikä helpottaa ymmärtämistä ja antaa kehittäjille mahdollisuuden keskittyä kehittämään ECMAScript 6 -moduuleja ja luokkia. Toisin sanoen Angular 2 on AngularJS: n täydellinen uudelleenkirjoittaminen, joka yrittää toteuttaa samat ideat paremmin. Kulmanäkymämallit, joilla on melko yksinkertainen syntakse, kootaan JavaScriptiksi, joka on hyvin optimoitu nykyaikaisille JavaScript-moottoreille. Angular 2: n uusi komponenttireititin voi tehdä koodinjaon (laiska lataus) vähentämään näkymän renderoimiseksi toimitetun koodin määrää.
lataa n Aloita kulma -toiminnolla Lataa tämä kulma-opetusohjelma kätevässä PDF-muodossaMiksi kulmikas? Ja milloin se ei ole hyvä valinta?
JavaScript-kehyksen valitseminen verkkosovellukselle on eräänlainen prosessi, joka käynnistää uskonnolliset sodat kehittäjien keskuudessa. En ole täällä kääntämässä Angularia, mutta haluan sinun tietävän sen edut ja haitat. Ihannetapauksessa sinun tulisi valita sovelluksellesi sopiva kehys ottaen huomioon organisaatiosi taidot ja muissa sovelluksissa käytettävät puitteet. Yleensä Angularilla on hyvät työkalut ja se soveltuu todella suuriin, paljon liikennettä tuottaviin projekteihin. AngularJS on AngularJS: n täydellinen uudelleenkirjoitus, ja se on suunniteltu alusta asti käytettäväksi mobiililaitteissa ja korkeaan suorituskykyyn. Edeltäjänsä tavoin se tekee tietojen sitomisen helposti ja hyvin.
Kulma käyttää verkkokomponenttikuviota, mutta ei Web-komponentteja sinänsä. Se ei ole Polymer, joka luo todellisia verkkokomponentteja, vaikka voit käyttää Polymer Web Componentsia kulmasovelluksissa, jos haluat. Kulma käyttää ohjauksen inversiota (IoC) ja riippuvuusinjektiomalleja (DI) ja korjaa joitain ongelmia AngularJS-toteutuksessa.
Angular käyttää direktiivejä ja komponentteja, joissa sekoitetaan logiikkaa HTML-merkintöjen kanssa. Erään ajattelukoulun mukaan logiikan sekoittaminen esitykseen on kardinaali synti. Erään toisen koulukunnan mukaan kehityksen ja ymmärtämisen helpottaminen on se, että kaikki, mitä ohjelma tekee, ilmoitetaan yhdessä paikassa. Se on asia, joka sinun on päätettävä itse, koska olen löytänyt itseni kysymyksen eri puolilta eri projekteille.
Angularilla on joitain dokumentointiongelmia, usein taaksepäin yhteensopivuusongelmia ja monia käsitteitä uuden kehittäjän oppimiseksi. Toisaalta Angularilla on valtava ekosysteemi, joka täyttää Angularin dokumentaation aukot kolmansien osapuolten verkko-oppailla, videoilla ja kirjoilla.
Tietoja TypeScriptistä
Kulma on toteutettu TypeScriptissä, joka on ankkurityyppinen JavaScriptin supersarja, joka siirtyy JavaScriptiin. TypeScript-sovelluksia on yleensä helpompi ylläpitää tuotannossa kuin JavaScript. Yksinkertainen prosessi sen määrittämiseksi, ovatko tyypit oikeita kokoamisajankohtana, eliminoi suuren luokan yleisiä JavaScript-virheitä, ja tyyppien tunteminen antaa muokkaajille, työkaluille ja IDE: ille enemmän hyötyä koodin täydentämisessä, korjaamisessa ja koodin tarkistuksessa.
Olen satunnaisesti suuri TypeScript-fani. Minusta on paljon tuottavampaa työskennellä suuressa TypeScript-projektissa kuin työskennellä suuressa JavaScript-projektissa. JavaScriptiä käytettäessä en todellakaan koskaan tiedä, piileskelevätkö koodissa virheet, jotka odottavat minua puremaan, riippumatta siitä, kuinka usein suoritan JSHintia. Ainakin kun olen lisännyt valinnaiset tyypit, luokat, moduulit ja käyttöliittymät, TypeScript käyttää minua paljon turvallisemmin.
Aloitus: Asenna Angular-, TypeScript- ja Visual Studio -koodi
Sanotaan, asennetaan ohjelmisto ja aloitetaan.
Asenna Node.js ja NPM
Ennen kuin teet mitään muuta, sinun on asennettava Node.js ja Node, Node-paketinhallinta, koska ne ovat suuren osan Angularin asennuksesta ja työkaluista. Jos haluat selvittää, ovatko ne asennettu, ja jos on, mitkä versiot on asennettu, siirry konsoliin tai päätelaitteeseen ja kirjoita seuraavat kaksi komentoa:
$ solmu -v $ npm -v
Tietokoneellani ilmoitettu Node.js-versio on v6.9.5 ja NPM-versio 3.10.10. Nämä ovat tällä hetkellä tämänhetkisiä pitkäaikaisia tukiversioita, kuten voin kertoa katsomalla osoitteesta //nodejs.org/. Jos versiosi ovat ajan tasalla, voit siirtyä seuraavaan osioon. Jos kumpaakaan komentoa ei löydy tai kumpi tahansa versio on vanhentunut, asenna nykyiset versiot. Omat versiot ovat ajan tasalla, koska olen asentanut hiljattain uudelleen solmun, kuten alla olevassa kuvakaappauksessa näkyy. Sekä Node.js: n että NPM: n asentaminen on selaaminen osoitteeseen nodejs.org, vihreän LTS-painikkeen painaminen ja ohjeiden noudattaminen.
Kun asennus on valmis, tarkista versiot uudelleen varmistaaksesi, että ne todella päivittyvät. Tiedän, että tarkistuksen toistaminen kuulostaa paranoidiselta, mutta hyvä ohjelmoija tarvitsee terveellisen annoksen paranoa vikojen välttämiseksi, ja keskeytetyt asennukset eivät ole harvinaisia.
1. Asenna kulma
Angular voidaan asentaa ja käyttää kahdella tavalla. Näytän ensin komentoriviliittymämenetelmän (CLI) useista syistä. Ensimmäinen on se, että se sopii paremmin tapaan työskennellä. Toinen on se, että CLI tuottaa täydellisemmän käynnistyssovelluksen kuin QuickStart-siemen. Kolmas on, että QuickStart-siemenohjeiden puhdistusvaihe näyttää siltä, että se voi aiheuttaa tuhoja, jos sitä käytetään väärään aikaan tai väärässä hakemistossa.
Selaa osoitteeseen //angular.io/ ja napsauta yhtä kolmesta Aloita-painikkeesta. Ne kaikki menevät samaan paikkaan, Angular QuickStartiin.
Lue sivu läpi ja kokeile vapaasti QuickStart-esimerkkiä Plunkerissa linkin kautta ensimmäisen koodilohkon jälkeen. Kun luulet voivasi noudattaa @Komponentti sisustusfunktio ja kulmainterpolointia sitova lauseke {{nimi}}, napsauta vasemmalla olevaa CLI QuickStart -linkkiä. Älä ole huolissasi liikaa siitä, miten sisustustoiminto ja interpolointisidonta toteutetaan: pääsemme siihen.
1a. Asenna ja testaa Angular-CL
Noudatamme ohjeita luodaksesi CLI-kehitysympäristön. Ensimmäinen vaihe on asentaa Angular ja sen CLI maailmanlaajuisesti npm:
$ npm asenna -g @ kulma / cli
Jos katsot huolellisesti asennuksen edetessä, näet joukon edellytyksiä ja työkaluja, jotka on asennettu ennen Angularia ja sen CLI: tä. Jos varoituksia on, älä huoli niistä. Jos virheitä on, ne on ehkä korjattava; Olen itse nähnyt vain varoituksia. Kulma-CLI on turvallista asentaa uudelleen milloin tahansa.
Seuraava vaihe on luoda uusi projekti Angular CLI: llä. Laitoin omani hakemistoon nimeltä Work, kotikäyttäjäkansioon.
$ cd toimii $ ng uusi oma sovellus
Kuten ohjeissa todetaan, uuden Angular-sovelluksen luominen kestää muutaman minuutin. Tämä on hyvä aika mennä hautumaan mukava kuppi teetä tai kahvia.
Näet kuvakaappauksessa, että olen tarkistanut TypeScript-versioni uudelleen (tsc -v) kulmallisen CLI-asennuksen jälkeen. Kyllä, se oli hieman vainoharhainen. Ja kyllä, se on hyvä idea tehdä myös sinulle. Jos et ole vielä asentanut TypeScriptiä, huolehditaan siitä nyt:
$ npm install –g konekirjoitus
Olemme melkein siellä. Siirry seuraavaksi uuteen hakemistoon ja palvele sovellusta.
$ cd my-app $ ng tarjoillaan
Kuten palvelin kertoo, se kuuntelee porttia 4200. Avaa siis selainvälilehti osoitteeseen // localhost: 4200 ja näet kuvan vasemmalla.
CLI QuickStart -sivun saldo kehottaa sinua muuttamaan otsikkoominaisuutta ja sen CSS: ää. Voit tehdä sen vapaasti millä tahansa ohjelmointi toimittaja (ei tekstinkäsittelyohjelma!), olet satunnaisesti asentanut, tai odota, kunnes asennat Visual Studio Code myöhemmin. Selainikkuna päivittyy automaattisesti, kun tallennat, kun palvelin seuraa koodia ja päivittää muutoksia.
Kun olet valmis palvelimen kanssa, tappaa prosessi painamalla pääteikkunassa Control-C.
1b. Asenna Angular QuickStart -siemen
Vain tee tämä vaihe, jos olet ohittanut vaiheen 1a. Jos sinä teet molemmat vaiheet, tämä asennus pilkkaa osan CLI-asennuksesta, ja sinun on tehtävä se uudelleen, jos haluat käyttää sitä uudelleen. QuickStart-siemenen asennusohjeet tarjoavat kaksi vaihtoehtoa prosessin aloittamiseksi: siemenen lataaminen ja purkaminen tai vaihtoehtoisesti siemenen kloonaus seuraavasti:
$ git klooni //github.com/angular/quickstart.git pikakäynnistys
Kumpi valitset koodin saamiseksi, seuraavat vaiheet ovat samat:
$ cd -pikaopas
(tai mitä nimitit kansion)
$ npm asennus$ npm alku
npm asentaa askel tekee olennaisesti saman asian kuin $ npm asenna -g @ kulma / cli askel asennuksen CLI-versiossa, paitsi että se asentaa TypeScriptin ja tekee ei asenna kulmallinen CLI, koska se ei ole riippuvuusluettelossa package.json. Itse asiassa, jos Angular CLI on jo asennettu, tämä komentosarja tulee poista se.
npm alku step suorittaa tämän komentosarjan:
"start": "samanaikaisesti \" npm ajon koontiversio: watch \ "\" npm run run \ ""
Tämän laajentamiseksi build: watch and serve -skriptit ovat:
"build: watch": "tsc -p src / -w"
ja
"serve": "lite-server -c = bs-config.json"
Olenko maininnut sen tsc onko TypeScript-kääntäjä? -p -asetus asettaa projektihakemiston käännettäväksi ja -w vaihtoehto sanoo katsomaan syötetiedostoja.
npm alku vaihe (ajaa kaksi komentosarjaa samanaikaisesti) tekee olennaisesti saman asian kuin ng palvella askel asennuksen CLI-versiossa, paitsi että se todennäköisesti valitsee toisen portin, plus se lataa palvelemasi sivun automaattisesti oletusselaimeen ja sivu näyttää vasemmalla olevalta kuvalta.
Kun olet lopettanut pelaamisen Angular QuickStart -sovelluksella, paina vain Ctrl + C tai sulje pääteikkuna tappaaksesi prosessin. Voit käynnistää sen uudelleen palaamalla hakemistoon ja suorittamalla ng palvella.
Seuraava (valinnainen) vaihe QuikStart-siemenohjeissa on se, joka saa minut hermostumaan: Se kehottaa poistamaan epäolennaiset tiedostot rm -rf MacOS- tai del Windowsissa. Jos päätät tehdä niin, tarkista ainakin, että olet oikeassa hakemistossa, ennen kuin käynnistät dokumentaatio-sivustolta kopioidun komentosarjan. Älä yritä sitä, kun olet alkanut lisätä tiedostoja projektiin.
Olitpa noudattanut CLI- tai QuickStart-siemenohjeita, seuraava askel on tutkia Angular-projektin lähdekoodia. Asennetaan tätä varten kulmatietoinen editori.
2. Asenna Visual Studio Code
Kulmaiset resurssit -sivu suosittelee kolmea IDE: tä: IntelliJ IDEA, Visual Studio Code ja WebStorm. Käytän kaikkia kolmea, mutta tähän harjoitukseen Visual Studio Code on paras valinta, koska se on ilmainen ja avoimen lähdekoodin. Selaa Visual Studio Code -kotisivulle, lataa nykyinen vakaa versio käyttöjärjestelmällesi ja asenna paketti.
Kun Visual Studio Code on asennettu, suorita se ja avaa hakemisto, joka sisältää perushankkeen. Mac-tietokoneessani CLI: n luoma projekti on ~ / work / my-app ja siemen on ~ / work / quickstartmaster. Sijaintisi vaihtelee sen mukaan, oletko asentanut CLI: n vai siemenasennuksen, ja tekemistäsi valinnoista kohdehakemistoihin. Lähdepuun tulisi näyttää tältä:
Visual Studio Code tukee TypeScriptiä heti pakkauksesta, joten muuta ei tarvitse asentaa. Jos haluat asentaa muita kieliä myöhemmin, se on helppo tehdä Laajennukset-paneelissa, joka näkyy helposti napsauttamalla vasemmassa yläkulmassa olevaa alakulmaa. Kirjoita haluamasi kielen tai työkalun nimi Laajennukset-paneelin yläosassa olevaan hakukenttään. Voit palata Resurssienhallintaan napsauttamalla vasemmassa yläkulmassa olevaa yläkuvaketta.
