Angularjs — Ошибка в консоли

Содержание

AngularJS и gulp — получить меньше ошибок, чем я думаю, что я должен в консоли

Я создаю сайт. Сначала я познакомился с AngularJS в целом и попытался осмыслить все новое для меня: grunt, livereload, angularjs. Я скоро понял некоторые ошибки, которые я сделал, и начал строить новый проект с нуля.

Когда я строил сайт, находясь на сервере grunt. Он отобразил мне больше сообщений, чем сейчас, с помощью gulp. Я не уверен, почему так?

Например, поскольку я переместил какой-то существующий код из моего «учебного проекта» в новый проект clean-start- gulp. Я забыл добавить одну услугу: FlashService — отвечает за отображение простых сообщений на моем сайте.

И я уже использовал это как зависимость в другой службе. Но по какой-то причине все, что я представил, было пустым сайтом без сообщений в консоли. Если в моем предыдущем проекте я всегда получал сообщения типа «Нет такого провайдера» или что-то подобное. Может ли кто-нибудь помочь мне облегчить отладку?

Некоторые другие вещи также изменились. Я изменил общую структуру папок кода, и я пытаюсь модулировать свое новое приложение. В настоящее время я не могу думать ни о чем другом, что может быть даже отдаленно связано.

Моя текущая структура папки выглядит следующим образом:

Некоторые важные части моего кода:

app.js

AuthService

Поскольку я уже потратил слишком много времени на поиск ошибки в неправильном месте, я могу только предположить, что некоторые другие сообщения также не могут попасть в консоль. Это в конечном итоге приведет к отладке довольно сложно.

Что мне здесь не хватает? Почему я не получил никаких ошибок в консоли?

Edit: Первый проект был создан с использованием Yeoman, а для второго я использовал gulp slush. Не думайте, что это поможет, но я подумал, что стоит упомянуть.

Edit2 Выяснилось, что если я изменю angular.js и добавлю console.log(сообщение) внутри первой функции minError, я почти получу то, что хочу.

Теперь мне просто нужно выяснить альтернативный способ сделать это или то, что было по-другому с созданным вами явлением приложением, и почему я не получаю эти сообщения по умолчанию:

AngularJs не отображает Google Chrome. (Нет ошибок в консоли) — angularjs

У меня есть угловое приложение, которое работает нормально какое-то время, но внезапно после нескольких обновлений функций он перестал работать на Google Chrome. В основном это не рендеринг какого-либо html, я вижу через инспектора хрома, что html — это его просто не рендеринг. В консоли также нет ошибок. Я не знаю, что делать. PS- он отлично работает в Mozilla Firefox и IE. P PS- Im, использующий Chromium — Версия 45.0.2454.85 Ubuntu 14.04 (64-разрядная версия) Но мой коллега поделился той же проблемой в Google Chrome для Mac.

Кроме того, если я помещаю console.log() любом месте приложения, он отображает и достигает всех кодов. Я еще не тестировался в контроллерах, кроме тех, которые используются (это экран входа в систему, поэтому я просто проверяю все связанные с ним ресурсы).

Мой контроллер работает в представлении:

Также я решил, что это может быть проблема маршрутизации. (Хотя последняя версия без ошибок имела те же маршруты).

    1 1
  • 30 авг 2020 2020-08-30 20:01:18
  • Nikhil Sikka

1 ответ

Я не мог найти причину этой проблемы, но решение было дать css height:100%; и width:100%; правила в тегах html,body . Я думаю, что некоторые хром Google мешали css. Weird..

Stepan Suvorov Blog

Release 2.0

Самые распространенные ошибки AngularJS разработчиков

Пост представляет собой микс перевода/переработки статьи The Top 10 Mistakes AngularJS Developers Make и личного грабельного опыта.

Введение

Думаю многие согласятся, что AngularJS один из самых популярных JavaScript фреймворков на сегодняшний день. Что делает его таким популярным? Наверное то, что он серьезно упрощает процесс разработки прототипов, и также позволяет расширять эти прототипы до полноценных многофункциональных приложений. Широкое распространение фрейворка привело в свою очередь к широкому распространению ошибок связанных с ним. Ниже приведен список самых часто встречаемых ошибок.

1. “MVC” структура директорий проекта

AngularJS – грубо говоря MVC фреймворк: модели не так четко выделены как в Backbone, но архитектурный паттерн все же похож. Когда мы работаем в рамках MVC фремфорка, общая практика – группировать файлы основываясь на их типе, то есть:

