Kun huomasin AngularJS: n pari viikkoa sitten, olin innostunut aluksi. Kun olin työskennellyt AngularJS: n verkkosivuilla saatavilla olevien opetusohjelmien joukossa, olin innoissani löytänyt tämän kehyksen.

Mikä on AngularJS? AngularJS on (suhteellisen) uusi lapsi koodaavan lohkon kohdalla. Tarjous verkkosivuiltaan on "rakenteellinen kehys dynaamisille web-sovelluksille", joka soveltuu erityisen hyvin yhden sivun verkkosovellusten rakentamiseen, vaikka se ei todellakaan rajoitu siihen.

Google on kehittänyt vuonna 2009 Miško Heveryn ja Adam Abronsin - sekä Googlen työntekijät tuolloin - täysin JavaScriptin ja kokonaan asiakkaan puolella, joten missä tahansa JavaScript voi toimia, AngularJS voi toimia. Se on myös pieni: pakattu ja minified on alle 29 kb. Ja se on avoin lähdekoodi MIT-lisenssin alla. Voit käyttää myös logoa, joka on saatavana Creative Commons Attribution-ShareAlike 3.0 -sovelluksella.

Wikipediain mukaan Angularin tarkoitus on "lisätä selainpohjaisia ​​sovelluksia mallinäkymänohjaimella (MVC)" ja se tekee juuri niin, sillä se tarjoaa sitovaa / MVC-kehystä. Se on kaksisuuntainen sitova. Herkullinen. Kun rakenne on yhtä yksinkertainen kuin {{data}}, sitoudut tiedot sivusi. $ -Alueiden palvelu havaitsee muutokset malliin ja muokkaa näkymässä HTML-lausekkeitä ohjaimilla. Työskentely toisessa suunnassa muutokset näkymään heijastuvat malliin. Tämä poistaa tarpeen, että valtaosa datakeskeistä DOM-manipulaatiosta monet meistä, kuten minäkin, pidämme itsestäänselvyyttä työskenneltäessä kirjaston kanssa, kuten jQuery.

Kulma kulkee suoraan laatikosta ilman kirjaston riippuvuuksia, vaikka sitä voidaan laajentaa monilla käytettävissä olevilla moduuleilla ja tietenkin voit rakentaa omia tarpeitasi vastaaviksi. Koska se on puhdas JavaScript, sillä on myös se etu, että se on server-agnostikko.

Tottunut voimakas kirjasto, kuten jQuery, on helppoa sekoittaa se tekemään asioita, joita Angular voi jo tehdä. Tunnustaen tämän mahdollisen kuilun, kehittäjät saavat sanoa: "Jos yrität rikkoa tapaa, harkitse jQuery-sovelluksen poistamista sovelluksestasi. Todella. Angularilla on $ http -palvelu ja voimakkaat ohjeet, jotka tekevät siitä melkein aina tarpeettomaksi. "Yksi asia on varma, että jos pidät Angularia, jQuery-silmukoita ja eksplisiittistä edestakaista palvelua ei poistu koodistasi, koska Angular tarjoaa niin ytimen ja puhtaan tavan saavuttaa samat asiat.

direktiivit

Kulma käyttää direktiivejä, jotka liittävät sen sivulle. Direktiivit, jotka kaikki ovat ng-, on sijoitettu html-attribuutteihin.

Joitakin yhteisiä direktiivejä, jotka tulevat esiin, ovat Angularin kanssa:

ng-app: tämä on olennaisesti sivun kulmakohdan aloituspiste. Se kertoo Angularille, missä se saa toimia. on vain se, että määritellään sivu kulmikäytössä.

ng-bind: muuttaa elementin tekstiä lausekkeen arvoon.
näyttää arvon "nimi" span sisällä. Kaikki nimeä koskevat muutokset näkyvät välittömästi DOM: ssa missä tahansa muuttujan käytössä.

ng-ohjain: määrittää kyseisen toiminnon JavaScript-luokan. Ohjaimia pidetään tyypillisesti ulkoisissa .js-tiedostoissa.

ng-repeat: luo hyvin puhtaat silmukkarakenteet sivullesi.

  • {{item.description}}

vaivattomasti silmukoita läpi kunkin kokoelman.

En ole käyttänyt niitä vielä itse, mutta olen lukenut, että mukautettujen direktiivien luominen voi olla hankala asia, joka kestää jonkin aikaa päätyäsi ympärille. Kulma tarjoaa a video auttaa selventämään käsite.

Joitakin näytekoodia

Kuten edellä mainittiin, ng-app-direktiivi -merkki asettaa vaiheen, jossa kulma kulkee sivulla.

Lisätä sivun päähän tuoda Cornular-kehys itse.

viittaa ulkoiseen JavaScript-tiedostoon tai tiedostoihin, joilla on JavaScript-luokat, joita Angular-sovellus soittaa. Erittäin yksinkertainen luokka esimerkkinä voisi olla:

function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" }  , {"description": "nerf gun"}, {"description": "phone"},];} 

Lähettäjän ng-ohjain "ItemListCtrl", kuvitellun JavaScript-luokan nimi, kertoo Angularille, mitä koodia ajetaan:

ja kaksoisnokkainen notaatio kertoo, mitä lausekkeita arvioidaan.

ng-toisto on ihanan ytimekäs toistin-direktiivi, joka katkeaa nykyisen kokoelman läpi ja tekee määritellyn toiminnon tai antaa määritetyn datan. Se on niin yksinkertaista ja puhdasta.

Stuff on my desk:

  • {{item.description}}

Tämä yksinkertainen asetus näyttää:

Stuff on my desk:coffee potnerf gunphone

Tosiasiassa tämä ei näytä niin vaikuttavalta, mutta ajatus itsessään on. Erittäin yksinkertainen sivun merkintä ja säätimet tekevät aloittamisesta Cornular, hyvin, hyvin yksinkertainen.

Oikeiden tietojen saaminen sovelluksellesi on myös yksinkertaista. Kulma kuluttaa JSON:

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

Tämä palauttaa JSON-objektin, jota voidaan manipuloida halutulla tavalla Angular-sovelluksessasi.

Ja se on rakennettu testaukseen!

Yksi perustekijöistä Angular perustui siihen, että sen kanssa rakennettu sovellus olisi täysin testattava. Päästä päähän testausta varten meillä on kulmakohtainen skenaarioohjaaja simuloimaan käyttäjän vuorovaikutusta sovelluksesi kanssa. Voit syöttää JavaScript-skriptikoetta.

Jos haluat selata selaimen virheenkorjausta, AngularJS Batarang on Chrome-laajennus saatavilla githubissa.

voimavarat

Koska AngularJS saa enemmän vetovoimaa, lisää resursseja tulee saataville, mutta jo olemassa on useita sivustoja, jotka tarjoavat ohjeita ja keinoja laajentaa Angular.

AngularJS site AngularJS-sivusto itse, on tietenkin lopullinen lähde. Ne tarjoavat rock-kiinteitä, yksinkertaisia ​​opetusohjelmia ja ovat melko aktiivisia Google+ läsnäolo.

On useita kulmia GitHubin arkistot.

Kulmamoduulit, tarjoaa joukon käyttäjälähtöisiä moduuleja, Backbone-palveluista Rails-integraatioon.

Oletko käyttänyt AngularJS: tä vielä? Miten se vertaa paljon suurempaan kirjastoon kuten jQuery? Kerro meille kommentit.

Esitetty kuva / pikkukuva, kulman kuva kautta Shutterstock.