Aloittelijan opas verkkosovellusten rakentamiseen AngularJS: n avulla

angularjs kotisivu

Mene mukaan Googlen verkkosovelluskehyksen avulla

Jos olet ammattimainen JavaScript-kehittäjä, olet todennäköisesti kuullut Ember.js (avoimen lähdekoodin JavaScript-kehys) ja Backbone.js (JavaScript-kirjasto, jossa on RESTful JSON -liitäntä). Mutta jos et ole perehtynyt KulmaJS silti menetät joitain sen erittäin houkuttelevista ominaisuuksista, jotka voivat todella parantaa HTML-sovellustasi verkkosovelluksissa.

Tässä annamme sinulle maun AngularJS: stä, supersankarillisesta JavaScript MVW -kehyksestä, mukaan lukien sen erottuvat ominaisuudet ja prosessin aloittamisen.



Toivottavasti tämä ei vain auta sinua kehittämään hyvin suunniteltuja ja ylläpidettäviä rikkaita verkkosovelluksia, mutta antaa sinulle myös vankkoja syitä valita AngularJS tuleviin projekteihisi. Aloitetaanpa!

lähtötason graafisen suunnittelun palkka 2017

01. Mikä on AngularJS?

Googlen rakentama AngularJS on avoimen lähdekoodin verkkosovelluskehys, joka on suunniteltu helpottamaan sekä käyttöliittymän kehittämistä että testaamista verkkokehittäjille. AngularJS: n päätavoitteena on pidentää verkkosovelluksia MVC (Model – view – controller) -ominaisuudella. Se on asiakaspuolen JavaScript MVC / MVVM -kehys, joka on täysin laajennettavissa, toimii ilman kirjastorippuvuuksia ja toimii hyvin myös muiden kirjastojen kanssa. Jopa voit myös muokata tai korvata sen kaikki ominaisuudet vastaamaan erityistarpeitasi.

AngularJS: n kehitti vuonna 2009 Adam Abrons ja Mi & scaron; ko Heverym, jotka olivat tuolloin Google-insinöörejä. Kuten virallisilla verkkosivustoilla mainittiin, se on 'dynaamisten verkkosovellusten rakenteellinen kehys', joka sopii parhaiten sellaisen yhden sivun verkkosovellusten luomiseen, jotka edellyttävät vain JavaScriptiä, CSS: ää ja HTML: ää asiakaspuolella.

Sen avulla voit käyttää HTML: ää mallikielenäsi ja laajentaa HTML: n syntaksia ilmaisemaan verkkosovelluksesi komponentit siististi ja ytimekkäästi. AngularJS auttaa sinua jäsentämään JavaScript-koodisi paremmin ja tekee sen testaamisesta helppoa ja opettaa selaimelle, kuinka riippuvuusinjektiota voidaan käyttää missä tahansa palvelintekniikassa.

Kuinka käyttää AngularJS: ää

Aloittaminen AngularJS: n kanssa on melko helppoa. Voit saada yksinkertaisen kulmasovelluksen vain viidessä minuutissa asettamalla muutaman määritteen HTML-skripteihisi. Nämä ovat:

1. Lisää ng-app-direktiivi tunnisteeseen. Se saa AngularJS: n toimimaan sivulla määrittelemällä sivun Angular-sovellukseksi.

2. Aseta kulmamerkki tagisi sivun alaosaan, missä tagi loppuu.

3. Lisää tavallinen HTML. HTML-määritteitä käytetään AngularJS-direktiivien käyttämiseen, kun taas lausekkeiden arviointi suoritetaan kaksoissulkeilla.

Today's tasks

  • {{task.name}}

Täällä direktiivi ng-controller määrittelee nimitilan, johon voit sijoittaa kulmaisen JS: nne tietojen hallintaan ja HTML-lausekkeiden arvioimiseen. Vaikka ng-repeat -direktiivi on kulmien toistinobjekti, joka pyytää Angularia luomaan luetteloelementtejä, kunhan tehtäviä näytetään.

Final Cut Pro vs Adobe Premiere 2016

