Mikä on AngularJS?

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ää.

Ja miksi minun pitäisi käyttää sitä?

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.

Joten mistä aloitamme?

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.

Aloitusopas

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.

Perusohjeiden ymmärtäminen

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

Lisää ohjaimet

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.

Ladataan palvelintietoja

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.

Suodattimet

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ä $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

Tämä rivi kertoo driversList että ennen tietojen luovuttamista taulukko nameFilter on suodatettava arvoon, joka on tallennettu $scope.nameFilter

Tässä vaiheessa kaksisuuntainen tiedonsiirto tapahtuu: aina kun arvo syötetään hakukenttään, Angular varmistaa heti, että 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.

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 Driver.familyName ja driversController: Ensinnäkin lisätään $scope.driversList =[];, aivan rivin alapuolelle $scope.searchFilter = function (driver) ; :

ng-repeat

Palataan nyt hakemistoon index.html ja päivitämme rivin, joka sisältää direktiivin :

$routeProvider

Päivitä sovellus vielä kerran, ja nyt meillä on haku nimen mukaan.

Reitit

Seuraava tavoitteemme on luoda kuljettajatietosivu, jonka avulla voimme napsauttaa kutakin kuljettajaa ja tarkastella heidän kilpailutietojaan.

Ensinnäkin aiomme sisällyttää palvelun 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

Tämän muutoksen avulla navigointi kohtaan 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

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ä index.html muuttamalla F-1 Feeder vastaamaan seuraavaa:

partials/drivers.html

Nyt kun navigoimme sovelluspolkuillamme, Angular lataa liittyvän näkymän ja renderöi sen tarran sijaan. Meidän on vain luotava tiedosto

Drivers Championship Standings
{{$index + 1}}	{{driver.Driver.givenName}} {{driver.Driver.familyName}}	{{driver.Constructors[0].name}}	{{driver.points}}

ja laitettava HTML-mestaruuspöytämme sinne. Aiomme myös käyttää tätä tilaisuutta linkittää kuljettajan nimi reitillemme kuljettajan tiedoista:

services.js

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 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

Tällä kertaa annamme kuljettajatunnuksen palvelulle, jotta voimme hakea tarvittavat tiedot tietylle kuljettajalle. Nyt muokkaamme 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

Tärkeä asia tässä on, että pistämme vain palvelun $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.

Nyt kun tietomme ovat kattavia, tarvitsemme vain jäljellä olevan osittaisen kuvan. Luodaan tiedosto nimeltä <- Back to drivers list
{{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}}

ja lisäämme:

ng-show

Huomaa, että käytämme nyt direktiiviä 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

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

|_+_|

parantaaksesi käyttäjän navigointimahdollisuuksia. Mahdollisuudet ovat rajattomat.

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.

johtopäätös

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.