).scope() всъщност е доста сложна. Въпреки това си струва да се прочете, тъй като оживените предупреждения го компенсират.

Често срещана грешка # 15: Не разчитайте на автоматизацията или не разчитайте на нея твърде много

Ако следвате тенденциите в развитието на предния край и сте малко мързеливи - като мен - тогава вероятно се опитвате да не правите всичко на ръка. Проследяване на всички ваши зависимости, обработка на набори от файлове по различни начини, презареждане на браузъра след всяко запазване на файл - има много повече неща за разработване, отколкото просто кодиране.

Така че може да използвате bower и може би npm в зависимост от това как обслужвате приложението си. Има шанс да използвате мрънкане, глътка или закуска. Или баш, което също е готино. Всъщност, може би сте започнали най-новия си проект с някакъв Yeoman генератор!

Това води до въпроса: разбирате ли целия процес на това, което вашата инфраструктура наистина прави? Имате ли нужда от това, което имате, особено ако току-що сте прекарали часове, опитвайки се да поправите функцията за свързване на уеб сървър на живо?

Отделете секунда, за да прецените от какво имате нужда. Всички тези инструменти са само тук, за да ви помогнат, няма друга награда за използването им. По-опитните разработчици, с които говоря, са склонни да опростяват нещата.

Често срещана грешка # 16: Не се изпълняват модулните тестове в режим TDD

Тестовете няма да направят кода ви свободен от съобщения за грешка AngularJS. Това, което те ще направят, е да гарантират, че екипът ви не се сблъсква постоянно с проблеми с регресията.

Тук пиша специално за модулни тестове, не защото смятам, че те са по-важни от e2e тестовете, а защото се изпълняват много по-бързо. Трябва да призная, че процесът, който ще опиша, е много приятен.

Test Driven Development като изпълнение за напр. gulp-karma runner, основно изпълнява всичките ви модулни тестове при всяко записване на файл. Любимият ми начин да пиша тестове е, че първо пиша празни уверения:

angular.reloadWithDebugInfo()

След това пиша или рефакторирам действителния код, след това се връщам към тестовете и попълвам уверенията с действителен тестов код.

Изпълнението на TDD задача в терминал ускорява процеса с около 100%. Единичните тестове се изпълняват за няколко секунди, дори ако имате много от тях. Просто запазете тестовия файл и бегачът ще го вземе, ще оцени вашите тестове и ще предостави незабавна обратна връзка.

При тестовете e2e процесът е много по-бавен. Моят съвет - разделете тестовете e2e на тестови пакети и просто изпълнявайте един по един. Protractor има поддръжка за тях, а по-долу е кодът, който използвам за тестовите си задачи (харесвам глътка).

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

Често срещана грешка # 17: Неизползване на наличните инструменти

A - хромирани точки на прекъсване

Инструментите за разработчици на Chrome ви позволяват да посочите определено място във всеки от файловете, заредени в браузъра, да спрете изпълнението на кода в този момент и да ви позволят да взаимодействате с всички променливи, налични от тази точка. Това е много! Тази функционалност изобщо не изисква да добавяте никакъв код, всичко се случва в инструментите за разработчици.

Не само получавате достъп до всички променливи, но и виждате стека на повикванията, следите от стека на печат и много други. Можете дори да го конфигурирате да работи с умалени файлове. Прочетете за това тук .

Има и други начини, по които можете да получите подобен достъп по време на изпълнение, напр. чрез добавяне на Ng-init обаждания. Но точките на прекъсване са по-сложни.

AngularJS също ви позволява да получите достъп до обхвата чрез DOM елементи (стига да е разрешен ng-if) и да инжектирате наличните услуги през конзолата. Обмислете следното в конзолата:

ng-repeat

или насочете към елемент в инспектора и след това:

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

Дори ако debugInfo не е активиран, можете да направите:

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

И да го има на разположение след презареждане:

За да инжектирате и взаимодействате с услуга от конзолата, опитайте:

как приложенията за запознанства правят пари
$watch

B - хромирана хронология