Vaikka suurin osa nykyisistä kehyksistä on vain nippu olemassa olevista työkaluista, AngularJS on seuraavan sukupolven kehys, jolla on joitain erittäin vakuuttavia ominaisuuksia, jotka ovat hyödyllisiä paitsi kehittäjille, mutta myös yhtä hyödyllisiä suunnittelijoille. Seuraavassa on joitain uskomattomia AngularJS-ominaisuuksia, jotka auttavat kehittäjiä tekemään tulevista verkkosovelluksistaan ​​mahtavia ...

Direktiivit

Direktiivit ovat yksi AngularJS: n tehokkaimmista ja vakuuttavimmista ominaisuuksista. Niiden avulla voit laajentaa HTML-koodiasi, ja AngularJS käyttää niitä kytkemään toimintansa sivulle. Niiden avulla voit määrittää mukautettuja ja uudelleenkäytettäviä HTML-tunnisteita, joita voidaan käyttää DOM-määritteiden manipulointiin ja tiettyjen elementtien käyttäytymisen hallintaan. Kaikkien direktiivien edessä on ng-, jotka on suunniteltu erillisiksi elementeiksi erillään MVC-sovelluksestasi, ja ne on sijoitettu HTML-määritteisiin.



Jotkut merkittävistä AngularJS-direktiiveistä ovat:

  • ng-app: Tämä direktiivi kertoo kulmalle, mistä aktivoida. Jos haluat määrittää sivun kulmasovellukseksi, sinun on käytettävä yksinkertaista koodia:.
  • ng-bind: Tämä direktiivi kehottaa Angularia muuttamaan HTML-elementin tekstisisällön annetun lausekkeen arvolla ja päivittämään tekstin, kun lausekkeen arvo muuttuu.
  • ng-malli: Se on hyvin samanlainen kuin ng-bind, mutta sitoo näkymän malliin, jota muut direktiivit, kuten valinta, tekstialue tai syöttö vaativat.
  • ng-luokka: Sallii luokan määritteiden dynaamisen lataamisen.
  • ng-controller: Tämän direktiivin avulla voit määrittää JavaScript-ohjainluokan HTML-lausekkeiden arvioimiseksi.
  • ng-repeat: Se silmukkaa vaivattomasti kohteen, jolle annettu silmukkamuuttuja on asetettu, läpi kokoelmassa.
  • ng-hide ja ng-show: Boolen lausekkeen arvoa käyttämällä tämä direktiivi päättää, näytetäänkö elementti vai ei.
  • ngIf: Se on peruslausekedirektiivi, joka sallii käännetyn elementin kloonin lisäämisen DOM: iin, jos ehdot täyttyvät. Jos ehto on väärä, se poistaa elementin DOM: sta.

Seuraava on esimerkki direktiivistä, joka kuuntelee tapahtumaa ja päivittää sen $ -ulottuvuutta.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

Tätä mukautettua direktiiviä voidaan käyttää seuraavasti:

kuinka olla lasten kirjojen kuvittaja

Kaksisuuntainen tietojen sitominen

Tietojen sitominen on todennäköisesti AngularJS: n hallitsevin ja merkittävin piirre. Se säästää kehittäjiä kirjoittamasta huomattavan määrän koodia vähentämällä suurta taakkaa palvelimen taustalla. Tyypillisessä verkkosovelluksessa 80% koodipohjasta on omistettu DOM: n manipulointiin, liikkumiseen ja kuunteluun. Tietojen sitominen tekee koodista näkymättömän, joten voit keskittyä muihin sovelluksen tärkeisiin asioihin.

Perinteisesti useimmilla mallijärjestelmillä on yksisuuntainen tiedonsiirto: ne yhdistävät malli- ja mallikomponentit yhteen näkymään. Yhdistämisen jälkeen mallin muutokset eivät näy automaattisesti näkymässä. Näiden muutosten huomioon ottamiseksi kehittäjän on käsiteltävä manuaalisesti DOM-elementtejä ja määritteitä. Tämä prosessi muuttuu monimutkaisemmaksi ja hankalammaksi, kun käyttäjä tekee muutoksia näkymään. Koska kehittäjän on sitten tulkittava vuorovaikutukset, yhdistettävä ne malliin ja päivitettävä näkymä.

Yksisuuntainen tiedonsiirtokaavio

Kuva: http://docs.angularjs.org

Sen sijaan AngularJS tekee datan sitomisen paremmin ja eri tavalla käsittelemällä tietojen synkronointia mallin ja DOM: n välillä ja päinvastoin.

