).scope() lähtekood on tegelikult üsna keeruline. Sellest hoolimata tasub seda lugeda, sest lõbusad hoiatused korvavad selle.

Levinud viga nr 15: automatiseerimisele mitte tuginemine või sellele liiga palju toetumine

Kui jälgite esiotsa arendamise suundumusi ja olete natuke laisk - nagu mina -, siis proovite tõenäoliselt mitte kõike teha käsitsi. Kõigi oma sõltuvuste jälgimine, failikomplektide erinev töötlemine, brauseri uuesti laadimine pärast iga faili salvestamist - arendamine on palju muud kui lihtsalt kodeerimine.

Nii et võite kasutada boweri ja võib-olla ka npm olenevalt sellest, kuidas oma rakendust teenite. On tõenäoline, et kasutate nurinat, sõõmu või brunchi. Või bash, mis on ka lahe. Tegelikult võite olla alustanud oma viimast projekti mõne Yeomani generaatoriga!

See viib küsimuseni: kas mõistate kogu protsessi, mida teie infrastruktuur tegelikult teeb? Kas vajate seda, mis teil on, eriti kui veetsite lihtsalt tunde oma veebiserveri ühenduse loomise maksakoormuse parandamiseks?

Võtke hetk, et hinnata, mida vajate. Kõik need tööriistad on siin ainult teie abistamiseks, nende kasutamise eest pole muud tasu. Kogenumad arendajad, kellega räägin, kipuvad asju lihtsustama.

Levinud viga nr 16: seadme katseid ei käivitata TDD-režiimis

Testid ei vabasta teie koodi AngularJS veateadetest. Mida nad teevad, on kinnitada, et teie meeskonnal pole pidevalt regressiooniprobleeme.

Kirjutan siin konkreetselt ühikutestidest mitte sellepärast, et tunneksin, et need on olulisemad kui e2e testid, vaid seetõttu, et need sooritatakse palju kiiremini. Pean tunnistama, et protsess, mida kirjeldan, on väga meeldiv.

Testpõhine arendus rakendusena nt. gulp-karma jooksja, käivitab põhimõtteliselt kõik teie üksuse testid iga faili salvestamise korral. Minu lemmikviis testide kirjutamiseks on see, et kirjutan kõigepealt tühjad kinnitused:

angular.reloadWithDebugInfo()

Pärast seda kirjutan või refrakteerin tegeliku koodi, siis tulen testide juurde tagasi ja täidan kinnitused tegeliku testkoodiga.

Kui terminalis töötab TDD-ülesanne, kiirendab see protsessi umbes 100%. Üksustestid viiakse läbi mõne sekundi jooksul, isegi kui teil on neid palju. Salvestage lihtsalt testfail ja jooksja võtab selle kätte, hindab teie teste ja annab koheselt tagasisidet.

E2e testidega on protsess palju aeglasem. Minu nõuanne - jagage e2e testid testikomplektideks ja käivitage lihtsalt ükshaaval. Protraktoril on neile tugi ja allpool on kood, mida kasutan oma testiülesannete täitmiseks (mulle meeldib sõõm).

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

Levinud viga nr 17: saadaolevate tööriistade mittekasutamine

A - kroomi murdepunktid

Chrome'i arendustööriistad võimaldavad teil näidata suvalisse brauserisse laaditud faili kindlat kohta, peatada koodi täitmise ja lubada teil suhelda kõigi sellest hetkest saadaolevate muutujatega. Seda on palju! See funktsionaalsus ei nõua teilt üldse koodi lisamist, kõik toimub arendustööriistades.

Lisaks sellele, et pääsete juurde kõigile muutujatele, näete ka kõnepinu, prindivirna jälgi ja muud. Võite selle isegi seadistada töötama minimeeritud failidega. Loe sellest siin .

Sarnase käitusajaga juurdepääsu saamiseks on muid võimalusi, nt lisades Ng-init kõned. Kuid murdepunktid on keerukamad.

Samuti võimaldab AngularJS juurdepääsu ulatusele DOM-elementide kaudu (kui ng-if on lubatud) ja süstida saadaolevaid teenuseid konsooli kaudu. Kaaluge konsoolis järgmist:

ng-repeat

või osutage inspektori elemendile ja seejärel:

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

Isegi kui debugInfo pole lubatud, saate teha järgmist.

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 olge see pärast uuesti laadimist saadaval:

Konsooli teenusega süstimiseks ja teenusega suhtlemiseks proovige järgmist.

$watch

B - kroomitud ajaskaala

Teine suurepärane tööriist, mis Dev-tööriistadega kaasas on, on ajaskaala. See võimaldab teil salvestada ja analüüsida oma rakenduse reaalajas esinemist selle kasutamise ajal. Väljund näitab muu hulgas mälukasutust, kaadrisagedust ja protsessori lahutamist: laadimine, skriptimine, renderdamine ja maalimine.

