).scope() je v skutočnosti dosť zložitý. Napriek tomu stojí za prečítanie, pretože to vynahradzujú veselé varovania.

Bežná chyba č. 15: Nespoliehajte sa na automatizáciu alebo sa na ňu príliš nespoliehajte

Ak sledujete trendy v rámci frontend vývoja a ste trochu leniví - ako ja -, potom sa pravdepodobne pokúsite neurobiť všetko ručne. Sledovanie všetkých vašich závislostí, rôzne spracovanie súborov, opätovné načítanie prehliadača po každom uložení súboru - vo vývoji je oveľa viac ako len programovanie.

Možno teda používate altánok a možno npm podľa toho, ako slúžite svojej aplikácii. Je pravdepodobné, že používate grunt, hlt alebo brunch. Alebo bash, ktorý je tiež v pohode. V skutočnosti ste možno začali svoj najnovší projekt pomocou nejakého generátora Yeoman!

To vedie k otázke: rozumiete celému procesu toho, čo vaša infraštruktúra skutočne robí? Potrebujete to, čo máte, najmä ak ste práve strávili hodiny pokusom o opravu funkčnosti živého načítania pripojeného webového servera?

Na chvíľu si zvážte, čo potrebujete. Všetky tieto nástroje sú tu len na to, aby vám pomohli, za ich použitie nie je iná odmena. Skúsenejší vývojári, s ktorými sa rozprávam, majú tendenciu veci zjednodušovať.

Bežná chyba č. 16: Nespúšťanie testov jednotky v režime TDD

Testy nezbavia váš kód chybových správ AngularJS. To, čo urobia, je zabezpečiť, aby váš tím nenarážal na problémy s regresiou stále.

Tu píšem konkrétne o jednotkových testoch, nie preto, že by sa mi zdalo, že sú dôležitejšie ako testy e2e, ale preto, že sa vykonávajú oveľa rýchlejšie. Musím uznať, že proces, ktorý sa chystám popísať, je veľmi príjemný.

Test Driven Development ako implementácia pre napr. gulp-karma runner, v podstate spúšťa všetky vaše jednotkové testy pri každom uložení súboru. Môj obľúbený spôsob písania testov je, že najskôr napíšem iba prázdne ubezpečenia:

angular.reloadWithDebugInfo()

Potom napíšem alebo prehodnotím skutočný kód, potom sa vrátim k testom a vyplním ubezpečenia skutočným testovacím kódom.

Spustenie úlohy TDD v termináli urýchľuje proces asi o 100%. Testy jednotiek sa vykonajú v priebehu niekoľkých sekúnd, aj keď ich máte veľa. Stačí uložiť testovací súbor a bežec ho vyzdvihne, vyhodnotí vaše testy a okamžite poskytne spätnú väzbu.

Pri testoch e2e je proces oveľa pomalší. Moja rada - rozdelte testy e2e na testovacie sady a spustite iba jeden po druhom. Protractor ich podporuje a nižšie uvádzam kód, ktorý používam pri svojich testovacích úlohách (mám rád hlt).

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

Bežná chyba č. 17: Nepoužívanie dostupných nástrojov

A - hraničné body chrómu

Nástroje prehliadača Chrome pre vývojárov vám umožňujú ukazovať na konkrétne miesto v ľubovoľnom zo súborov načítaných do prehliadača, pozastaviť vykonávanie kódu v danom okamihu a umožniť vám pracovať so všetkými premennými dostupnými od daného bodu. To je veľa! Táto funkcionalita nevyžaduje, aby ste pridávali akýkoľvek kód, všetko sa deje v nástrojoch dev.

Nielen, že získate prístup ku všetkým premenným, uvidíte aj zásobník hovorov, stopy zásobníka tlače a ďalšie. Môžete si ho dokonca nakonfigurovať tak, aby fungoval aj so zmenenými súbormi. Prečítajte si o tom tu .

Existujú aj iné spôsoby, ako môžete získať podobný prístup za behu, napr. pridaním Ng-init hovory. Hraničné body sú ale zložitejšie.

AngularJS vám tiež umožňuje prístup k rozsahu prostredníctvom prvkov DOM (ak je ng-if povolené) a vkladanie dostupných služieb cez konzolu. V konzole zvážte toto:

ng-repeat

alebo ukážte na prvok v inšpektorovi a potom:

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

Aj keď debugInfo nie je povolený, môžete robiť:

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

A mať ho k dispozícii po opätovnom načítaní:

Ak chcete vstúpiť a pracovať so službou z konzoly, skúste:

$watch

B - časová os chrómu

Ďalším skvelým nástrojom, ktorý je súčasťou nástrojov pre vývojárov, je časová os. To vám umožní zaznamenávať a analyzovať živé vystúpenie vašej aplikácie pri jej používaní. Výstup zobrazuje okrem iného využitie pamäte, rýchlosť snímkovania a disekciu rôznych procesov, ktoré zaberajú CPU: načítanie, skriptovanie, vykreslenie a maľovanie.

