).scope() er faktisk ganske komplisert. Det er likevel verdt å lese, da de morsomme advarslene kompenserer for det.

Vanlig feil nr. 15: Ikke å stole på automatisering eller å stole på det for mye

Hvis du følger trendene innen frontend-utvikling og er litt lat - som meg - så prøver du sannsynligvis ikke å gjøre alt for hånd. Å holde oversikt over alle avhengighetene dine, behandle sett med filer på forskjellige måter, laste nettleseren på nytt etter hver filsparing - det er mye mer å utvikle enn bare koding.

Så du bruker kanskje bower, og kanskje npm, avhengig av hvordan du betjener appen din. Det er en sjanse for at du bruker grunt, gulp eller brunsj. Eller bash, som også er kult. Faktisk har du kanskje startet ditt siste prosjekt med en Yeoman-generator!

Dette fører til spørsmålet: forstår du hele prosessen med hva infrastrukturen din egentlig gjør? Trenger du det du har, spesielt hvis du nettopp har brukt timer på å fikse tilkoblingswebserverens levereload-funksjonalitet?

Ta et sekund å vurdere hva du trenger. Alle disse verktøyene er bare her for å hjelpe deg, det er ingen annen belønning for å bruke dem. De mer erfarne utviklerne jeg snakker med, pleier å forenkle ting.

Vanlig feil nr. 16: Ikke kjører enheten Tester i TDD-modus

Tester vil ikke gjøre koden din fri for AngularJS feilmeldinger. Det de vil gjøre er å forsikre seg om at teamet ditt ikke støter på regresjonsproblemer hele tiden.

Jeg skriver spesifikt om enhetstester her, ikke fordi jeg føler at de er viktigere enn e2e-tester, men fordi de utfører mye raskere. Jeg må innrømme at prosessen jeg skal beskrive er veldig behagelig.

Test Driven Development som en implementering for f.eks. gulp-karma runner, kjører i utgangspunktet alle enhetstestene dine på hver filsparing. Min favoritt måte å skrive tester på er, jeg skriver bare tomme forsikringer først:

angular.reloadWithDebugInfo()

Etter det skriver jeg eller omformer den faktiske koden, så kommer jeg tilbake til testene og fyller ut forsikringene med faktisk testkode.

Å ha en TDD-oppgave som kjører i en terminal, fremskynder prosessen med omtrent 100%. Enhetstester utføres i løpet av få sekunder, selv om du har mange av dem. Bare lagre testfilen, så løper den den, vurderer testene dine og gir tilbakemelding umiddelbart.

Med e2e-tester er prosessen mye tregere. Mitt råd - del e2e-tester opp i testsuiter og bare kjør en om gangen. Vinkelmåler har støtte for dem, og nedenfor er koden jeg bruker til testoppgavene mine (jeg liker gulp).

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

Vanlig feil nr. 17: Bruker ikke tilgjengelige verktøy

A - krombruddpunkter

Med Chrome-utviklingsverktøy kan du peke på et bestemt sted i hvilken som helst av filene som er lastet inn i nettleseren, pause kodeutførelsen på det tidspunktet, og la deg samhandle med alle variablene som er tilgjengelige fra det punktet. Det er mye! Den funksjonaliteten krever ikke at du legger til noen kode i det hele tatt, alt skjer i dev-verktøyene.

Ikke bare får du tilgang til alle variablene, du ser også anropstakken, utskriftsstakespor og mer. Du kan til og med konfigurere den til å fungere med minifiserte filer. Les om det her .

Det er andre måter du kan få lignende kjøretidstilgang på, f.eks. ved å legge til Ng-init ringer. Men breakpoints er mer sofistikerte.

AngularJS lar deg også få tilgang til omfanget gjennom DOM-elementer (så lenge ng-if er aktivert), og injisere tilgjengelige tjenester gjennom konsollen. Vurder følgende i konsollen:

ng-repeat

eller pek på et element i inspektøren, og deretter:

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

Selv om debugInfo ikke er aktivert, kan du gjøre:

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 }); }); } }; }];

Og ha den tilgjengelig etter omlasting:

For å injisere og samhandle med en tjeneste fra konsollen, prøv:

$watch

B - krom tidslinje

Et annet flott verktøy som følger med dev-verktøy er tidslinjen. Dette gjør at du kan registrere og analysere appens live ytelse mens du bruker den. Utgangen viser blant annet minnebruk, bildefrekvens og disseksjon av de forskjellige prosessene som okkuperer CPU: lasting, skripting, gjengivelse og maling.