Kui tunnete, et teie rakenduse toimivus halveneb, saate tõenäoliselt selle põhjuse leida ajaskaala vahekaardilt. Salvestage lihtsalt toimingud, mis viisid jõudlusprobleemideni, ja vaadake, mis juhtub. Liiga palju jälgijaid? Näete, et kollased ribad võtavad palju ruumi. Mälu lekib? Graafikult näete, kui palju mälu aja jooksul tarbiti.

Üksikasjalik kirjeldus: https://developer.chrome.com/devtools/docs/timeline

C - rakenduste kaugülevaatus iOS-is ja Androidis

Kui arendate hübriidrakendust või tundlikku veebirakendust, pääsete juurde oma seadme konsoolile, DOM-puule ja kõigile muudele tööriistadele, mis on saadaval kas Chrome'i või Safari arendustööriistade kaudu. See hõlmab WebView ja UIWebView.

Kõigepealt käivitage veebiserver hostis 0.0.0.0, nii et see oleks juurdepääsetav teie kohalikust võrgust. Luba seadetes veebiinspektor. Seejärel ühendage oma seade töölauaga ja pöörduge kohaliku arenduslehe juurde, kasutades tavalise „localhost” asemel oma arvuti ip-d. See on kõik, mis selleks vaja on, teie seade peaks nüüd olema teile töölaua brauseris saadaval.

Siin on üksikasjalikud juhised Androidile. iOS-i jaoks on mitteametlikud juhendid leitavad hõlpsalt google'i kaudu.

Mul oli hiljuti äge kogemus browserSync . See töötab sarnaselt maksa laadimisega, kuid tegelikult sünkroonib ka kõiki brausereid, mis vaatavad sama lehte browserSynci kaudu. See hõlmab kasutajate suhtlemist, näiteks kerimist, nuppudel klõpsamist jne. Vaatasin iOS-i rakenduse logiväljundit, kontrollides samal ajal oma töölaualt iPadi lehte. See toimis kenasti!

Levinud viga nr 18: NG-INIT näite lähtekoodi lugemata jätmine

// when in doubt, comment it out! :) selle heli järgi peaks olema sarnane

|_+_|
ja
|_+_|
, eks? Kas olete kunagi mõelnud, miks on dokumentides kommentaar, et seda ei tohiks kasutada? IMHO, mis oli üllatav! Ma eeldaksin, et direktiiv vormistab mudeli. See on ka see, mida ta teeb, kuid ... seda rakendatakse teistmoodi, see tähendab, et see ei jälgi atribuudi väärtust. Teil pole vaja AngularJS-i lähtekoodi sirvida - lubage mul see teile tuua:

|_+_|

Vähem, kui võiks arvata? Täiesti loetav, lisaks ebamugavale direktiivi süntaksile, kas pole? Kuues rida on see, millega on tegemist.

Võrrelge seda ng-showga:

|_+_|

Jällegi kuues rida. On olemas

|_+_|
seal muudab see selle direktiivi dünaamiliseks. AngularJS lähtekoodis on suur osa kogu koodist kommentaarid, mis kirjeldavad koodi, mis oli enamasti algusest peale loetav. Usun, et see on suurepärane viis AngularJS-i tundmaõppimiseks.

Järeldus

See levinumaid AngularJS-vigu kajastav juhend on peaaegu kaks korda pikem kui teised juhendid. Selgus nii loomulikult. Nõudlus kvaliteetsete JavaScripti esiotsa inseneride järele on väga suur. NurgaJS on nii kuum praegu ja sellel on juba paar aastat olnud kõige populaarsemate arendusvahendite seas stabiilne positsioon. Kui AngularJS 2.0 on teel, domineerib see tõenäoliselt veel aastaid.

Esiosa arenduses on suurepärane see, et see on väga tasuv. Meie töö on koheselt nähtav ja inimesed suhtlevad otse meie tarnitavate toodetega. Õppimiseks kulutatud aeg JavaScripti ja ma usun, et peaksime keskenduma JavaScripti keelele, on väga hea investeering. See on Interneti keel. Konkurents on ülitugev! Meie jaoks on üks fookus - kasutajakogemus. Edu saavutamiseks peame kõik kajastama.

Nendes näidetes kasutatud lähtekoodi saab alla laadida GitHub . Laadige see julgelt alla ja tehke see endale.

Tahtsin anda krediiti neljale kirjastuse arendajale, mis mind kõige rohkem inspireerisid:

Samuti tahtsin tänada kõiki suurepäraseid inimesi FreeNode #angularjs ja #javascript kanalites paljude suurepäraste vestluste ja pideva toetuse eest.

Ja lõpuks, pidage alati meeles:

|_+_|