Kaksisuuntainen tiedonsiirtokaavio

Kuva: http://docs.angularjs.org

Seuraava on yksinkertainen esimerkki, jossa selitetään panosarvon sitoutuminen

tag.

Name:

Hello, {{yourName}}!

Riippuvuuden injektio

AngularJS: ssä on sisäänrakennettu injektorialijärjestelmä, jonka avulla kehittäjien on helppo kehittää, ymmärtää ja testata sovelluksia. AngularJS: n riippuvuusinjektio on vastuussa komponenttien luomisesta, käsittelemisestä siitä, miten he saavat hallintaansa riippuvuutensa, ja asettamalla ne muiden komponenttien saataville pyydettäessä.

Hyödyntämällä riippuvuusinjektiota AngularJS tuo perinteiset palvelinpuolen palvelut asiakaspuolen verkkosovelluksiin, mikä vähentää taustalla olevaa taakkaa ja tekee verkkosovelluksesta paljon kevyempää.

Jos haluat saada pääsyn AngularJS-ydinpalveluihin, sinun on lisättävä tietty palvelu parametrina. AngularJS huomaa automaattisesti, että haluat käyttää kyseistä palvelua, ja tekee ilmentymän saataville.



function EditCtrl($scope, $location, $routeParams) { // Write something here... }

Tämän lisäksi voit määrittää omat mukautetut palvelusi ja tehdä niistä injektoitavaksi.

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

Mallit

AngularJS: ssä malli kirjoitetaan HTML: llä, joka sisältää kulmakohtaisia ​​määritteitä ja elementtejä. Yhdistämällä mallin ohjaimen ja mallin tietoihin AngularJS tekee dynaamisen näkymän selaimissa.

Alla on kulmalliset elementit ja määritteet, joita voidaan käyttää:

  • Suodatin: Tämä elementti tekee tietojen muotoilun näytettäväksi.
  • Lomakkeen ohjausobjektit: Sitä käytetään käyttäjän syötteen vahvistamiseen.
  • Merkinnät: Voit sitoa lausekkeet elementteihin käyttämällä kaksinkertaista kiharaa ainesosamerkintää {{}}.
  • Direktiivi: Elementti tai attribuutti, joka tekee uudelleenkäytettävän DOM-komponentin tai pidentää olemassa olevaa DOM-elementtiä.

Alla annettu koodi näyttää mallin, joka sisältää direktiivejä ja merkintöjä:

kova kotelo macbook pro 15 verkkokalvo
{{buttonText}}

Tyypillisessä sovelluksessa mallissa on CSS-, HTML- ja Angular-ohjeet yhdessä HTML-tiedostossa (yleensä index.html).

Testaus

Koska JavaScript on dynaaminen ja tulkittu suurella ilmaisuvoimalla, mutta ei vie melkein mitään apua kääntäjältä. Siksi AngularJS-tiimi ymmärtää hyvin, että minkä tahansa JavaScript-koodin täytyy käydä läpi joukko vakavia testejä. Joten he ovat suunnitelleet AngularJS: n alusta asti testattavaksi, mikä tekee verkkosovellusten testaamisesta mahdollisimman helppoa.

AngularJS hyödyntää täysin riippuvuusinjektioita, mukana on pilkkuja ja kannustaa käyttäytymisnäkymien erottamiseen. End-to-end-testausta varten AngularJS: llä on end-to-end-juoksija, nimeltään Protractor, joka ymmärtää AngularJS: n sisäisen toiminnan testihiutaleiden poistamiseksi ja simuloi käyttäjien vuorovaikutusta sovelluksesi kanssa.

Toinen tyyppinen testi AngularJS: ssä on Yksikkötesti, jonka avulla voit testata yksittäisiä koodiyksiköitä. Lisäksi Angular-tiimi rakensi myös nimisen Chrome-laajennuksen KulmikasJS Batarang , jonka avulla kehittäjät voivat helposti havaita suorituskyvyn pullonkaulat ja antaa heille virheenkorjata sovelluksensa selaimessa.

Ajeet Yadav on ammattimainen web-kehittäjä wordpressintegration.com , maineikkaan verkkokehitysyritys, joka tarjoaa korkealaatuisen Photoshop-WordPress-teeman / mallin muuntopalvelun. Seuraa @Wordpress_INT Twitterissä.