Angular, naslednik AngularJS, je razvojna platforma za izdelavo mobilnih in namiznih aplikacij z uporabo TypeScript in / ali JavaScript in drugih jezikov. Angular je priljubljen za izdelavo obsežnih spletnih mest in podpira spletne, mobilne, nativne mobilne in domače namizne programe.
Skupina za razvijanje jedra Angular je razdeljena med zaposlene v Googlu in močno skupnost; kmalu ne bo minilo. Poleg lastnih obsežnih zmogljivosti ima platforma Angular močan zunanji ekosistem: več uglednih IDE podpira Angular, ima štiri knjižnice podatkov, na voljo je pol ducata uporabnih orodij in več kot ducat naborov komponent uporabniškega vmesnika ter na desetine Kotne knjige in tečaji. Leta 2015, ko sem AngularJS podelil nagrado Bossie, sem razložil, da gre za ogrodje JavaScript AJAX (MVW), ki razširja HTML z oznakami za dinamične poglede in dvosmerno vezavo podatkov. Angular je še posebej dober za razvoj spletnih strani z eno stranjo in povezovanje obrazcev HTML z modeli in krmilniki JavaScript. Kot je razložil, je novi Angular napisan v TypeScript in ne v JavaScript, kar ima številne prednosti.
Čudno zveneč vzorec »model-view-whatever« je poskus vključitve vzorcev model-view-control (MVC), model-view-view-model (MVVM) in model-view-presenter (MVP) pod eno moniker. Razlike med temi tremi tesno povezanimi vzorci so vrste stvari, o katerih se programerji radi močno prepirajo; razvijalci Angular so se odločili, da ne bodo več sodelovali v razpravi.
V bistvu Angular samodejno sinhronizira podatke iz vašega uporabniškega vmesnika (pogledi v AngularJS in predloge v Angular 2 in novejših) z vašimi objekti JavaScript (model) prek dvosmerne vezave podatkov. Za lažje strukturiranje aplikacije in lažje preskušanje Angular uči brskalnik, kako izvajati vbrizgavanje odvisnosti in inverzijo nadzora. Novi Angular (različica 2 in novejša) nadomešča poglede in krmilnike s komponentami in sprejema standardne konvencije, kar olajša razumevanje in omogoča razvijalcem, da se osredotočijo na razvoj modulov in razredov ECMAScript 6. Z drugimi besedami, Angular 2 je popoln prepis AngularJS, ki poskuša uresničiti iste ideje na boljši način. Predloge kotnih pogledov, ki imajo dokaj preprosto sintakso, so sestavljene v JavaScript, ki je dobro optimiziran za sodobne mehanizme JavaScript. Novi usmerjevalnik komponent v programu Angular 2 lahko razdeli kodo (lenobno nalaganje), da zmanjša količino kode, dostavljene za upodabljanje pogleda.
download's Get Started with Angular Prenesite to vadnico za Angular v priročni obliki PDFZakaj kotni? In kdaj ni dobra izbira?
Izbira okvira JavaScript za spletno aplikacijo je vrsta postopka, ki sproži verske vojne med razvijalci. Nisem tukaj, da bi prognoziral Angular, vendar želim, da veste njegove prednosti in slabosti. V idealnem primeru bi morali izbrati ogrodje, ki ustreza vaši aplikaciji, ob upoštevanju spretnosti v vaši organizaciji in okvirov, ki jih uporabljate v drugih aplikacijah. Na splošno ima Angular dobro orodje in je primeren za res velike projekte z velikim prometom. Angular je bil kot celoten prepis iz AngularJS zasnovan od začetka za uporabo na mobilnih napravah in za visoko zmogljivost. Tako kot njegov predhodnik tudi pri vezavi podatkov deluje enostavno in dobro.
Angular uporablja vzorec spletne komponente, ne pa tudi spletnih komponent kot takih. To ni Polymer, ki ustvarja prave spletne komponente, čeprav lahko Polymer Web Components uporabite v kotnih aplikacijah, če želite. Angular uporablja inverzijo krmiljenja (IoC) in vzorce vbrizgavanja odvisnosti (DI) ter odpravlja nekatere težave pri izvajanju le-teh AngularJS.
Angular uporablja direktive in komponente, ki mešajo logiko z oznakami HTML. Ena šola misli pravi, da je mešanje logike s predstavitvijo glavni greh. Druga miselna šola pravi, da če je vse, kar program počne, razglašeno na enem mestu, je lažje razviti in razumeti. To je vprašanje, o katerem se boste morali odločiti sami, saj sem se pri različnih projektih znašel na različnih straneh vprašanja.
Angular ima nekaj težav z dokumentacijo, pogoste težave z združljivostjo nazaj in številne koncepte, ki se jih mora novi razvijalec naučiti. Po drugi strani ima Angular ogromen ekosistem, ki praznine v dokumentaciji Angular zapolnjuje s spletnimi vajami, videoposnetki in knjigami drugih proizvajalcev.
O TypeScriptu
Angular je implementiran v TypeScript, račji nabor JavaScript, ki se prevede v JavaScript. Na splošno je aplikacije TypeScript lažje vzdrževati v proizvodni lestvici kot JavaScript. Preprost postopek ugotavljanja, ali so vaše vrste pravilne v času prevajanja, odpravlja velik razred pogostih napak JavaScript, poznavanje vrst pa omogoča, da so urejevalniki, orodja in IDE bolj koristni pri dokončanju kode, predelavi in preverjanju kode.
Slučajno sem velik oboževalec Typescripta. Zdi se mi, da je veliko bolj produktivno delati pri velikem projektu TypeScript kot pa pri velikem projektu JavaScript. Z JavaScriptom res nikoli ne vem, ali se napake skrivajo v kodi in čakajo, da me ugriznejo, ne glede na to, kako pogosto uporabljam JSHint. S TypeScriptom se vsaj takrat, ko sem dodal neobvezne vrste, razrede, module in vmesnike, počutim veliko bolj varno.
Začetek: Namestite kode Angular, TypeScript in Visual Studio
S tem pa namestite programsko opremo in začnite.
Namestite Node.js in NPM
Preden začnete kar koli drugega, morate namestiti Node.js in NPM, upravitelja paketov Node, ker sta osnova za večino namestitve in orodja podjetja Angular. Če želite izvedeti, ali so nameščene, in če je tako, katere različice so nameščene, pojdite na poziv konzole ali terminala in vnesite naslednja dva ukaza:
$ vozlišče -v $ npm -v
V mojem računalniku je prijavljena različica Node.js v6.9.5, različica NPM pa 3.10.10. To so trenutno trenutne različice dolgoročne podpore, kot lahko razberem iz pogleda na //nodejs.org/. Če so vaše različice trenutne, lahko preskočite na naslednji razdelek. Če nobenega ukaza ni mogoče najti ali je katera koli različica zastarela, namestite trenutne različice. Moje različice so trenutne, ker sem pred kratkim znova namestil Node, kot je prikazano na spodnjem posnetku zaslona. Namestitev Node.js in NPM je stvar brskanja po nodejs.org, pritiska na zeleni gumb LTS in upoštevanja navodil.
Ko končate namestitev, znova preverite različice in se prepričajte, da so se resnično posodobile. Vem, da ponavljanje preverjanja zveni paranoično, toda dober programer potrebuje zdrav odmerek paranoje, da se izogne napakam, prekinjene namestitve pa niso redke.
1. Namestite kotno
Obstajata dva načina namestitve in uporabe programa Angular. Najprej vam pokažem metodo vmesnika ukazne vrstice (CLI) iz več razlogov. Prva je, da se bolj prilega načinu, kako najraje delam. Drugi je ta, da CLI ustvari popolnejšo začetno aplikacijo kot seme QuickStart. Tretjič, zdi se, da postopek čiščenja v navodilih za zagon QuickStart povzroča opustošenje, če se uporablja ob nepravem času ali v napačnem imeniku.
Poiščite //angular.io/ in kliknite enega od treh gumbov Začnite. Vsi gredo na isto mesto, Angular QuickStart.
Preberite to stran in lahko poskusite primer QuickStart na Plunkerju prek povezave za prvim blokom kode. Ko enkrat pomislite, da lahko sledite @Component funkcija dekoraterja in izraz kotne vezave interpolacije {{name}}kliknite povezavo CLI QuickStart na levi. Ne skrbite preveč, kako sta izvedeni funkcija dekoraterja in vezava interpolacije: Na to bomo prišli.
1a. Namestite in preizkusite Angular-CL
Upoštevali bomo navodila za nastavitev razvojnega okolja CLI. Prvi korak je namestitev programa Angular in njegovega CLI globalno z npm:
$ npm install -g @ angular / cli
Če pozorno spremljate nadaljevanje namestitve, boste videli vrsto predpogojev in orodij, nameščenih pred programom Angular in njegovim CLI. Če obstajajo opozorila, jih ne skrbite. Če obstajajo napake, jih boste morda morali odpraviti; Sama sem videla samo opozorila. Varno lahko znova namestite Angular CLI, kadar koli želite.
Naslednji korak je ustvariti nov projekt z Angular CLI. Svojega sem postavil v mapo z imenom Delo pod mapo domačega uporabnika.
$ cd delo $ ng nova moja aplikacija
Kot je zapisano v navodilih, ustvarjanje nove aplikacije Angular traja nekaj minut. Zdaj je pravi čas, da si skuhate lepo skodelico čaja ali kave.
Na posnetku zaslona boste videli, da sem dvakrat preveril svojo različico TypeScript (tsc -v) po namestitvi Angular CLI. Da, bilo je malo paranoično. In ja, dobra ideja je, da to storite tudi vi. Če TypeScript-a še niste namestili, poskrbimo za to zdaj:
$ npm install –g typecript
Skoraj smo že tam. Nato stopite v nov imenik in strežite aplikacijo.
$ cd my-app $ ng služi
Kot vam bo povedal strežnik, posluša na vratih 4200. Odprite zavihek brskalnika na // localhost: 4200 in slika bo prikazana levo.
Stanje strani CLI QuickStart vam naroča, da spremenite lastnost naslova in njegov CSS. To lahko počnete s čimer koli programiranje urednik (ne urejevalnik besedil!), ki ste ga namestili, ali počakajte, da kasneje namestite Visual Studio Code. Okno brskalnika se samodejno posodobi vsakič, ko shranite, ko strežnik spremlja kodo in posodablja spremembe.
Ko končate s strežnikom, pritisnite Control-C v terminalskem oknu, da zaustavite postopek.
1b. Namestite seme Angular QuickStart
Samo naredite ta korak, če ste preskočili korak 1a. Če narediš oboje korakov, bo ta namestitev odstranila del namestitve CLI in to boste morali ponoviti, če jo želite znova uporabiti. Navodila za namestitev semena QuickStart ponujajo dve možnosti za začetek postopka: prenos semena in razpakiranje ali kloniranje semena, kot sledi:
$ git clone //github.com/angular/quickstart.git hitri začetek
Ne glede na to, katero možnost izberete za pridobitev kode, so naslednji koraki enaki:
hitri začetek $ cd
(ali karkoli ste že poimenovali v mapo)
$ npm namestitev$ npm start
The npm namestite korak naredi v bistvu isto stvar kot $ npm install -g @ angular / cli korak v različici namestitve CLI, le da namesti TypeScript in to tudi stori ne namestite Angular CLI, ker to ni na seznamu odvisnosti v package.json. Če je Angular CLI že nameščen, bo ta skript odstranite to.
The npm začetek korak zažene ta skript:
"start": "sočasno \" npm run build: watch \ "\" npm run serve \ ""
Če želite to razširiti, so skripti build: watch in serve:
"build: watch": "tsc -p src / -w"
in
"serve": "lite-server -c = bs-config.json"
Sem to že omenil tsc je prevajalnik TypeScript? The -p Možnost nastavi imenik projekta na prevajanje in -w možnost pravi, da si oglejte vhodne datoteke.
The npm začetek korak (sočasno izvajanje obeh skriptov) bo v bistvu storil isto kot ng služi korak v različici namestitve CLI, le da bo verjetno izbral druga vrata, poleg tega pa bo stran, ki jo streže, samodejno naložila v vaš privzeti brskalnik, stran pa bo videti kot slika na levi.
Ko se končate z igranjem z aplikacijo Angular QuickStart, samo pritisnite Ctrl + C ali zaprite okno terminala, da zaustavite postopek. Znova ga lahko zaženete tako, da se vrnete v imenik in zaženete ng služi.
Naslednji (neobvezni) korak v navodilih za seme QuikStart je tisti, ki me spravlja ob živce: vam pove, da izbrišete nebistvene datoteke z uporabo rm -rf v MacOS-u oz del v sistemu Windows. Če se odločite za to, vsaj dvakrat preverite, ali ste v pravem imeniku, preden sprožite skript, ki ste ga kopirali z dokumentacijske strani. Ne poskusite, ko začnete dodajati datoteke v projekt.
Ne glede na to, ali ste sledili navodilom CLI ali QuickStart, boste naslednji korak raziskali izvorno kodo projekta Angular. V ta namen namestimo urejevalnik, ki se zaveda Angular-a.
2. Namestite kodo Visual Studio
Stran Angular resources priporoča tri IDE-je: IntelliJ IDEA, Visual Studio Code in WebStorm. Uporabljam vse tri, toda za namene te vaje je Visual Studio Code najboljša izbira, ker je brezplačna in odprtokodna. Pojdite na domačo stran Visual Studio Code in prenesite trenutno stabilno različico za svojo platformo, nato pa namestite paket.
Ko je Visual Studio Code nameščen, ga zaženite in odprite imenik, v katerem je vaš osnovni projekt. Na mojem Macu je projekt, ustvarjen s CLI, ~ / delo / moja-aplikacija in seme je pri ~ / delo / hitri startmaster. Vaša lokacija se bo razlikovala glede na to, ali ste namestili CLI ali namestitev semena, in vse odločitve, ki ste jih sprejeli glede njihovih ciljnih imenikov. Izvorno drevo bi moralo izgledati nekako takole:
Visual Studio Code podpira TypeScript takoj, zato ni treba namestiti nič drugega. Če želite pozneje namestiti druge jezike, je to enostavno narediti na plošči Razširitve, ki jo enostavno prikažete s klikom na spodnjo ikono v zgornjem levem kotu. V iskalno polje na vrhu plošče Razširitve vnesite ime želenega jezika ali orodja. V Raziskovalec datotek se lahko vrnete s klikom na zgornjo ikono v zgornjem levem kotu.