Это выглядит как очевидный лэйаут, особенно если вы пришли откуда-то из Rails. Однако, как только приложение начинает расти, такое расположение приводит к тому, что много папок открыто одновременно. Чтобы бы вы не использовали Sublime, Visual Studio или Web Storm, много времени уходит на прокручивание дерева ресурсов. Вместо этого можно группировать файлы основываясь на фиче/модуле/предназначении:

Такая структура директорий делает поиск конкретного файла намного проще и соотвественно ускоряет разработку. В итоге для нашего проекта мы пришли к вот такоймодульной структуре.

2. Модули (а точнее – их нехватка)

Обычно, когда вы начинаете делать прототип, вы все складываете в главный модуль, иногда даже просто в один файл, и это работает:

В процессе разрастания приложения вы стараетесь уже группировать сущности с использованием модулей:

Как вы уже наверное обратили внимание: ошибка полностью аналогична ошибке с директориями. И правильным решением будет группировка по функциональному предназначению:

и конечно, в большом приложении все это должно быть разнесено по отдельным файлам.

3. Внедрение зависимостей (Dependency injection)

Dependency injection – один из лучших паттернов AngularJs. Он делает тестирование намного проще, на ряду с тем, что все зависимости становятся более понятно описаны. AngularJS очень гибок в плане того, как могут быть внедрены зависимоcти. Самый легкий способ: просто передать имя зависимости в функцию как параметр:

– вполне понятно, что MainCtrl зависит от $scope и $timeout. Это прекрасно работает до момента, когда вы захотите минифицировать код. Он может превратиться в что-то такое:

После такой компиляции AngularJS уже не знает какие там были зависимости у MainCtrl. AngularJS предлагает довольно простое решение для данной проблемы: передавать зависимости как массив строк, а последним элементом в этом массиве будет функция принимающая эти параметры:

в данном случае после компиляции получим:

Так же эту проблему можно решить с помощью ngAnnotate модуля, который сам переведет ваш код в полную форму записи перед минификацией.

3.1 Глобальные зависимости

Часто при разработке на AngularJS возникает необходимость использования сторонних библиотек, которые в большей части представляют из себя глобальные объекты/функции (то есть доступны в любом месте кода). То, что мы можем их везде использовать не задумываясь о подключении, – это хорошо, но ломает паттерн ангуляра и ведет к ряду неприятных последствий при тестировании(и не только). AngularJS позволяет легко завернуть эти глобальные переменные в модули/сервисы и потом их подключать.

Например библиотека Underscore.js, которая существенно упрощает JavaScript код, может быть обернута в модуль/сервис следующим образом:

Это позволит сохранить структуру зависимостей AngularJS, и в дальнейшем мы сможем выгрузить(либо перегрузить) Underscore.js для тестов.

Может показаться, что это лишняя и ненужная работа, но если вы следуете “use strict” для всего вашего кода – данные изменения будут необходимы.

Цукерберг рекомендует:  Россию назвали убежищем продвинутых хакеров

4. Толстые котроллеры

Контроллеры – это стержень AngularJS приложения. Когда вы только начали работать с фреймворком, есть большое желание свалить всю логику туда. Но запомните: в контроллерах не должно быть манипуляций с DOM структурой – это то, что решается с помощью директив. Вся бизнес логика должна быть отдельно от котроллеров, а именно – в сервисах.

Данные также должны храниться в сервисах (за исключением тех случаев, когда это временные данных представления завязанные на $scope). Сервисы являются синглтонами и сохраняют свое значение на протяжении всей работы с приложением, а вот контроллеры могут перегружаться при изменении состояния. Если данные сохранены в контроллере, тогда они будут загружаться каждый раз при перезагрузке контроллера. Даже, если данные сохранены локально (например в localStorage), намного быстрее получить данные из JavaScript переменной.

5. service или factory

Наличие в фреймворке одновременно service и factory может сбить с толку начинающих разработчиков. Но все должно стать на свои места, когда вы поймете, что это всего лишь синтаксический сахар для провайдеров.

Так чем же все таки они отличаются? Суть скрывается в методе $injector.instantiate, благодаря которому инжектор создает новую сущность сервиса используя его функцию-конструктор.

Вот пример использования service и factory, которые делают одно и тоже:

При внедрении сущностей в обоих случаях мы получим в контроллере сущность, которая будет содержать метод hello(). Функция-конструктор для сервиса будет инициализирована один раз при объявлении, в том время как объект фабрики создается каждый раз при инжекте. Да, конечно, мы можем реализовать service так, что он будет вести себя как factory.