Друг чудесен инструмент, който идва с инструментите за разработчици, е хронологията. Това ще ви позволи да записвате и анализирате ефективността на приложението си на живо, докато го използвате. Резултатът показва, наред с други, използването на паметта, честотата на кадрите и дисекцията на различните процеси, които заемат процесора: зареждане, скриптове, изобразяване и рисуване.

Ако почувствате, че ефективността на приложението ви се влошава, най-вероятно ще можете да намерите причината за това чрез раздела с времевата линия. Просто запишете действията си, които са довели до проблеми с производителността, и вижте какво се случва. Твърде много наблюдатели? Ще видите жълти ленти, които заемат много място. Изтичане на памет? Можете да видите колко памет е изразходвано с течение на времето на графика.

Подробно описание: https://developer.chrome.com/devtools/docs/timeline

C - инспектиране на приложения от разстояние на iOS и Android

Ако разработвате хибридно приложение или адаптивно уеб приложение, можете да осъществите достъп до конзолата на вашето устройство, DOM дървото и всички други инструменти, налични чрез Chrome или Safari dev tools. Това включва WebView и UIWebView.

Първо стартирайте вашия уеб сървър на хост 0.0.0.0, така че да е достъпен от вашата локална мрежа. Активирайте уеб инспектора в настройките. След това свържете устройството си с вашия работен плот и отворете страницата си за локално развитие, като използвате ip на вашето устройство вместо обикновения „localhost“. Това е всичко, вашето устройство вече трябва да е достъпно за вас от браузъра на вашия работен плот.

Тук са подробните инструкции за Android И за iOS, неофициалните ръководства се намират лесно чрез google.

Наскоро имах страхотен опит с browserSync . Той работи по подобен начин за livereload, но всъщност също така синхронизира всички браузъри, които гледат една и съща страница чрез browserSync. Това включва взаимодействие с потребителите, като превъртане, щракване върху бутони и др. Разглеждах изходните данни на приложението за iOS, докато контролирах страницата на iPad от моя работен плот. Работи добре!

Често срещана грешка # 18: Не четене на изходния код в примера NG-INIT

// when in doubt, comment it out! :) , от звука му, трябва да е подобно на

|_+_|
и
|_+_|
, нали? Чудили ли сте се защо в документите има коментар, че не трябва да се използва? ИМХО, това беше изненадващо! Очаквам директивата да инициализира модел. Това също прави, но ... то е внедрено по различен начин, тоест не следи стойността на атрибута. Не е нужно да разглеждате изходния код на AngularJS - позволете ми да ви го донеса:

|_+_|

По-малко, отколкото бихте очаквали? Доста четим, освен неудобния синтаксис на директива, нали? Шестият ред е за какво става въпрос.

Сравнете го с ng-show:

|_+_|

Отново шести ред. Има

|_+_|
ето, това прави тази директива динамична. В изходния код на AngularJS голяма част от целия код са коментари, които описват код, който е бил предимно четим от самото начало. Вярвам, че това е чудесен начин да научите повече за AngularJS.

Заключение

Това ръководство, обхващащо най-често срещаните грешки в AngularJS, е почти два пъти по-дълго от останалите ръководства. Така се получи естествено. Търсенето на висококачествени JavaScript инженери отпред е много голямо. AngularJS е толкова горещо в момента и от няколко години заема стабилна позиция сред най-популярните инструменти за разработка. С AngularJS 2.0 на път, той вероятно ще доминира за години напред.

Това, което е чудесно при разработката отпред, е, че е много полезно. Нашата работа се вижда незабавно и хората взаимодействат директно с продуктите, които доставяме. Времето, прекарано в учене JavaScript и вярвам, че трябва да се съсредоточим върху езика JavaScript, е много добра инвестиция. Това е езикът на Интернет. Конкуренцията е супер силна! За нас има един фокус - потребителското изживяване. За да успеем, трябва да покрием всичко.

Изходният код, използван в тези примери, може да бъде изтеглен от GitHub . Можете да го изтеглите и да го направите сами.

Исках да дам кредити на четирима разработчици на издателства, които ме вдъхновиха най-много:

Също така исках да благодаря на всички страхотни хора на FreeNode #angularjs и #javascript канали за много отлични разговори и непрекъсната подкрепа.

И накрая, винаги помнете:

|_+_|