Hvis du opplever at ytelsen til appen din forringes, vil du mest sannsynlig kunne finne årsaken til det gjennom tidslinjefanen. Bare registrer dine handlinger som førte til ytelsesproblemer og se hva som skjer. For mange seere? Du vil se gule søyler som tar mye plass. Minne lekker? Du kan se hvor mye minne som ble brukt over tid på en graf.

En detaljert beskrivelse: https://developer.chrome.com/devtools/docs/timeline

C - Inspisere apper eksternt på iOS og Android

Hvis du utvikler en hybridapp eller en responsiv nettapp, kan du få tilgang til enhetens konsoll, DOM-treet og alle andre verktøy som er tilgjengelige, enten gjennom Chrome eller Safari dev-verktøy. Det inkluderer WebView og UIWebView.

Start først webserveren din på vert 0.0.0.0 slik at den er tilgjengelig fra ditt lokale nettverk. Aktiver nettinspektør i innstillingene. Koble deretter enheten til skrivebordet ditt og få tilgang til din lokale utviklingsside ved å bruke maskinens ip i stedet for den vanlige 'localhost'. Det er alt som trengs, enheten din skal nå være tilgjengelig for deg fra nettleseren på skrivebordet.

Her er detaljerte instruksjoner for Android. Og for iOS er uoffisielle guider lett å finne gjennom google.

Jeg har nylig hatt en kul opplevelse med browserSync . Det fungerer på samme måte som leverbelastning, men det synkroniserer også faktisk alle nettlesere som ser på den samme siden gjennom browserSync. Dette inkluderer brukerinteraksjon som å bla, klikke på knapper osv. Jeg så på loggutgangen til iOS-appen mens jeg kontrollerte siden på iPad fra skrivebordet mitt. Det fungerte fint!

Vanlig feil nr. 18: Leser ikke kildekoden på NG-INIT-eksemplet

// when in doubt, comment it out! :) , fra lyden av den, skal være lik

|_+_|
og
|_+_|
, ikke sant? Har du noen gang lurt på hvorfor det er en kommentar i dokumentene om at den ikke skal brukes? IMHO det var overraskende! Jeg forventer at direktivet skal initialisere en modell. Det er også det den gjør, men ... den er implementert på en annen måte, det vil si at den ikke ser på attributtverdien. Du trenger ikke å bla gjennom AngularJS-kildekoden - la meg ta den med deg:

|_+_|

Mindre enn du forventer? Ganske leselig, i tillegg til den vanskelige direktivsyntaksen, er det ikke? Den sjette linjen er hva det handler om.

Sammenlign det med ng-show:

|_+_|

Igjen, den sjette linjen. Det er et

|_+_|
der, det er det som gjør dette direktivet dynamisk. I AngularJS-kildekoden er en stor del av all koden kommentarer som beskriver kode som for det meste var lesbar fra begynnelsen. Jeg tror det er en fin måte å lære om AngularJS.

Konklusjon

Denne guiden som dekker de vanligste AngularJS-feilene, er nesten dobbelt så lang som de andre guidene. Det ble naturlig slik. Etterspørselen etter JavaScript-frontingeniører av høy kvalitet er veldig høy. AngularJS er så varmt akkurat nå , og den har hatt en stabil posisjon blant de mest populære utviklingsverktøyene i noen år. Med AngularJS 2.0 på vei vil den trolig dominere i årene som kommer.

Det som er bra med front-end-utvikling er at det er veldig givende. Arbeidet vårt er synlig umiddelbart, og mennesker kommuniserer direkte med produktene vi leverer. Tiden brukt på læring JavaScript , og jeg mener vi bør fokusere på JavaScript-språket, er en veldig god investering. Det er språket på Internett. Konkurransen er super sterk! Det er ett fokus for oss - brukeropplevelse. For å lykkes, må vi dekke alt.

Kildekoden som brukes i disse eksemplene, kan lastes ned fra GitHub . Last den gjerne ned og lag den til din egen.

Jeg ønsket å gi studiepoeng til fire publiseringsutviklere som inspirerte meg mest:

Jeg ønsket også å takke alle de flotte menneskene på FreeNode #angularjs og #javascript-kanaler for mange gode samtaler og kontinuerlig støtte.

Og til slutt, husk alltid:

|_+_|