).scope() је заправо прилично сложен. Ипак је вредно прочитати, јер урнебесна упозорења то надокнађују.

Уобичајена грешка # 15: Не ослањати се на аутоматизацију или се на њу не ослањати превише

Ако пратите трендове у фронт енд развоју и помало сте лењи - попут мене - онда вероватно покушавате да не радите све ручно. Праћење свих ваших зависности, обрада скупова датотека на различите начине, поновно учитавање прегледача након сваког чувања датотеке - развијање је пуно више од самог кодирања.

Дакле, можда користите бовер и можда нпм у зависности од тога како служите својој апликацији. Постоји шанса да можда користите гунђање, гутљај или бранч. Или басх, што је такође супер. У ствари, можда сте започели свој најновији пројекат са неким Иеоман генератором!

То доводи до питања: да ли разумете читав процес онога што ваша инфраструктура заиста ради? Да ли вам треба оно што имате, посебно ако сте само сате покушавали да поправите функционалност ливерелоад-а вашег веб сервера?

Одвојите секунду да процените шта вам треба. Сви ти алати су овде само да вам помогну, нема друге награде за њихово коришћење. Искуснији програмери са којима разговарам теже да поједноставе ствари.

Уобичајена грешка # 16: Не покретање јединичних тестова у ТДД режиму

Тестови неће учинити ваш код без порука о грешкама АнгуларЈС. Оно што ће они учинити је да осигурају да ваш тим не наилази стално на проблеме регресије.

Овде пишем посебно о јединственим тестовима, не зато што сматрам да су они важнији од е2е тестова, већ зато што се извршавају много брже. Морам признати да је процес који ћу описати врло угодан.

Тест Дривен Девелопмент као примена за нпр. гулп-карма руннер, у основи покреће све ваше јединичне тестове на сваком спремању датотеке. Мој омиљени начин писања тестова је да прво напишем празна уверења:

angular.reloadWithDebugInfo()

После тога напишем или рефакторишем стварни код, а затим се вратим тестовима и испуним гаранције стварним кодом теста.

Покретање ТДД задатка у терминалу убрзава процес за око 100%. Јединствени тестови се извршавају у року од неколико секунди, чак и ако их имате пуно. Само сачувајте тест датотеку и тркач ће је подићи, проценити ваше тестове и одмах пружити повратне информације.

Са е2е тестовима, процес је много спорији. Мој савет - поделите е2е тестове у тест пакете и само покрените један по један. Кутомер их подржава, а испод је код који користим за своје тест задатке (волим гутљај).

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

Уобичајена грешка # 17: Некоришћење доступних алата

А - хром тачке прелома

Цхроме дев алати вам омогућавају да усмерите на одређено место у било којој од датотека учитаних у прегледач, зауставите извршавање кода у том тренутку и омогућите вам интеракцију са свим променљивим доступним са те тачке. То је пуно! Та функционалност уопште не захтева додавање било ког кода, све се дешава у развојним алаткама.

Не само да добијате приступ свим променљивим, већ видите и скуп позива, трагове низа штампе и још много тога. Можете га чак конфигурисати за рад са минификованим датотекама. Прочитајте о томе овде .

Постоје и други начини на које можете добити сличан приступ током извођења, нпр. додавањем Ng-init позива. Али тачке прекида су софистицираније.

АнгуларЈС вам такође омогућава приступ опсегу кроз ДОМ елементе (све док је омогућен ng-if) и убризгавање доступних услуга путем конзоле. Узмите у обзир следеће у конзоли:

ng-repeat

или усмерите на елемент у инспектору, а затим:

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

Чак и ако дебугИнфо није омогућен, можете:

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

Б - хромирана хронологија

Још један сјајан алат који долази са развојним алаткама је временска линија. То ће вам омогућити да снимате и анализирате перформансе апликације уживо док је користите. Излаз приказује, између осталог, употребу меморије, брзину кадрова и сецирање различитих процеса који заузимају ЦПУ: учитавање, скриптирање, приказивање и сликање.

Ако приметите да се перформансе ваше апликације погоршавају, узрок томе ћете највероватније моћи да пронађете на картици временске траке. Само забележите своје радње које су довеле до проблема са перформансама и погледајте шта ће се догодити. Превише посматрача? Видећете како жуте траке заузимају пуно простора. Цурење меморије? На графикону можете видети колико је меморије потрошено током времена.

Детаљан опис: хттпс://девелопер.цхроме.цом/девтоолс/доцс/тимелине

Ц - даљински преглед апликација на иОС-у и Андроид-у

Ако развијате хибридну апликацију или прилагодљиву веб апликацију, можете да приступите конзоли уређаја, ДОМ стаблу и свим другим алаткама доступним путем Цхроме или Сафари развојних алата. То укључује ВебВиев и УИВебВиев.

Прво покрените свој веб сервер на хосту 0.0.0.0 тако да му је доступан из ваше локалне мреже. Омогућите веб инспектора у подешавањима. Затим повежите уређај са радном површином и приступите локалној развојној страници, користећи ип вашег уређаја уместо уобичајеног „лоцалхост“. То је све што је потребно, ваш уређај би вам сада требао бити доступан из прегледача радне површине.

Ево су детаљна упутства за Андроид. А за иОС, незваничне водиче можете лако пронаћи путем гоогле-а.

Недавно сам имао неко кул искуство са бровсерСинц . Ради на сличан начин за ливерелоад, али такође синхронизује све прегледаче који прегледавају исту страницу путем бровсерСинц. То укључује корисничку интеракцију попут помицања, клика на дугмад итд. Гледао сам излазни запис дневника апликације иОС док сам управљао страницом на иПаду са радне површине. Лепо је функционисало!

Уобичајена грешка # 18: Нечитање изворног кода на примеру НГ-ИНИТ

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

|_+_|
и
|_+_|
, зар не? Да ли сте се икад запитали зашто у документима постоји коментар да га не треба користити? ИМХО то је било изненађујуће! Очекивао бих да директива покрене модел. То је такође оно што чини, али ... примењује се на другачији начин, то јест, не посматра вредност атрибута. Не треба да прегледате изворни код АнгуларЈС - дозволите ми да вам га донесем:

|_+_|

Мање него што бисте очекивали? Прилично читљиво, осим незгодне синтаксе директиве, зар не? Шести ред је о чему се ради.

Упоредите са нг-схов:

|_+_|

Опет шести ред. Постоји

|_+_|
ето, то је оно што ову директиву чини динамичном. У изворном коду АнгуларЈС, велики део целокупног кода чине коментари који описују код који је углавном био читљив од почетка. Верујем да је то одличан начин за учење о АнгуларЈС.

Закључак

Овај водич који покрива најчешће грешке АнгуларЈС скоро је двоструко дужи од осталих водича. Испало је тако природно. Потражња за висококвалитетним ЈаваСцрипт инжењерима је веома велика. АнгуларЈС је тако вруће одмах , и већ неколико година држи стабилну позицију међу најпопуларнијим развојним алатима. Са АнгуларЈС 2.0 на путу, он ће вероватно доминирати годинама које долазе.

Оно што је сјајно у погледу фронт-енд развоја је то што је то врло корисно. Наш рад је видљив тренутно, а људи директно комуницирају са производима које испоручујемо. Време проведено у учењу ЈаваСцрипт , и верујем да бисмо се требали усредсредити на језик ЈаваСцрипт, врло је добра инвестиција. То је језик Интернета. Конкуренција је супер јака! За нас постоји један фокус - корисничко искуство. Да бисмо били успешни, морамо све да покријемо.

Изворни код коришћен у овим примерима можете преузети са ГитХуб . Слободно га преузмите и направите по свом.

Желео сам да доделим кредите четворици програмера издаваштва који су ме највише инспирисали:

Такође сам желео да захвалим свим сјајним људима на ФрееНоде #ангуларјс и #јавасцрипт каналима на многим одличним разговорима и континуираној подршци.

И на крају, увек запамтите:

|_+_|