Так зачем нужны 2 способа? factory предполагает более гибкую настройку, чем service, потому что она может вернуть функцию-конструктор, которая будет использована для создания объекта (из этого паттерна вероятно и происходит название сущности).

Вот пример использования такой фабрики в контроллере:

Другими словами: когда начинаете разрабатывать приложения на основе AngularJS и вам не нужен паттерн “фабрика”, то просто используйте service .

Фабрика может пригодиться там, где у нас много приватных методов:

этот пример иллюстрирует возможность наличия privateFunc метода не доступного извне. Данный паттерн можно создать и с использованием сервисов, но фабрика делает его более очевидным.

6. Игнорирование инструментов Batarang и ng-inspector

Batarang – расширение для Chrome браузера. Более подробно в этом посте.

  • просмотр модели scope (может быть полезно при работе с изолированным scope)
  • граф зависимостей (например: для выявления перегруженных сущностей)
  • аналитика производительности (для определения наиболее ресурсоемких операций)

ng-inspector – еще одно полезное расширение для Chrome (так же существует для Safari). Предоставляет удобный обзор структуры scope (что в Batarang сделано не самым лучшим образом).

7. Слишком много вотчеров

Как было отмечено в предыдущем пункте: AngularJS довольно производительный уже “из коробки”. Но когда число вотчеров превысит 2000, это может стать реальной проблемой. (Это собираются пофиксить в AngularJS 1.3, более подробно можно почитать тут)

Вот этот код покажет количество вотчеров на странице(можно быстро проверить в консоли):

Старайтесь выявлять места, где можно обойтись без дополнительных вотчеров. Помочь в этом может Batarang. Для тех случаев, когда нам не нужно двойное связывание, а необходимо просто вывести информацию в темплейт, можно использовать вспомогательный модуль bindonce, который предоставляет специальные директивы – аналог ангуляровским, только без вотчеров.

8. Путаница с наследованием $scope

Есть некоторые нюансы прототипного наследования (используемого в javascript), которые проявляются при работе со $scope, так как каждый $scope наследуется от родительского $scope и так далее до самого верхнего уровня $rootScope.

Благодаря прототипному наследованию передача данных из родительского скоупа в дочерний довольно проста, но тут есть далеко не очевидный момент. Допустим у нас есть username отображаемый в панели навигации и он так же вводиться в форму логина, вот как это может быть реализовано:

!Внимание вопрос: какие поля шаблона обновятся (когда юзер вводит текст)?

Если вы сразу же ответили “только loginCtrl“, вероятно вы уже понимаете логику наследования. Поиграться с примером можно тут.

Суть в том, что примитивы передаются как значение , а объекты по ссылке . Поэтому, если мы хотим, чтобы обновилось также значение в котроллере navCtrl, то мы должны оперировать не значениями, а свойствами объектов, то есть вместо user мы запишем user.name:

Может показаться, что пример надуман. Но это не так: даже, когда мы работаем с родными ангуляровами директивами, которые имеет свой скоуп, мы можем столкнуться с проблемой такого рода.

9. Тестирование в ручную

Начинающие разработчики недооценивают силу TDD и проверяют весь проект при изменении в какой-то части (ну или не проверяют, тут уже от ответственности зависит). То же самое касается приложений на основе AngularJS. А если еще учесть тот факт, что AngularJS изначально разрабатывался как “хорошо тестируемый”, а для тестирования в нашем распоряжения есть множество удобных инструментов.

2 самых полулярных тест-ранера это Karma и Protractor. Karma используется для юнит тестов, а Protractor – для функциональных/интеграционных с подключением Selenium и имитацией “реальных” действий пользователя в браузере.

Полезные посты по теме:

10. Использование jQuery

Просто прекратите использовать jQuery. Серьезно! Только так вы сможете отвыкнуть от микро-проектирования “плагинчиками” и перейти к более маштабному модульному подходу.

Выводы

AngularJS – идеальный вариант фреймворка, когда вам нужно перейти от прототипа к реальному много-модульному проекту. Надеюсь эти советы помогут вам предотвратить значительное количество архитектурных ошибок в вашем растущем проекте.

Angularjs — Ошибка в консоли

56 просмотра

1 ответ

1199 Репутация автора

  • AngularJS v1.3.20
  • угловая дезинфекция 1.6
  • angular-ui-bootstrap 2.1.4

Я пытаюсь использовать загрузчик пользовательского интерфейса угловой. В консоли я сталкиваюсь с этой проблемой