Ak narazíte na to, že sa výkon vašej aplikácie zhoršuje, s najväčšou pravdepodobnosťou budete môcť na karte časovej osi zistiť príčinu tohto problému. Stačí zaznamenať vaše kroky, ktoré viedli k problémom s výkonom, a zistiť, čo sa stane. Príliš veľa pozorovateľov? Uvidíte žlté pruhy, ktoré zaberajú veľa miesta. Úniky pamäte? Na grafe môžete vidieť, koľko pamäte sa časom spotrebovalo.

Podrobný popis: https://developer.chrome.com/devtools/docs/timeline

C - vzdialená kontrola aplikácií v systéme iOS a Android

Ak vyvíjate hybridnú aplikáciu alebo responzívnu webovú aplikáciu, máte prístup ku konzole zariadenia, stromu DOM a všetkým ostatným nástrojom dostupným buď prostredníctvom vývojárskych nástrojov prehliadača Chrome alebo Safari. To zahŕňa WebView a UIWebView.

Najskôr spustite webový server na hostiteľovi 0.0.0.0, aby bol prístupný z miestnej siete. V nastaveniach povoliť webového inšpektora. Potom pripojte zariadenie k pracovnej ploche a prejdite na stránku miestneho rozvoja pomocou protokolu IP vášho zariadenia namiesto bežného „localhost“. To je všetko, čo potrebujete, aby vaše zariadenie malo byť dostupné v prehliadači vašej pracovnej plochy.

Tu sú podrobné pokyny pre Android A pre iOS nájdete neoficiálnych sprievodcov ľahko cez google.

Nedávno som mal nejaké super skúsenosti s browserSync . Funguje to podobne ako pri živom načítaní, ale tiež sa v ňom skutočne synchronizujú všetky prehľadávače, ktoré si tú istú stránku prezerajú prostredníctvom prehliadača browserSync. Zahŕňa to interakciu používateľa, ako je posúvanie, klikanie na tlačidlá atď. Pri kontrole stránky na iPade z pracovnej plochy som sa díval na výstup protokolu aplikácie pre iOS. Fungovalo to pekne!

Bežná chyba č. 18: Nečítanie zdrojového kódu v príklade NG-INIT

// when in doubt, comment it out! :) by malo byť podobné ako

|_+_|
a
|_+_|
, nie? Zaujímalo vás niekedy, prečo je v dokumentoch komentár, že by sa nemal používať? IMHO to bolo prekvapujúce! Očakával by som, že smernica inicializuje model. Aj to robí, ale ... implementuje sa to iným spôsobom, to znamená, že nesleduje hodnotu atribútu. Nemusíte prechádzať zdrojový kód AngularJS - dovoľte mi, aby som vám ho priniesol:

|_+_|

Menej, ako by ste čakali? Celkom dobre čitateľné, okrem trápnej direktívnej syntaxe, však? O šiestom riadku ide.

Porovnajte to s ng-show:

|_+_|

Opäť šiesty riadok. K dispozícii je

|_+_|
vďaka tomu je táto smernica dynamická. V zdrojovom kóde AngularJS tvoria veľkú časť celého kódu komentáre, ktoré popisujú kód, ktorý bol väčšinou čitateľný od začiatku. Verím, že je to skvelý spôsob, ako sa dozvedieť o AngularJS.

Záver

Táto príručka pokrývajúca najčastejšie chyby AngularJS je takmer dvakrát tak dlhá ako ostatné príručky. Dopadlo to tak prirodzene. Dopyt po vysoko kvalitných technikoch rozhrania JavaScript je veľmi vysoký. AngularJS je tak horúce práve teraz , a už niekoľko rokov si drží stabilnú pozíciu medzi najobľúbenejšími vývojovými nástrojmi. S AngularJS 2.0 na ceste bude pravdepodobne dominovať ďalšie roky.

Na front-end vývoji je skvelé to, že je veľmi obohacujúci. Naša práca je viditeľná okamžite a ľudia priamo komunikujú s produktmi, ktoré dodávame. Čas strávený učením JavaScript , a myslím si, že by sme sa mali zamerať na jazyk JavaScript, je veľmi dobrá investícia. Je to jazyk internetu. Konkurencia je super silná! Je tu jedno zameranie - užívateľská skúsenosť. Aby sme boli úspešní, musíme pokryť všetko.

Zdrojový kód použitý v týchto príkladoch je možné stiahnuť z GitHub . Pokojne si ho stiahnite a urobte si ho podľa seba.

Chcel som dať kredit štyrom vydavateľským vývojárom, ktorí ma najviac inšpirovali:

Tiež by som sa chcel poďakovať všetkým skvelým ľuďom na kanáloch FreeNode #angularjs a #javascript za veľa vynikajúcich rozhovorov a nepretržitú podporu.

A na záver vždy nezabudnite:

|_+_|