KulmaJS on Googlen kehittämä JavaScript MVC -kehys, jonka avulla voit rakentaa hyvin jäsenneltyjä käyttöliittymäsovelluksia, jotka on helppo tarkistaa ja ylläpitää.
Jos et ole vielä kokeillut AngularJS: ää, se on sääli. Kehys koostuu hyvin integroidusta työkalupaketista, joka auttaa sinua rakentamaan moduulijärjestelmässä hyvin jäsennellyt asiakaspuolen sovellukset, vähemmän koodia ja enemmän joustavuutta.
AngularJS laajentaa HTML-koodia tarjoamalla suuntaviivat jotka lisäävät toiminnallisuutta voittomarginaaliisi ja antavat sinun luoda tehokkaita dynaamisia malleja. Voit myös luoda omia direktiivejä, luoda uudelleenkäytettäviä komponentteja, jotka täyttävät tarpeesi, ja tiivistää kaikki logiikat DOM: n manipuloimiseksi.
Se toteuttaa myös kaksisuuntaisen tiedonsiirron, yhdistämällä HTML-koodisi (näkymät) JavaScript-kohteisiin (malleihin) saumattomasti. Yksinkertaisesti sanottuna tämä tarkoittaa, että kaikki mallin 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 huomattavasti koodiasi ja antavat sinun abstraktoida API-puhelut uudelleenkäytettäviksi palveluiksi. Tämän avulla voit siirtää liiketoimintamallisi ja logiikkasi käyttöliittymään ja rakentaa itsenäisiä back-end-verkkosovelluksia (agnostiset).Lopuksi, rakastan Angularia sen joustavuuden vuoksi palvelinviestinnässä. Kuten useimmat JavaScript MVC -kehykset, Angular antaa sinun työskennellä minkä tahansa palvelintekniikan kanssa, kunhan se voi palvella sovellustasi Web REST -sovellusliittymän kautta. Mutta Angular tarjoaa myös muita palveluja kuin XHR, mikä yksinkertaistaa koodiasi huomattavasti ja antaa sinun abstraktoida API-puhelut uudelleenkäytettäviksi palveluiksi. Tämän seurauksena voit siirtää liiketoimintamallin ja logiikan käyttöliittymään ja rakentaa verkkosovelluksia taustaa riippumaton. Tässä viestissä aiomme tehdä juuri sen: askel kerrallaan.
Ensinnäkin aiomme päättää rakennettavan sovelluksen luonteen. Tässä oppaassa emme halua viettää liikaa aikaa takapäässä, joten aiomme kirjoittaa jotain tietokannasta, joka on helppo saada Internetiin, kuten urheiluuutissovellus!
Koska olen valtava moottoriurheilun ja Formula 1: n fani, käytän taustakuvana API Autosport -palvelua. Onneksi kaverit Ergast he ovat ystävällisiä tarjoamaan ilmaisen moottoriurheilun sovellusliittymän, joka on täydellinen meille.
Katso esikatselu siitä, mitä aiomme rakentaa live-esittely . Kaunistaaksesi demoa ja näyttääkseni joitain Angular-malleja, sovellin Bootstrap-teemaa WrapBootstrap , mutta koska tämä artikkeli ei koske CSS: ää, aion abstraktoida sen esimerkeistä ja jättää sen kokonaan.
Aloitetaan näytesovelluksemme pienellä kattilalevyllä. Suosittelen projektia kulmasiemen koska se ei vain tarjoa loistavaa luurankoa bootstrappingille, vaan myös luo perustan yksikön testaukselle Karma Y Jasmiini (Emme tee mitään testejä tässä demossa, joten laitetaan se toistaiseksi sivuun; katso Osa 2 tästä opetusohjelmasta saadaksesi lisätietoja projektin määrittämisestä, yksikötestausta ja päästä päähän).
MUOKATTU (toukokuu 2014): Koska kirjoitin tämän opetusohjelman, projekti kulmasiemen on käynyt läpi joitain suuria muutoksia (mukaan lukien Bower paketinhallintana). Jos sinulla on kysyttävää projektin toteuttamisesta, katso nopeasti projektisi ensimmäinen osa viiteopas . vuonna opetusohjelma osa 2 , Bower, muiden työkalujen ohella, selitetään yksityiskohtaisemmin.
Ok, nyt kun olemme kloonanneet arkiston ja asentaneet riippuvuudet, sovelluksen luuranko näyttää tältä:
Nyt voimme aloittaa koodauksen. Kun yritämme rakentaa urheiliuutissovellusta kilpa-mestaruuskilpailuihin, aloitetaan asiaankuuluvimmasta näkymästä: mestaruuspöytä.
Ottaen huomioon, että meillä on jo luettelo ohjaimista, jotka on määritelty toiminta-alueellamme (Pysy kanssani - tulemme sinne) ja sivuuttamatta CSS: ää (helpommaksi lukemiseksi), HTML-koodimme voisi olla
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ö arvojen palauttamiseksi muuttujista. AngularJS: ssä lausekkeiden avulla voit suorittaa joitain laskutoimituksia halutun arvon palauttamiseksi. Jotkut kelvolliset lausekkeet ovat:
{{ 1 + 1 }}
{ date }
{{ user.name }}
Lausekkeet ovat itse asiassa JavaScript-tyyppisiä katkelmia. Huolimatta erittäin voimakkaasta, sinun ei pitäisi käyttää lausekkeita korkeamman tason logiikan toteuttamiseen. Tätä varten käytämme ohjeita.
Toinen asia, jonka huomaat, on ng-attribuuttien läsnäolo, joita et näe tyypillisissä merkinnöissä. Nämä ovat ohjeita.
Korkealla tasolla direktiivit ovat paikkamerkkejä (kuten yleisiä nimiä, tunnisteita ja määritteitä), jotka ohjeistavat AngularJS: n liittämään tietyn käyttäytymisen DOM-elementtiin (tai muuttamaan sitä, korvaamaan sen jne.). Katsotaanpa niitä, jotka olemme jo nähneet:
Direktiivi ng-app
Se on vastuussa sovelluksen uudelleenkäynnistämisestä ja sen soveltamisalan määrittämisestä. AngularJS-sovelluksessa sinulla voi olla useita sovelluksia samalla sivulla, joten tämä ohje määrittää, missä kukin sovellus alkaa ja päättyy.
Direktiivi ng-controller
määritä mikä ohjain vastaa näkymästäsi. Tässä tapauksessa merkitsemme sitä driversController
, joka antaa luettelon johtimista (driversList
).
Direktiivi ng-repeat
Se on yksi käytetyimmistä, ja sitä käytetään mallipohjan määrittelemiseen, kun käydään läpi kokoelmia. Yllä olevassa esimerkissä toistat rivin taulukossa jokaiselle johtimelle kohdassa driversList
Tietysti näkemyksemme on hyödytön ilman ohjainta. Lisätään driversController meidän controllers.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 todennäköisesti huomannut $ scope -muuttujan, jonka välitämme parametrina ohjaimelle. Muuttuja $scope
sen on tarkoitus sitoa ohjaimesi ja näkemyksesi. Erityisesti siinä on kaikki tiedot, joita käytetään mallissa. Kaikkea siihen lisättyä (kuten edellisessä esimerkissä driversList
) voi käyttää suoraan näkymissäsi. Toistaiseksi aiomme työskennellä joukon nukkeja (staattinen), jotka aiomme korvata 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}}
Moduloidut pienet virheet, nyt voit käynnistää sovelluksesi ja tarkistaa (staattisen) ohjainluettelosi.
Huomautus: Jos tarvitset apua sovelluksen virheenkorjauksessa, mallien tarkastelussa ja selaimen selauksessa, suosittelen katsomaan vaikuttavaa batarangia; Chrome-laajennus.
Koska tiedämme jo, kuinka ohjaintietomme näytetään näkymässämme, on aika tuoda reaaliaikaiset tiedot RESTful-palvelimelta.
Viestinnän helpottamiseksi HTTP-palvelimien kanssa AngularJS tarjoaa palvelut $http
ja $resource
. Ensimmäinen on kerroksen päällä XMLHttpRequest tai JSONP , kun taas jälkimmäinen tarjoaa korkeamman abstraktiotason. Aiomme käyttää $http
.
Jos haluat erottaa palvelimen sovellusliittymälle soitetut puhelut ohjaimelta, aiomme luoda oman mukautetun palvelumme, joka sieppaa tiedot ja toimii kääreenä $http
lisäämällä se 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 (F1FeederApp.services
). Huomaa, että välitämme $ http parametrina tälle palvelulle. Tämä kertoo moottorille riippuvuuden injektio kulmasta, jota uusi palvelumme vaatii ( tai se riippuu ) palvelun $http
.
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, integroi ergastAPIservice
riippuvuutena, ja olemme valmiita jatkamaan:
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 nyt sovellus uudelleen ja tarkista tulos. Huomaa, että emme tehneet muutoksia malliin, mutta lisäsimme muuttujan nameFilter
meidän ulottuvillamme. Aiomme ottaa tämän muuttujan käyttöön.
Loistava! Meillä on toiminnallinen ohjain. Mutta se näyttää vain luettelon ohjaimista. Aiomme lisätä joitain toimintoja yksinkertaisen tekstihakutuloksen avulla, joka suodattaa luettelon. Lisätään seuraava rivi index.html
-sarjaan, aivan tarran alle:
ng-model
Nyt käytämme direktiiviä Tämä rivi kertoo Tässä vaiheessa kaksisuuntainen tiedonsiirto tapahtuu: aina kun arvo syötetään hakukenttään, Angular varmistaa heti, että Päivitä sovellus ja katso hakupalkkia. Huomaa, että tämä suodatin etsii avainsanaa kaikista mallin määritteistä, myös niistä, joita emme käytä. Oletetaan, että haluamme vain suodattaa Palataan nyt hakemistoon index.html ja päivitämme rivin, joka sisältää direktiivin Päivitä sovellus vielä kerran, ja nyt meillä on haku nimen mukaan. Seuraava tavoitteemme on luoda kuljettajatietosivu, jonka avulla voimme napsauttaa kutakin kuljettajaa ja tarkastella heidän kilpailutietojaan. Ensinnäkin aiomme sisällyttää palvelun Tämän muutoksen avulla navigointi 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 direktiiviä Nyt kun navigoimme sovelluspolkuillamme, Angular lataa liittyvän näkymän ja renderöi sen tarran sijaan. Meidän on vain luotava tiedosto Lopuksi aiomme päättää, mitä haluamme näyttää tietosivulla. Entä yhteenveto kaikista kuljettajaa koskevista tiedoista (esim. Syntymäaika, kansalaisuus) sekä taulukko, joka sisältää viimeisimmät tulokset? Tätä varten lisätään seuraava Tällä kertaa annamme kuljettajatunnuksen palvelulle, jotta voimme hakea tarvittavat tiedot tietylle kuljettajalle. Nyt muokkaamme Tärkeä asia tässä on, että pistämme vain palvelun Nyt kun tietomme ovat kattavia, tarvitsemme vain jäljellä olevan osittaisen kuvan. Luodaan tiedosto nimeltä Huomaa, että käytämme nyt direktiiviä 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 kohtaan MUOKATTU (toukokuu 2014): Olen saanut monia pyyntöjä ladattavasta versiosta koodista, jonka rakennimme tässä opetusohjelmassa. Siksi olen päättänyt asettaa sen saataville tässä (poistettu CSS: stä). Totuus on kuitenkin, että en suosittele sen lataamista, koska tämä opas sisältää kaikki vaiheet, jotka sinun on luotava 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 -tietokone). Kaikilla live-esittelyn jäljellä olevilla sivuilla (esim. Rakentajien mestaruuspöytä, joukkueen tiedot, aikataulu) on sama perusrakenne ja käsitteet, jotka olemme tarkistaneet. Lopuksi, pidä mielessä, että Angular on erittäin tehokas kehys, ja olemme tuskin naarmuuntuneet pintaan kaikessa, mitä sillä on tarjottavanaan. vuonna osa 2 Tästä opetusohjelmasta annamme esimerkkejä siitä, miksi Angular erottuu vertaistensa joukosta etupään MVC-kehyksissä: testattavuus. Tarkastellaan yksikkötestien kirjoittamisen ja suorittamisen kanssa Karma , saavuttaa jatkuva integrointi Yeomen , Maa , Y Bower ja muut tämän vahvan käyttöliittymän vahvuudet.$scope.nameFilter
Tämä direktiivi sitoo tekstikenttämme muuttujaan index.html
ja varmistaa, että sen arvo on aina ajan tasalla syötetyn arvon kanssa. Käydään nyt ng-repeat
vielä kerran ja tehdään pieni säätö direktiiviä sisältävään riviin : ng-repeat
driversList
että ennen tietojen luovuttamista taulukko nameFilter
on suodatettava arvoon, joka on tallennettu $scope.nameFilter
nameFilter
jonka yhdistämme siihen, päivitetään uuteen arvoon. Koska sidonta toimii molemmin puolin, arvo ng-repeat
päivitetään, myös siihen liitetty toinen johtaja (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 rivin alapuolelle $scope.searchFilter = function (driver) ;
:ng-repeat
: $routeProvider
Reitit
app.js
(en app.js
), joka auttaa meitä käsittelemään näitä erilaisia sovelluspolkuja. Seuraavaksi lisätään kaksi näistä reiteistä: yksi mestaruuspöydälle ja toinen kuljettajatiedoille. 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 löytää osittaisen näkymän renderöitäväksi ng-view
Mutta odota! Meillä ei ole vielä osittaisia näkemyksiä, vai mitä? Meidän on myös luotava ne.Osittaiset näkymät
index.html
muuttamalla F-1 Feeder
vastaamaan seuraavaa:partials/drivers.html
ja laitettava HTML-mestaruuspöytämme sinne. Aiomme myös käyttää tätä tilaisuutta linkittää kuljettajan nimi reitillemme kuljettajan tiedoista:
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) ; 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
$routeParams.id
kuljettajan ohjaimessa. Tämän palvelun avulla voimme käyttää URL-parametrejamme (tässä tapauksessa: id) käyttämällä partials/driver.html
. <- Back to drivers list
ja lisäämme:
{{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ässä käytössä. Tämä direktiivi näyttää HTML-elementin vain, jos toimitettu lauseke on false
(eli ei null
eikä index.html
). Tässä tapauksessa avatar ilmestyy vasta, kun ohjain on ladannut ohjainobjektin laajuuteen.Viimeiset kosketukset
|_+_|
parantaaksesi käyttäjän navigointimahdollisuuksia. Mahdollisuudet ovat rajattomat. johtopäätös