).scope() on itse asiassa melko monimutkainen. Se on kuitenkin syytä lukea, koska hilpeät varoitukset korvaavat sen.

Yleinen virhe # 15: Ei luota automaatioon tai vedota siihen liikaa

Jos seuraat etupään kehityksen suuntauksia ja olet hieman laiska - kuten minä - yrität luultavasti tehdä kaikkea käsin. Kaikkien riippuvuuksien seuranta, tiedostosarjojen käsittely eri tavoin, selaimen lataaminen uudelleen jokaisen tiedoston tallentamisen jälkeen - kehittämisessä on paljon muutakin kuin vain koodaus.

Joten saatat käyttää boweria ja ehkä npm riippuen siitä, miten palvelet sovellustasi. On mahdollista, että saatat käyttää mölyä, nielua tai brunssia. Tai bash, mikä on myös siistiä. Itse asiassa olet ehkä aloittanut viimeisimmän projektisi jollakin Yeoman-generaattorilla!

Tämä johtaa kysymykseen: ymmärrätkö koko prosessin siitä, mitä infrastruktuurisi todella tekee? Tarvitsetko mitä sinulla on, varsinkin jos vietit vain tunteja yrittäessäsi korjata yhteyden verkkopalvelimen maksan lataustoiminnot?

Ota hetki arvioidaksesi mitä tarvitset. Kaikki nuo työkalut ovat täällä vain auttamaan sinua, niiden käytöstä ei ole muuta palkintoa. Kokeneempien kehittäjien kanssa, joiden kanssa puhun, on tapana yksinkertaistaa asioita.

Yleinen virhe # 16: Laitteen testien suorittamatta jättäminen TDD-tilassa

Testit eivät tee koodistasi vapaita AngularJS -virheilmoituksia. He tekevät sen, että tiimisi ei törmää regressioongelmiin koko ajan.

Kirjoitan tässä yksikkötesteistä etkä siksi, että mielestäni ne olisivat tärkeämpiä kuin e2e-testit, vaan siksi, että ne suoritetaan paljon nopeammin. Minun on myönnettävä, että prosessi, jota aion kuvata, on erittäin miellyttävä.

Test Driven Development toteutuksena mm. gulp-karma-juoksija, pohjimmiltaan suorittaa kaikki yksikötestisi jokaisella tallennetulla tiedostolla. Oma suosikkini tapa kirjoittaa testejä on, että kirjoitan ensin tyhjät vakuutukset:

angular.reloadWithDebugInfo()

Sen jälkeen kirjoitan tai korjaan todellisen koodin, palaan sitten testeihin ja täytän vakuutukset todellisella testikoodilla.

TDD-tehtävän suorittaminen päätelaitteessa nopeuttaa prosessia noin 100%. Yksikkötestit suoritetaan muutamassa sekunnissa, vaikka sinulla olisi niitä paljon. Tallenna vain testitiedosto, ja juoksija noutaa sen, arvioi testisi ja antaa palautetta välittömästi.

E2e-testien avulla prosessi on paljon hitaampi. Minun neuvoni - jakaa e2e-testit testipaketeiksi ja suorita vain yksi kerrallaan. Mittalaite tukee heitä, ja alla on koodi, jota käytän testitehtävissä (pidän ryypystä).

var injector = $(document.body).injector(); var someService = injector.get('someService');

Yleinen virhe # 17: Käytettävien työkalujen käyttämättä jättäminen

A - kromin rikkoutumispisteet

Chromen kehitystyökalujen avulla voit osoittaa mihin tahansa selaimeen ladattujen tiedostojen tiettyyn paikkaan, keskeyttää koodin suorittamisen siinä vaiheessa ja antaa sinun olla vuorovaikutuksessa kaikkien siitä hetkestä saatavien muuttujien kanssa. Se on paljon! Tämä toiminto ei vaadi koodin lisäämistä ollenkaan, kaikki tapahtuu dev-työkaluissa.

Paitsi että pääset kaikkiin muuttujiin, näet myös puhelupinon, tulostuspinon jäljet ​​ja paljon muuta. Voit jopa määrittää sen toimimaan pienennettyjen tiedostojen kanssa. Lue siitä tässä .

On muita tapoja saada samanlainen ajonaikainen käyttöoikeus, esim. lisäämällä Ng-init puhelut. Mutta raja-arvot ovat kehittyneempiä.

AngularJS: n avulla voit myös käyttää laajuutta DOM-elementtien kautta (kunhan ng-if on käytössä) ja injektoida käytettävissä olevia palveluita konsolin kautta. Harkitse seuraavia konsolissa:

ng-repeat

tai osoita tarkastajan elementtiä ja sitten:

var ngInitDirective = ngDirective({ priority: 450, compile: function() { return { pre: function(scope, element, attrs) { scope.$eval(attrs.ngInit); } }; } });

Vaikka debugInfo ei ole käytössä, voit tehdä seuraavaa:

var ngShowDirective = ['$animate', function($animate) { return { restrict: 'A', multiElement: true, link: function(scope, element, attr) { scope.$watch(attr.ngShow, function ngShowWatchAction(value) { // we're adding a temporary, animation-specific class for ng-hide since this way // we can control when the element is actually displayed on screen without having // to have a global/greedy CSS selector that breaks when other animations are run. // Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845 $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, { tempClasses: NG_HIDE_IN_PROGRESS_CLASS }); }); } }; }];

Ja pidä se saatavilla uudelleenlatauksen jälkeen:

Jos haluat pistää ja olla vuorovaikutuksessa palvelun kanssa konsolista, kokeile:

$watch

B - kromi aikajana

Toinen upea työkalu, joka tulee dev-työkalujen mukana, on aikajana. Tämän avulla voit tallentaa ja analysoida sovelluksesi live-esityksen käytön aikana. Tulos näyttää muun muassa muistin käytön, kehysnopeuden ja prosessorin leikkaamisen: lataus, komentosarjat, renderointi ja maalaus.

Jos koet, että sovelluksesi suorituskyky heikkenee, voit todennäköisesti löytää syy siihen aikajanan välilehden kautta. Tallenna vain toimintasi, joka johti suorituskykyongelmiin, ja katso mitä tapahtuu. Liian monta katsojaa? Näet keltaiset palkit, jotka vievät paljon tilaa. Muisti vuotaa? Kaaviosta näet kuinka paljon muistia kului ajan myötä.

Yksityiskohtainen kuvaus: https://developer.chrome.com/devtools/docs/timeline

C - sovellusten etätarkastus iOS- ja Android-laitteilla

Jos kehität hybridisovellusta tai reagoivaa verkkosovellusta, voit käyttää laitteesi konsolia, DOM-puuta ja kaikkia muita työkaluja joko Chromen tai Safarin kehitystyökalujen kautta. Siihen sisältyy WebView ja UIWebView.

Käynnistä ensin verkkopalvelin isännällä 0.0.0.0, jotta siihen pääsee paikallisverkostasi. Ota verkkotarkastaja käyttöön asetuksissa. Liitä sitten laite työpöydällesi ja siirry paikalliseen kehityskohteeseesi käyttämällä koneesi ip: tä tavallisen 'paikallisen isännän' sijaan. Se kaikki mitä tarvitsee, laitteesi pitäisi olla nyt käytettävissäsi työpöydän selaimella.

Tässä ovat yksityiskohtaiset ohjeet Androidille. Ja iOS: lle epäviralliset oppaat löytyvät helposti Googlen kautta.

Minulla oli äskettäin hienoja kokemuksia browserSync . Se toimii samalla tavalla kuin maksan lataus, mutta se myös tosiasiallisesti synkronoi kaikki selaimet, jotka katselevat samaa sivua browserSyncin kautta. Tähän sisältyy käyttäjien vuorovaikutus, kuten vieritys, painikkeiden napsauttaminen jne. Katselin iOS-sovelluksen lokilähtöä samalla, kun hallitsin iPadin sivua työpöydältäni. Se toimi hienosti!

Yleinen virhe # 18: Lähdekoodin lukematta jättäminen NG-INIT-esimerkissä

// when in doubt, comment it out! :) : n pitäisi sen äänen mukaan olla samanlainen kuin

|_+_|
ja
|_+_|
, eikö? Mietitkö koskaan, miksi asiakirjoissa on kommentti, että sitä ei pitäisi käyttää? IMHO, mikä oli yllättävää! Odotan, että direktiivi alustaa mallin. Sitä se myös tekee, mutta ... se toteutetaan eri tavalla, eli se ei seuraa attribuutin arvoa. Sinun ei tarvitse selata AngularJS-lähdekoodia - haluan tuoda sen sinulle:

|_+_|

Vähemmän kuin voit odottaa? Melko luettava, hankalan direktiivisyntaksin lisäksi, eikö olekin? Kuudes rivi on kyse siitä.

Vertaa sitä ng-show:

|_+_|

Jälleen kuudes rivi. Siellä on

|_+_|
siellä tämä tekee tästä direktiivistä dynaamisen. AngularJS-lähdekoodissa suuri osa koodista on kommentteja, jotka kuvaavat koodia, joka oli enimmäkseen luettavissa alusta alkaen. Uskon, että se on hieno tapa oppia AngularJS: stä.

Johtopäätös

Tämä yleisimmät AngularJS-virheet kattava opas on melkein kaksi kertaa pidempi kuin muut oppaat. Se kävi niin luonnollisesti. Korkealaatuisten JavaScript-käyttöliittymien kysyntä on erittäin korkea. KulmaJS on niin kuuma juuri nyt , ja sillä on ollut vakaa asema suosituimpien kehitystyökalujen joukossa muutaman vuoden ajan. Kun AngularJS 2.0 on matkalla, se todennäköisesti hallitsee tulevina vuosina.

Etupään kehityksessä on hienoa, että se on erittäin palkitsevaa. Työmme näkyy heti, ja ihmiset ovat vuorovaikutuksessa suoraan toimittamiemme tuotteiden kanssa. Oppimiseen käytetty aika JavaScript , ja mielestäni meidän tulisi keskittyä JavaScript-kieleen, on erittäin hyvä sijoitus. Se on Internetin kieli. Kilpailu on erittäin vahvaa! Meille on yksi painopiste - käyttökokemus. Menestyäkseen meidän on katettava kaikki.

Näissä esimerkeissä käytetty lähdekoodi voidaan ladata osoitteesta GitHub . Voit vapaasti ladata sen ja tehdä siitä oman.

Halusin antaa hyvityksiä neljälle julkaisukehittäjälle, jotka inspiroivat minua eniten:

Halusin myös kiittää kaikkia FreeNode #angularjs- ja #javascript-kanavien hienoja ihmisiä monista erinomaisista keskusteluista ja jatkuvasta tuesta.

Ja lopuksi, muista aina:

|_+_|