b.resolve не является функцией

Нашел несколько разрешений для обновления угла до 1.4

При попытке обновить, я получаю следующую ошибку:

Bower ENOTFOUND Пакет AngularJS> Boilerplate = angularjs-шаблон не найден

Отладка Angular в VS Code

Родной средой для Angular приложений является редактор Visual Studio Code. Наиболее распространенным браузером на сегодняший день является Google Chrome, поэтому речь именно об этой связке (VS Code + Chrome).

Чтобы отлаживать код Angular, нужно установить расширение отладчика для Chrome.

Открываем Расширения ( Ctrl+Shift+X ) и набираем ‘chrome` в строке поиска. Вы увидите несколько расширений, связанных с Chrome.

Нажмите кнопку Установить напротив расширения Debugger for Chrome. Кнопка изменится на Идет установка, а после завершения установки, она изменится на Перезагрузка. Нажмите Перезагрузка, чтобы перезапустить VS Code и активировать расширение.

Настройка отладчика Chrome

Сначала нужно настроить отладчик самой среды VS Code. Для этого перейдите в представление «Отладка» (Ctrl+Shift+D) и нажмите кнопку «Шестерёнка», чтобы создать launch.json файл конфигурации отладчика. Выберите Chrome в раскрывающемся меню Выбор среды. Это создаст launch.json файл в .vscode папке вашего проекта, которая включает в себя конфигурацию для запуска веб-сайта.

Единственное, что нужно сделать с этим файлом — изменить порт от с 8080 на 4200 . После этого launch.json должен выглядеть так:

Установка breakpoint’ов и отладка

Чтобы установить точку останова, нажмите слева от номеров строк. Это поставит точку останова, которая будет видна как красный круг.

Нажмите F5 , чтобы запустить отладчик и открыть новый экземпляр браузера. Исходный код, в котором установлен breakpoint запускается после присоединения отладчика, поэтому мы не поймаем breakpoint до тех пор, пока не обновим веб-страницу.

Исходный код можно исследовать по F10 (Шаг с обходом), F11 (Шаг с заходом) и Shift+F11 (Шаг с выходом). Также доступны текущие переменные, стек вызовов и контрольные значения.

Небольшой нюанс: отладчик не работает, если в браузере открыты инструменты разработчика ( F12 ).

Angularjs — Ошибка в консоли

Это тоже не подавляет ошибку, есть идеи?

Ошибка, которую я получаю, такова:
POST http: // localhost: 38349 / token 400 (неверный запрос)

Это делает объект XMLHttpRequest (та же проблема here с JQuery). Я извлек логику из Angular и сделал a working standalone example:

Как вы можете видеть, это объект xhr, который регистрирует его. Может быть способ отключить все console.log перед запуском запроса xhr, но я думаю, что лучше либо

> Перепроектировать поток ошибок, чтобы получить код состояния 200 с внутренним кодом ошибки в теле.
> Жить с журналом консоли (обычный пользователь в любом случае даже не знает о консоли)

Цукерберг рекомендует:  Падаван в поисках первой работы. Как пройти собеседование

Я выбрал второй вариант, потому что думаю, что его легче понять, так как он не требует дополнительной логики, когда кто-то читает ваш код.

AngularJS больше не показывает конкретные ошибки в консоли Firebug

Я использую AngularJS вместе с библиотекой angular -материал в моем приложении. Проблема в том, что всякий раз, когда какая-либо ошибка возникает в любой функции контроллера, она не отображает конкретную ошибку, но вместо этого отображает одну и ту же общую ошибку каждый раз, глядя на которую вы не можете определить, что пошло не так.

Вот ошибка, показанная на моей консоли.

Вот скриншот этой ошибки.

PS: Я использую JavaScript-библиотеку RequireJS для ленивого загрузки моего приложения. Я также использую ui.router в своем приложении.

Обновление 1: stackFrame.js не является файлом JavaScript моего приложения. Местоположение stackFrame.js:

И он всегда показывает ту же ошибку на одной строке в моем приложении на любом контроллере, даже если я сталкиваюсь с различными ошибками в приложении.

Angularjs — Ошибка в консоли

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1

Веб-разработка*,
JavaScript*,
AngularJS*
На настоящий момент AngularJS — один из самых популярных javascript фреймворков. Его использование упрощает процесс разработки, делая AngularJS великолепным инструментом для создания небольших веб-приложений, но возможности фреймворка не ограничиваются этим и позволяют разрабатывать большие, наполненные разнообразным функционалом приложения. Комбинация легкости в разработке и большое количество возможностей привели к широкому распространению, а вместе с распространением появились типичные, часто встречающиеся ошибки. В этом топике описаны наиболее распространенные ошибки, встречающиеся при разработке на AngularJS больших проектов.
1. Структура папок, соответствующая MVC приложениям
AngularJS является MVC фреймворком. Несмотря на то, что модели в нем определяются не настолько явно, как в случае с backbone.js, общий архитектурный стиль остается тем же. Часто используемой практикой при использовании MVC фреймворков является группировка файлов по следующему шаблону:templates/
_login.html
_feed.html
app/
app.js
controllers/
LoginController.js
FeedController.js
directives/
FeedEntryDirective.js
services/
LoginService.js
FeedService.js
filters/
CapatalizeFilter.js
Подобный подход встречается часто, особенно у разработчиков, имеющих опыт разработки на RoR. Тем не менее при росте приложения использование подобной структуры папок приводит к тому, что в каждый момент времени приходится держать открытыми несколько папок. Чем бы вы не пользовались — Sublime, Visual Studio или Vim с NerdTree — при перемещении по дереву каталогов вы постоянно будете тратить время на скроллинг. Чтобы избежать этого, вы можете группировать файлы по функционалу, а не по типу:app/
app.js
Feed/
_feed.html
FeedController.js
FeedEntryDirective.js
FeedService.js
Login/
_login.html
LoginController.js
LoginService.js
Shared/
CapatalizeFilter.js
Подобная структура папок делает гораздо более простым поиск связанных файлов, относящихся к одной и той же фиче, что способно ускорить процесс разработки. Да, это может показаться спорным — хранить в одной папке html файлы вместе с js, но эффект от экономии времени может оказаться более важным.
2. Модули (или их отсутствие)
Часто, в начале разработки проекта весь функционал складывается в единый модуль. До какого-то момента подобный подход работает, но по мере развития проекта код становится неуправляемым.var app = angular.module(‘app’,[]);
app.service(‘MyService’, function() <
//service code
>);

app.controller(‘MyCtrl’, function($scope, MyService) <
//controller code
>);
Следующим по распространенности подходом является группировать объекты по их типу:var services = angular.module(‘services’,[]);
services.service(‘MyService’, function() <
//service code
>);

var controllers = angular.module(‘controllers’,[‘services’]);
controllers.controller(‘MyCtrl’, function($scope, MyService) <
//controller code
>);

var app = angular.module(‘app’,[‘controllers’, ‘services’]);
Подобный подход масштабируется тоже не лучшим образом, подобно структуре каталогов из пункта 1. Чтобы добиться лучшей масштабируемости, мы последуем той же самой концепции разбиения кода по фичам:var sharedServicesModule = angular.module(‘sharedServices’,[]);
sharedServices.service(‘NetworkService’, function($http)<>);

var loginModule = angular.module(‘login’,[‘sharedServices’]);
loginModule.service(‘loginService’, function(NetworkService)<>);
loginModule.controller(‘loginCtrl’, function($scope, loginService)<>);

var app = angular.module(‘app’, [‘sharedServices’, ‘login’]);
Разнесение функционала по различным модулям также дает возможность повторного использования кода в различных проектах.
3. Внедрение зависимостей
Внедрение зависимостей (dependency injection) одна из лучших возможностей, предоставляемых AngularJS. DI облегчает процесс тестирования и делает код чище. AngularJS очень гибок в вопросе того, как зависимости могут быть внедрены. Самый простой способ — это передать зависимость в функцию в качестве параметра:var app = angular.module(‘app’,[]);
app.controller(‘MainCtrl’, function($scope, $timeout) <
$timeout(function() <
console.log($scope);
>, 1000);
>);
Из кода ясно, что MainCtrl зависит от $scope and $timeout. Это прекрасно работает до того момента, как проект пойдет в продакшн и вы захотите минифицировать ваш код. Использование UglifyJS к вышеуказанному коду приведет к следующему:var app=angular.module(«app»,[]);app.controller(«MainCtrl»,function(e,t),1e3)>)
Теперь AngularJS никак не узнает от чего в реальности зависит MainCtrl. Чтобы этого не происходило, есть очень простое решение — передавать зависимости как массив строк, с последним элементом в виде функции, принимающей все перечисленные зависимости в виде параметров:app.controller(‘MainCtrl’, [‘$scope’, ‘$timeout’, function($scope, $timeout) <
$timeout(function() <
console.log($scope);
>, 1000);
>]);
Код выше будет преобразован минификатором в код, который AngularJS уже сможет корректно интерпретировать:app.controller(«MainCtrl»,[«$scope»,»$timeout»,function(e,t),1e3)>])

3.1. Глобальные зависимости
Часто, при разработке AngularJS приложения, появляется необходимость в использовании объектов, доступных в любой точке приложения. Это ломает стройную модель, основанную на внедрении зависимостей, и приводит к возникновению багов и усложнению процесса тестирования. AngularJS позволяет оборачивать подобные объекты в модули так, что они могут быть внедрены подобно обычным AngularJS модулям. К примеру, великолепная библиотека Underscore.js может быть завернута в модуль следующим образом: var underscore = angular.module(‘underscore’, []);
underscore.factory(‘_’, function() <
return window._; //Underscore must already be loaded on the page
>);
var app = angular.module(‘app’, [‘underscore’]);

app.controller(‘MainCtrl’, [‘$scope’, ‘_’, function($scope, _) <
init = function() <
_.keys($scope);
>

init();
>]);
Это позволяет приложению использовать единый стиль с обязательным внедрением зависимостей и оставляет возможность тестировать модули в отрыве от функционала их зависимостей.
4. Раздувание контроллеров
Контроллеры — это основа AngularJS. И часто, особенно новички, пишут в контроллерах слишком много логики. Контроллеры не должны осуществлять манипуляции с DOM или содержать DOM селекторы, для это существуют директивы. Точно также и бизнес-логика должна находиться в сервисах. Данные также должны храниться в сервисах (за исключением случаев когда данные привязаны к $scope), поскольку сервисы, в отличие от контроллеров, синглтоны, чье время жизни совпадает со временем жизни самого приложения.При разработке контроллеров лучше всего следовать принципу единственной ответственности (SRP) и считать контроллер координатором между представлением и моделью, в этом случае логики в нем будет минимум.
5. Service vs Factory
Эти именования приводят в конфуз каждого новичка в AngularJS, хотя в реальности они почти одинаковы.Посмотрим исходные коды AngularJS:function factory(name, factoryFn) <
return provider(name, < $get: factoryFn >);
>

function service(name, constructor) <
return factory(name, [‘$injector’, function($injector) <
return $injector.instantiate(constructor);
>]);
>
Функция service просто вызывает функцию factory, в которую обернут вызов функции prov ,[]);

app.service(‘helloWorldService’, function() <
this.hello = function() <
return «Hello World»;
>;
>);

app.factory(‘helloWorldFactory’, function() <
return <
hello: function() <
return «Hello World»;
>
>
>);
В момент, когда helloWorldService или helloWorldFactory будут инжектированы в контроллер, они обе будут иметь единственный метод, возвращающий «Hello World». Поскольку все провайдеры синглтоны, у нас всегда будет только один экземпляр сервиса и один экземпляр фабрики. Так почему же существуют одновременно и фабрики и сервисы, если они выполняют одну и ту же функцию? Фабрики предоставляют больше гибкости, поскольку они могут возвращать функцию, которая может создавать новые объекты. В ООП фабрика представляет собой объект, создающий другие объекты:app.factory(‘helloFactory’, function() <
return function(name) <
this.name = name;

this.hello = function() <
return «Hello » + this.name;
>;
>;
>);
Вот пример контроллера, использующего сервис и две фабрики:app.controller(‘helloCtrl’, function($scope, helloWorldService, helloWorldFactory, helloFactory) <
init = function() <
helloWorldService.hello(); //’Hello World’
helloWorldFactory.hello(); //’Hello World’
new helloFactory(‘Readers’).hello() //’Hello Readers’
>

init();
>);
Фабрики также могут быть полезны при разработке классов с приватными методами:app.factory(‘privateFactory’, function() <
var privateFunc = function(name) <
return name.split(«»).reverse().join(«»); //reverses the name
>;

return <
hello: function(name) <
return «Hello » + privateFunc(name);
>
>;
>);

6. Неиспользование Batarang
Batarang — это расширение браузера Chrome для разработки и дебага AngularJS приложений. Batarang позволяет:

  • просматривать модели привязанные к скоупам
  • строить граф зависимостей в приложении
  • производить анализ производительности приложения

Несмотря на то, что производительность AngularJS неплохая «из коробки», при росте приложения, с добавлением кастомных директив и сложной логики, приложение может начать подтормаживать. Используя Batarang легко разобраться, какая из функций тратит много времени при вызове. Batarang также отображает дерево наблюдателей (watch tree), которое может быть полезным при использовании большого числа наблюдателей (watchers).
7. Слишком много наблюдателей
Как было отмечено выше, AngularJS довольно производителен из коробки. Но, когда количество наблюдателей достигнет числа 2000, $digest цикл, в котором происходит проверка изменения данных, может начать замедлять работу приложения. Хотя достижение числа 2000 не гарантирует замедления, это хорошая стартовая точка, с которой уже можно начинать беспокоиться. С помощью следующего кода можно узнать количество наблюдателей на странице:(function () <
var root = $(document.getElementsByTagName(‘body’));
var watchers = [];

Цукерберг рекомендует:  Web - Как переместить текст HTML вправо (только с CSS)

var f = function (element) <
if (element.data().hasOwnProperty(‘$scope’)) <
angular.forEach(element.data().$scope.$$watchers, function (watcher) <
watchers.push(watcher);
>);
>

angular.forEach(element.children(), function (childElement) <
f($(childElement));
>);
>;

console.log(watchers.length);
>)();
Используя код выше и дерево наблюдателей батаранга, вы можете посмотреть, есть ли у вас наблюдатели-дубликаты или наблюдатели над неизменяемыми данными. В случае с неизменяемыми данными вы можете использовать директиву bindonce, чтобы не увеличивать количество наблюдателей на странице.
8. Наследование скоупов ($scope’s)
Наследование в JS основанное на прототипах отличается от классического наследования на классах. Обычно это не является проблемой, но эти нюансы могут проявляться при работе со скоупами. В AngularJS обычный (не изолированный) $scope наследован от родительского до самого старшего предка $rootScope. Общая модель данных, разделяемая родительским скоупом с дочерним, организуется легко благодаря наследованию на прототипах. В следующем примере мы хотим, чтобы имя пользователя одновременно отображалось в двух элементах span, после того как пользователь введет свое имя.

Теперь, поскольку переменная user — объект, цепочка прототипов будет работать и элемент span в navCtrl будет корректно обновлен вместе с loginCtrl. Это может выглядеть неестественным примером, но при работе с директивами, создающими дочерние скоупы (подобно ngRepeat), подобные моменты будут возникать.
9. Использование ручного тестирования
До тех пока вы не начнете использовать TDD в своей работе, вам придется каждый раз запускать проект и проводить ручное тестирование, чтобы удостовериться, что ваш код работает. Нет оправданий для использования подобного подхода в случае с AngularJS. AngularJS был изначально спректирован таким образом, чтобы разработанный на нем код был тестируемым. DI, ngMock — ваши лучшие помощники в этом. Также есть несколько инструментов, способных вас перенести на следующий уровень.
9.1 Protractor
Юнит-тесты — это основа для построения полноценно покрытого тестами приложения, но с ростом проекта использование интеграционных тестов может быть более эффективным для проверки, насколько жизнеспособен код в приложении. К счастью, команда AngularJS разработала замечательный инструмент — Protractor, способный имитировать взаимодействие с пользователем. Protractor использует фреймворк Jasmine для написания тестов и обладает хорошим API для описания различных сценариев взаимодействия. Среди множества различных инструментов для тестирования у Protractor есть преимущество в понимании внутреннего устройства AngularJS, что особенно полезно, когда вы имеет дело с чем-то наподобие $digest циклов.
9.2. Karma
Команда проекта AngularJS не ограничилась написанием инструментария для разработки тестов. Также был разработан исполнитель тестов (test runner) Karma. Karma позволяет выполнять тесты каждый раз при изменении файлов с исходниками. Karma способна выполнять тесты параллельно в нескольких браузерах. Различные устройства также могут быть нацелены на сервер кармы для более полного покрытия реальных сценариев использования.
10. Использование jQuery
jQuery замечательная библиотека. Она стандартизовала кросс-платформенную разработку и стала стандартом в современной веб-разработке. Несмотря на то, что jQuery обладает большим количеством фич, её философия далека от философии AngularJS. AngularJS — это фреймворк для построения приложений, в то время как jQuery — это просто библиотека, упрощающая процесс взаимодействия JavaScript и HTML и предоставляющая удобный API для работы с AJAX. В этом заключается фундаментальное различие между ними. Ангуляр — это подход к построению приложений, а не способ управления разметкой документа. Чтобы действительно осознать принципы построения AngularJS приложений, вам стоит перестать использовать JQuery. jQuery заставляет вас соответствовать существующему HTML стандарту, в то время как ангуляр позволяет вам расширять стандарт HTML под нужды вашего приложения. Манипуляции с DOM в AngularJS должны производиться в директивах, но при этом вполне допустимо размещать в директивах обертки над существующими jQuery компонентами, если вы не смогли найти аналог на angular.
Заключение
AngularJS — это великолепный, постоянно совершенствующийся фреймворк с отличным комьюнити. Надеюсь, мой список популярных ошибок пригодится вам в вашей работе.

Блог Makeomatic: разработка сайтов и мобильных приложений

Дебаггинг приложения на AngularJS через консоль

Изучение и контроль запущенного приложения через браузерную консоль в Chrome, Firefox или Internet Explorer

При разработке приложений на AngularJS, сложно получить доступ к данным и сервисам, глубоко спрятанным в вашем приложении через JS консоль в Chrome, Firefox или Internet Explorer. Вот несколько простых фокусов, которые мы можем использовать, чтобы внимательно изучать и контролировать запущенное приложение через браузерную консоль, упрощая тестирование, видоизменение и даже программирования нашего приложения в реальном времени:

1. Доступ к областям видимости

Мы можем получать доступ к любым областям видимости (даже к изолированным) на странице всего одной строчкой js кода:

Или для изолированных областей видимости:

Где targetNode — ссылка на HTML Node . Вы можете легко получить ссылку на одну из них через document.querySelector() .

2. Исследование иерархии областей видимости

Иногда нам нужно увидеть как области видимости выглядят на странице, чтобы эффективно дебажить наше приложение. AngularJS Batarang — это Chrome расширение, которое показывает иерархию областей видимости в реальном времени и имеет некоторые другие полезные функции.

3. Использование любого сервиса

Мы можем получить ссылку на любой сервис, используя функцию элемента injector , где ngApp определен, или косвенно, через любой элемент с ng-scope классом:

Тогда мы можем вызывать методы в этом сервисе, как если бы мы внедрили его как зависимость.

4. Доступ к контроллеру директивы

Некоторые директивы определяют контроллер с дополнительной (часто общей) функциональностью. Чтобы получить доступ к экземпляру контроллера для данной директивы из консоли, просто используйте функцию controller() :

Следующий пример более продвинут и не используется так часто

5. Функции Chrome консоли

У Chrome есть множество удобных фич для поиска ошибок браузерных приложений из консоли. Здесь несколько лучших из них для Angular разработки:

$0 — $4: Доступ к 5 последним выбранным DOM элементам в окне инспектора. Это удобно для получения доступа к областям видимости выбранных элементов:

angular.element($0).scope()
$(selector) и $$(selector) : быстрая замена для querySelector() и querySelectorAll , соответственно.

Заключение

С несколькими простыми фокусами мы можем получить доступ к данным для любой области видимости на странице, изучить иерархию области видимости, внедрять сервисы и контролировать директивы.
Так что в следующий раз, когда вы захотите внести небольшие корректировки, проверьте вашу работу или проконтролируйте AngularJS приложение через консоль, я надеюсь вы вспомните эти команды и найдете их полезными как и я!

AngularJS: список всех ошибок формы

фон: В настоящее время я работаю над приложением с вкладками; и я хотел бы перечислить поля / разделы, которые не проходят проверку, чтобы указать пользователю искать ошибки в правой вкладке.

поэтому я попытался использовать form.$error сделать это; но я не совсем понимаю, как это работает.

если ошибки проверки происходят внутри ng-repeat , например:

пустые значения приводят к form.$error следующего содержания:

на других рука, если ошибки проверки происходят вне этого ng-repeat :

4 ответов

As @c0bra указал в комментариях form.$error объект заполнен, ему просто не нравится быть сброшенным как JSON.

цикл через form.$errors и это вложенные объекты получат желаемый результат.

все заслуга c0bra об этом.

другой вариант-использовать одно из решений от этот вопрос для присвоения уникальных имен динамически создаваемым входам.

Я сделал функцию, в которую вы передаете форму. Если есть ошибки формы, он будет отображать их в консоли. Он показывает объекты, так что вы можете взглянуть. Я поместил это в свою функцию сохранения.

Бретт DeWoody является правильным. Я хотел сделать логику в моем контроллере, хотя. Поэтому я написал ниже, который основан на ответе user5045936. Это также может помочь некоторым из вас, кто хочет пройти маршрут контроллера. Кстати, я использую директиву toaster для отображения сообщений проверки моих пользователей.

Если у вас есть вложенные формы, то вы найдете это полезным:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих