KulmaJS on Googlen kehittämä JavaScript MVC -kehys, jonka avulla voit rakentaa hyvin jäsenneltyjä, helposti testattavia ja ylläpidettäviä käyttöliittymäsovelluksia.
Jos et ole vielä kokeillut AngularJS: ää, menetät. Kehys koostuu tiiviisti integroidusta työkalupaketista, joka auttaa sinua rakentamaan hyvin jäsenneltyjä, rikkaita asiakaspuolen sovelluksia modulaarisesti - vähemmän koodia ja enemmän joustavuutta.
AngularJS laajentaa HTML-koodia tarjoamalla direktiivejä jotka lisäävät toiminnot merkinnöihisi ja antavat sinun luoda tehokkaita dynaamisia malleja. Voit myös luoda omia direktiivejä, laatia uudelleenkäytettävät komponentit, jotka täyttävät tarpeesi, ja tiivistää kaikki DOM-manipulointilogiikat.
Se toteuttaa myös kaksisuuntaisen tiedonsiirron, yhdistämällä HTML-koodisi (näkymät) JavaScript-objekteihisi (mallit) saumattomasti. Yksinkertaisesti sanottuna tämä tarkoittaa, että kaikki mallisi päivitykset näkyvät välittömästi näkymässäsi ilman DOM-manipulointia tai tapahtumien käsittelyä (esim. JQueryn kanssa).
Angular tarjoaa XHR: n lisäksi palveluja, jotka yksinkertaistavat dramaattisesti koodiasi ja mahdollistavat abstraktin API-puhelut uudelleenkäytettäviksi palveluiksi. Tämän avulla voit siirtää mallisi ja liiketoimintalogiikkasi käyttöliittymään ja rakentaa taustan agnostisia verkkosovelluksia.Lopuksi, rakastan Angularia sen joustavuuden vuoksi palvelinviestinnässä. Kuten useimmat JavaScript MVC -kehykset, sen avulla voit työskennellä minkä tahansa palvelinpuolen tekniikan kanssa, kunhan se voi palvella sovellustasi RESTful-verkkosovellusliittymän kautta. Mutta Angular tarjoaa myös palveluja päällä XHR: n, joka yksinkertaistaa koodiasi dramaattisesti ja antaa sinun abstraktoida API-puhelut uudelleenkäytettäviksi palveluiksi. Tämän seurauksena voit siirtää mallisi ja liiketoimintalogiikkasi käyttöliittymään ja rakentaa taustan agnostisia verkkosovelluksia. Tässä viestissä teemme juuri sen, askel kerrallaan.
Ensinnäkin, päätetään rakennettavan sovelluksen luonne. Tässä oppaassa emme halua viettää liikaa aikaa taustalla, joten kirjoitamme jotain tietojen perusteella, jotka ovat helposti saavutettavissa Internetissä, kuten urheilusyötösovellus!
Koska satun olemaan valtava moottoriurheilun ja Formula 1: n fani, käytän autosport-sovellusliittymän palvelua toimiakseen taustamme. Onneksi kaverit Ergast ovat ystävällisiä tarjoamaan ilmaisen moottoriurheilun sovellusliittymän, joka sopii meille täydellisesti.
Katso piilotettu huippu sille, mitä aiomme rakentaa, katsomalla live-esittely . Esittelemällä esittelyn ja esittelemällä joitain Angular-malleja käytin Bootstrap-teemaa WrapBootstrap , mutta koska tämä artikkeli ei koske CSS: ää, vain abstraktin sen pois esimerkkeistä ja jätän sen pois.
Käynnistetään esimerkkisovelluksemme jollain kattilalla. Suosittelen kulmasiemen projektin, koska se ei vain tarjoa sinulle loistavaa luurankoa bootstrappingille, vaan myös asettaa pohjan yksikön testaukselle Karma ja Jasmiini (emme tee mitään testejä tässä demossa, joten jätämme vain tavaran toistaiseksi sivuun; katso Osa 2 tästä opetusohjelmasta saadaksesi lisätietoja projektisi määrittämisestä yksikköä ja päähän-testausta varten).
EDIT (toukokuu 2014): Koska kirjoitin tämän opetusohjelman, kulmasiemen projekti on käynyt läpi joitain suuria muutoksia (mukaan lukien Bower paketinhallintana). Jos sinulla on epäilyksiä projektin käyttöönotosta, tutustu nopeasti sen ensimmäiseen osaan viiteopas . Sisään Osa 2 ths opetusohjelma, Bower , muiden työkalujen ohella, käsitellään tarkemmin.
OK, nyt kun olemme kloonanneet arkiston ja asentaneet riippuvuudet, sovelluksemme luuranko näyttää tältä:
Nyt voimme aloittaa koodauksen. Kun yritämme rakentaa urheilutapahtumia kilpa-mestaruuskilpailuja varten, aloitetaan asiaankuuluvimmasta näkökulmasta: mestaruuspöytä .
Ottaen huomioon, että ohjainluettelo on jo määritelty toiminta-alueellamme (ripusta kanssani - tulemme sinne) ja sivuuttamatta mitään CSS: ää (luettavuuden vuoksi), HTML-koodi saattaa näyttää tältä:
Drivers Championship Standings {{$index + 1}}
{{driver.Driver.givenName}} {{driver.Driver.familyName}} {{driver.Constructors[0].name}} {{driver.points}}
Ensimmäinen asia, jonka huomaat tässä mallissa, on lausekkeiden ('{{' ja '}}') käyttö muuttujien arvojen palauttamiseksi. AngularJS-kehityksessä , lausekkeiden avulla voit suorittaa jonkin verran laskutoimitusta halutun arvon palauttamiseksi. Jotkut kelvolliset lausekkeet ovat:
{{ 1 + 1 }}
{ 946757880 }
{{ user.name }}
Lausekkeet ovat käytännössä JavaScript-tyyppisiä katkelmia. Huolimatta siitä, että olet erittäin tehokas, sinun ei pitäisi käyttää lausekkeita korkeamman tason logiikan toteuttamiseen. Tätä varten käytämme direktiivejä.
Toinen asia, jonka huomaat, on ng-attributes
, jota et näe tyypillisessä merkinnässä. Nämä ovat direktiivejä.
Korkealla tasolla direktiivit ovat markkereita (kuten määritteet, tunnisteet ja luokkien nimet), jotka käskevät AngularJS: ää liittämään tietyn käyttäytymisen DOM-elementtiin (tai muuntamaan sen, korvaamaan sen jne.). Katsotaanpa niitä, jotka olemme jo nähneet:
ng-app
-direktiivi on vastuussa sovelluksen käynnistämisestä uudelleen määrittelemällä sen soveltamisala. AngularJS: ssä sinulla voi olla useita sovelluksia samalla sivulla, joten tämä direktiivi määrittää, missä kukin erillinen sovellus alkaa ja päättyy.
ng-controller
direktiivi määrittää, mikä rekisterinpitäjä vastaa näkemyksestäsi. Tässä tapauksessa merkitsemme driversController
, joka antaa luettelon ohjaimista (driversList
).
ng-repeat
-direktiivi on yksi yleisimmin käytetyistä ja palvelee mallipohjan määrittelemistä, kun etsit kokoelmia. Yllä olevassa esimerkissä se kopioi taulukon rivin jokaiselle kuljettajalle kohdassa driversList
Näkemyksestämme ei tietenkään ole hyötyä ilman ohjainta. Lisätään driversController
ohjaimillemme.js:
angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope) { $scope.driversList = [ { Driver: { givenName: 'Sebastian', familyName: 'Vettel' }, points: 322, nationality: 'German', Constructors: [ {name: 'Red Bull'} ] }, { Driver: { givenName: 'Fernando', familyName: 'Alonso' }, points: 207, nationality: 'Spanish', Constructors: [ {name: 'Ferrari'} ] } ]; });
Olet ehkä huomannut $scope
muuttuja, jonka välitämme parametrina ohjaimelle. $scope
muuttujan on tarkoitus linkittää ohjaimesi ja näkymät. Erityisesti siinä on kaikki tiedot, joita mallissasi käytetään. Kaikki siihen lisäämäsi (kuten driversList
yllä olevassa esimerkissä), ovat suoraan käytettävissä näkymissäsi. Työskentelemme nyt vain nuken (staattisen) tietojoukon kanssa, joka korvataan myöhemmin API-palvelullamme.
Lisää nyt tämä app.js: een:
angular.module('F1FeederApp', [ 'F1FeederApp.controllers' ]);
Tällä koodirivillä alustamme sovelluksemme ja rekisteröimme moduulit, joista se riippuu. Palataan kyseiseen tiedostoon (app.js
) myöhemmin.
Laitetaan nyt kaikki yhteen index.html
:
F-1 Feeder Drivers Championship Standings {{$index + 1}}
{{driver.Driver.givenName}} {{driver.Driver.familyName}} {{driver.Constructors[0].name}} {{driver.points}}
Pieniä virheitä, voit nyt käynnistää sovelluksesi ja tarkistaa (staattisen) ohjainluettelosi.
Huomaa: Jos tarvitset apua sovelluksen virheenkorjauksessa ja mallien ja laajuuden visualisoinnissa selaimessa, suosittelen katsomaan mahtavaa Batarang Chrome-laajennus.
Koska tiedämme jo, kuinka ohjaimen tiedot näytetään näkymässämme, on aika todella hakea reaaliaikaiset tiedot RESTful-palvelimelta.
Viestinnän helpottamiseksi HTTP-palvelimien kanssa AngularJS tarjoaa $http
ja $resource
palvelut. Edellinen on vain kerros sen päällä XMLHttpRequest tai JSONP , kun taas jälkimmäinen tarjoaa korkeamman abstraktiotason. Käytämme $http
.
Jos haluat erottaa palvelimen sovellusliittymäkutsut ohjaimesta, luodaan oma mukautettu palvelumme, joka noutaa tietomme ja toimii kääreenä $http
lisäämällä tämä services.js
:
angular.module('F1FeederApp.services', []). factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } return ergastAPI; });
Kahden ensimmäisen rivin avulla luomme uuden moduulin (F1FeederApp.services
) ja rekisteröimme palvelun kyseiseen moduuliin (ergastAPIservice
). Huomaa, että ohitamme $http
kyseisen palvelun parametrina. Tämä kertoo Angular'sille riippuvuusinjektio moottori, jota uusi palvelumme vaatii (tai riippuu ) $http
palvelu.
Samalla tavalla meidän on kerrottava Angularille sisällyttämään uusi moduulimme sovellukseemme. Rekisteröidään se app.js
: lla ja korvataan nykyinen koodi seuraavalla:
angular.module('F1FeederApp', [ 'F1FeederApp.controllers', 'F1FeederApp.services' ]);
Nyt meidän tarvitsee vain säätää controller.js
vähän, sisältää ergastAPIservice
riippuvuutena, ja meillä on hyvä mennä:
angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; ergastAPIservice.getDrivers().success(function (response) { //Dig into the responde to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); });
Lataa sovellus uudelleen ja tarkista tulos. Huomaa, että emme tehneet muutoksia malliin, mutta lisäsimme nameFilter
vaihtelee soveltamisalamme mukaan. Otetaan tämä muuttuja käyttöön.
Loistava! Meillä on toiminnallinen ohjain. Mutta se näyttää vain luettelon ohjaimista. Lisätään joitain toimintoja toteuttamalla yksinkertainen tekstihaku, joka suodattaa luettelomme. Lisätään seuraava rivi index.html
-sarjaan, joka on suoraan tagin alapuolella:
ng-model
Käytämme nyt Tämä rivi kertoo Tässä vaiheessa kaksisuuntainen tiedonsiirto käynnistyy: joka kerta kun arvo syötetään hakukenttään, Angular varmistaa välittömästi, että Lataa sovellus uudelleen ja tarkista hakupalkki. Huomaa, että tämä suodatin etsii avainsanaa kaikista mallin määritteistä, myös niistä, joita emme käytä. Oletetaan, että haluamme suodattaa vain Palataan nyt kohtaan Lataa sovellus uudelleen vielä kerran, ja nyt meillä on haku nimen mukaan. Seuraava tavoitteemme on luoda kuljettajan tietosivu, jonka avulla voimme napsauttaa kutakin kuljettajaa ja nähdä hänen / hänen uransa yksityiskohdat. Ensinnäkin sisällytetään Muutoksen myötä siirtyminen kohtaan AngularJS: n avulla voit sitoa reitit tiettyihin ohjaimiin ja näkymiin. Mutta ensin meidän on kerrottava Angularille, missä nämä osittaiset näkemykset tehdään. Tätä varten käytämme Nyt kun navigoimme sovellusreitteissämme, Angular lataa siihen liittyvän näkymän ja hahmottaa sen tagin sijaan. Meidän on vain luotava tiedosto nimeltä Lopuksi päätetään, mitä haluamme näyttää tietosivulla. Entä yhteenveto kaikista kuljettajaa koskevista tiedoista (esim. Syntymä, kansalaisuus) sekä taulukko, joka sisältää kuljettajan viimeisimmät tulokset? Voit tehdä sen lisäämällä Tällä kertaa toimitamme kuljettajan tunnuksen palvelulle niin, että haemme vain tietylle kuljettajalle olennaiset tiedot. Nyt muokkaamme Tärkeää huomata tässä on, että pistimme juuri Nyt kun tietomme ovat laajuudessa, tarvitsemme vain jäljellä olevan osittaisen näkymän. Luodaan tiedosto nimeltä Huomaa, että laitamme nyt Lisää joukko CSS: ää ja renderöi sivu. Sinun pitäisi päätyä jotain tällaista: Olet nyt valmis käynnistämään sovelluksesi ja varmistamaan, että molemmat reitit toimivat halutulla tavalla. Voit myös lisätä staattisen valikon kansioon EDIT (toukokuu 2014): Olen saanut monia pyyntöjä ladattavasta versiosta koodista, jonka rakennamme tässä opetusohjelmassa. Siksi olen päättänyt vapauttaa sen tässä (poistettu CSS: stä). Olen kuitenkin todella ei suosittele sen lataamista, koska tämä opas sisältää jokaisen askeleen, jonka sinun on rakennettava sama sovellus omin käsin, mikä on paljon hyödyllisempi ja tehokkaampi oppimisharjoitus. Tässä opetusohjelmassa olemme käsitelleet kaiken, mitä tarvitset yksinkertaisen sovelluksen kirjoittamiseen (kuten Formula 1 -syöttölaite). Kaikilla live-esittelyn jäljellä olevilla sivuilla (esim. Rakentajan mestaruuspöytä, joukkueen tiedot, kalenteri) on sama perusrakenne ja -käsitteet, jotka olemme tarkastelleet täällä. Lopuksi, pidä mielessä, että Angular on erittäin tehokas kehys, ja olemme tuskin raaputtaneet pintaa kaikessa, mitä se tarjoaa. Sisään Osa 2 Tästä oppaasta annamme esimerkkejä siitä, miksi Angular erottuu vertaistulostimen MVC-kehyksistä: testattavuus. Tarkistamme yksikötestien kirjoittamisen ja suorittamisen Karma , jatkuvan integraation saavuttaminen Yeomen , Maa ja Bower ja muut tämän vahvan käyttöliittymän vahvuudet. AngularJS on Googlen kehittämä JavaScript MVC -kehys, jonka avulla voit rakentaa hyvin jäsenneltyjä, helposti testattavia ja ylläpidettäviä käyttöliittymäsovelluksia. AngularJS laajentaa HTML-koodia tarjoamalla direktiivejä, jotka lisäävät toiminnot merkinnöihisi ja antavat sinun luoda tehokkaita dynaamisia malleja. Voit myös luoda omia direktiivejä, laatia uudelleenkäytettäviä komponentteja, jotka täyttävät tarpeesi ja tiivistävät kaikki DOM-manipulointilogiikat.$scope.nameFilter
direktiivi. Tämä direktiivi sitoo tekstikenttämme ng-repeat
muuttuja ja varmistaa, että sen arvo on aina ajan tasalla syötetyn arvon kanssa. Käy nyt osoitteessa index.html vielä kerran ja tee pieni säätö riville, joka sisältää direktiivi: ng-repeat
driversList
että ennen tietojen luovuttamista nameFilter
taulukko on suodatettava arvoon, joka on tallennettu $scope.nameFilter
nameFilter
siihen liittyvä päivitetään uudella arvolla. Koska sidonta toimii molemmin puolin, tällä hetkellä ng-repeat
arvo päivitetään, myös siihen liitetty toinen direktiivi (eli Driver.givenName
) saa uuden arvon ja näkymä päivitetään välittömästi.Driver.familyName
ja driversController
: Ensinnäkin lisätään $scope.driversList = [];
, aivan $scope.searchFilter = function (driver) ;
: n alapuolelle linja:index.html
ng-repeat
ja päivitämme rivin, joka sisältää direktiivi: $routeProvider
Reitit
app.js
palvelu (in app.js
), joka auttaa meitä käsittelemään näitä erilaisia levitysreitit . Sitten lisätään kaksi tällaista reittiä: yksi mestaruuspöydälle ja toinen kuljettajan yksityiskohdille. Tässä on uusi angular.module('F1FeederApp', [ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ]). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/drivers', {templateUrl: 'partials/drivers.html', controller: 'driversController'}). when('/drivers/:id', {templateUrl: 'partials/driver.html', controller: 'driverController'}). otherwise({redirectTo: '/drivers'}); }]);
http://domain/#/drivers
driversController
lataa partials/drivers.html
ja etsi ositettava näkymä ng-view
-sivulta. Mutta odota! Meillä ei ole vielä osittaisia näkemyksiä, eikö? Meidän on myös luotava ne.Osittaiset näkymät
index.html
direktiivin muuttamalla F-1 Feeder
peilata seuraavat:partials/drivers.html
ja laita mestaruuspöydän HTML-koodi sinne. Käytämme myös tätä mahdollisuutta linkittää kuljettajan nimi kuljettajamme reittiin:
Drivers Championship Standings {{$index + 1}} {{driver.Driver.givenName}} {{driver.Driver.familyName}}
{{driver.Constructors[0].name}} {{driver.points}} services.js
angular.module('F1FeederApp.services', []) .factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverDetails = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverRaces = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK' }); } return ergastAPI; });
:controllers.js
angular.module('F1FeederApp.controllers', []). /* Drivers controller */ controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; $scope.searchFilter = function (driver) re.test(driver.Driver.familyName); ; ergastAPIservice.getDrivers().success(function (response) { //Digging into the response to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); }). /* Driver controller */ controller('driverController', function($scope, $routeParams, ergastAPIservice) { $scope.id = $routeParams.id; $scope.races = []; $scope.driver = null; ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; }); ergastAPIservice.getDriverRaces($scope.id).success(function (response) { $scope.races = response.MRData.RaceTable.Races; }); });
:$routeParams
:id
huolto kuljettajan ohjaimeen. Tämä palvelu antaa meille pääsyn URL-parametreihimme (tässä tapauksessa $routeParams.id
: lle) käyttämällä partials/driver.html
. <- Back to drivers list
ja lisää:
{{driver.Driver.givenName}} {{driver.Driver.familyName}} Country: {{driver.Driver.nationality}}
Team: {{driver.Constructors[0].name}}
Birth: {{driver.Driver.dateOfBirth}}
Biography
Formula 1 2013 Results Round Grand Prix Team Grid Race {{race.round}} {{race.raceName}}
{{race.Results[0].Constructor.name}} {{race.Results[0].grid}} {{race.Results[0].position}} ng-show
true
hyvään käyttöön. Tämä direktiivi näyttää HTML-elementin vain, jos annettu lauseke on false
(ts. ei null
eikä index.html
). Tässä tapauksessa avatar näkyy vain, kun ohjain on ladannut ohjainobjektin piiriin.Viimeistelyt
|_+_|
parantaa käyttäjän navigointimahdollisuuksia. Mahdollisuudet ovat rajattomat. Johtopäätös
Perustietojen ymmärtäminen
Mikä on AngularJS?
Miksi AngularJS?