Kynning á AngularJS

Þegar ég komst yfir AngularJS fyrir nokkrum vikum, var ég mjög ráðinn í fyrstu. Á þeim tíma sem ég hafði unnið í gegnum námskeiðin sem voru aðgengileg á vefsíðu AngularJS, var ég spennt að hafa fundið þessa ramma.

Hvað er AngularJS? AngularJS er (tiltölulega) nýtt krakki á kóðunarstöðinni. Til að vitna frá vefsíðunni sinni er það "uppbygging ramma fyrir dynamic vefforrit" sem er sérstaklega vel við hæfi til að búa til vefsíður á einu síðu, þó að það sé vissulega ekki takmörkuð við það.

Hannað árið 2009 af Miško Hevery og Adam Abrons - bæði starfsmenn Google á þeim tíma - það er alveg JavaScript og algjörlega viðskiptavinur-hlið, svo sem hvar sem er JavaScript getur keyrt, AngularJS getur keyrt. Það er líka lítið: þjappað og minnkað er það minna en 29 kb. Og það er opinn uppspretta undir MIT leyfinu. Þú getur jafnvel notað lógóið, sem er undir Creative Commons Attribution-ShareAlike 3.0 Unported leyfi.

Samkvæmt Wikipedia er markmiðið að Angular "að auka vafrann-undirstaða umsóknir með MVC-getu (MVC)" og það gerir það bara og veitir bindandi / MVC ramma. Það er tvíhliða bindandi, hugaðu þér. Ljúffengur. Með uppbyggingu eins einfalt og {{gögnin mín}} bindur þú gögn á síðuna þína. The $ scope þjónusta uppgötvar breytingar á líkaninu og breytir HTML tjáningu í sjónarhóli með því að stjórna. Vinna í hina áttina eru breytingar á sjónarhóli endurspeglast í líkaninu. Þetta fjarlægir þörfina fyrir mikla meirihluta gagnamiðaðrar DOM manipulations margir af okkur, sjálfur meðtalið, taka sjálfsögðu þegar unnið er með bókasafni eins og jQuery.

Hringlaga rennur rétt út úr kassanum án bókasafnsleysis, þótt það sé hægt að framlengja með mörgum einingar sem eru í boði og að sjálfsögðu er hægt að byggja upp eigin til að passa við þarfir þínar. Að vera hreint JavaScript, það hefur einnig ávinning af því að vera miðlara-agnostic.

Tilvera vön að öflugum bókasafni eins og jQuery, það er auðvelt að vilja blanda því saman við að gera hlutina Hópur getur nú þegar gert. Viðurkenna þessa hugsanlega fallhæð, verktaki hafa þetta til að segja: "Ef þú ert í erfiðleikum með að brjóta vanefnið skaltu íhuga að fjarlægja jQuery úr forritinu þínu. Í alvöru. Hvíturinn er með $ http þjónustuna og öfluga tilskipanir sem gera það næstum alltaf óþarfa. "Eitt er víst að ef þú haltir við hálsi, þá munu jQuery lykkjur og skýrt fram og til baka með þjóninum vera fjarverandi frá kóða þínum, þar sem Hringlaga veitir svona greinar og hreina aðferð til að ná sömu hlutum.

Tilskipanir

Hringlaga notar tilskipanir til að stinga aðgerð sinni inn á síðuna. Tilskipanir, allir prefaced með ng-, eru settar í html eiginleika.

Nokkrar algengar tilskipanir sem koma fyrirfram byggð með Hringlaga eru:

ng-app: þetta er fyrst og fremst upphaflega inngangurinn á horninu á síðunni. Það segir Angular hvar það gerist. er allt sem þarf til að skilgreina síðu sem beitt forrit.

ng-binda: Breytir texta þáttar í gildi tjáningar.
mun sýna gildi 'nafn' innan spjaldsins. Breytingar á "nafn" endurspeglast þegar í stað í DOM hvar sem breytu er notuð.

ng-stjórnandi: tilgreinir JavaScript bekk fyrir viðkomandi aðgerð. Stjórntæki eru yfirleitt haldið í ytri .js skrám.

ng-repeat: skapar mjög hreina lykkju mannvirki á síðunni þinni.

{{item.description}}

áreynslulaust lykkjur í gegnum hvert atriði í söfnuninni.

Ég hef ekki notað þau enn sjálfur, en ég hef lesið að búa til sérsniðnar tilskipanir geta verið erfiður mál, eitthvað sem tekur nokkurn tíma að vefja höfuðið í kringum þig. Horn býður upp á a vídeó til að hjálpa skýra hugtakið.

Sum sýnishornskóði

Eins og áður hefur komið fram er ng-app tilskipunin í merkið setur stigið fyrir horn til að hlaupa á síðunni.

Bæta við til síðuhaussins til að koma í hornramma sjálft.

bendir á utanaðkomandi JavaScript-skrá eða skrár sem halda á JavaScript flokkunum sem Angular appið þitt mun hringja í. Mjög einföld flokkur, sem dæmi, gæti verið:

function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" }  , {"lýsing": "nerf gun"}, {"lýsing": "sími"},];} 

Passing ng-stjórnandi "ItemListCtrl", nafnið á ímyndaða JavaScript bekknum mínum, segir Angular hvaða kóða sem keyrir:

og merkingin með tvöföldum bracket segir frá því sem er að túlka.

ng-repeat er frábærlega skálds endurtekningsleiðbeiningar sem lykkjur gegnum núverandi safn og gerir tilgreindan aðgerð eða veitir tilgreind gögn. Það er svo einfalt og hreint.

Stuff on my desk:
{{item.description}}

Þessi einfalda uppsetning mun sýna:

Stuff on my desk:coffee potnerf gunphone

Að sjálfsögðu virðist það ekki svo áhrifamikið, en hugmyndin sjálft er. Mjög einföld síða uppsetning og stýringar gera að byrja með Angular, jæja, mjög einfalt.

Að fá raunveruleg gögn í forritið þitt er ánægjulega einfalt líka. Hvítur finnst gaman að neyta JSON:

function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;}  } 

Þetta skilar JSON mótmæla sem hægt er að gera við vilji í Angular app.

Og það er byggt fyrir próf, líka!

Eitt af undirstöðuatriðum Angular var stofnað var að forrit sem byggð voru með henni yrðu að fullu prófuð. Til að prófa allt til enda höfum við Hringlaga atburðarás til að líkja eftir notendaviðskiptum við forritið. Þú fæða það atburðarás próf sem skrifuð eru í JavaScript.

Fyrir kembiforrit í vafranum, AngularJS Batarang er Chrome viðbót í boði á github.

Resources

Þar sem AngularJS vinnur meira traction, verða fleiri auðlindir tiltækar, en það eru nú þegar nokkrir síður sem veita leiðbeiningar og leiðir til að lengja Horn.

The AngularJS síða sjálft er auðvitað endanleg uppspretta þín. Þeir bjóða upp á rokk-solid, einföld námskeið og hafa nokkuð virk Google+ viðveru.

Það eru nokkur horn geymslur á GitHub.

Hringlaga mát, býður upp á safn af notendaskipta mátum, frá burðarásum til Rails samþættingar.

Hefur þú notað AngularJS ennþá? Hvernig er það miðað við mikið stærri bókasöfn eins og jQuery? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, hornmynd um Shutterstock.