Angular — это мощный инструмент для управления отображением данных. Однако, как и любой мощный инструмент, при неправильном использовании могут возникнуть проблемы Ниже мы рассмотрим некоторые распространенные ошибки AngularJS. Они различаются по серьезности, но в конечном итоге могут сделать разработку приложения AngularJS более головной болью, чем необходимо. Мы рассмотрим пять из этих распространенных ошибок и способы их избежать.
Ошибка 1 — неправильное использование обработчика событий
В соответствии с документами Angular объектная область Angular является «связующим звеном между контроллером приложения и представлением». Чтобы быть более конкретным, область предназначена для хранения всех данных, необходимых для ваших представлений, чтобы представить страницу пользователю. Угловая область очень гибкая, позволяя писать ряд пользовательских функций на основе заполненного содержимого. Это может быть очень соблазнительным инструментом для программистов с более императивным стилем. Искушение добавить код вроде:
$scope.onButtonClick = function() {
// do something based upon data in the template
}
может быть великолепным, особенно когда имеет смысл добавить функциональность, основанную на данных, отображаемых до сих пор (например, отображение пользовательской кнопки на основе пользовательского ввода). Однако это нарушает один из основных принципов разработки Angular (и веб-разработки в целом) — держите ваш дисплей и вашу логику как можно более разделенными. С Angular, имеющим декларативный фокус, этот тип кодирования может стать громоздким очень быстро
Ошибка 2 — привязка вложенных областей
Как и любой другой язык программирования, Angular имеет свои собственные правила вложения области видимости. Например, наивная реализация входных данных, связанных с моделью, может привести к общему отказу в процессе привязки. По сути, проблема сводится к тому, чтобы убедиться, что имена полностью определены. Допустим, у вас есть контроллер, определенный следующим образом:
angular.module('custData').controller('IndexCtrl', function($scope) {
$scope.index = 5;
$scope.associates = ["James", "Josh"];
});
Любой последующий доступ к элементу индекса приведет только к локальным изменениям. Во многом это связано с тем, как области видимости обрабатывают примитивные объекты Javascript — в последующих контекстах области эти элементы области фактически будут дублироваться — например, изменение элемента «долларов» не приведет к изменениям любых элементов, связанных с примитивом. По сути, это означает, что примитивы передаются по значению, а не примитивы (такие как объекты и массивы) передаются по ссылке. Чтобы это исправить, просто структурируйте ваши объекты области видимости как объекты:
angular.module('custData').controller('IndexCtrl', function($scope) {
$scope.customerData = {
index: 5
};
$scope.associates = ["James", "Josh"];
});
Из-за модификации для хранения индекса в непримитивном типе все «магические» угловые привязки должны работать должным образом — вам просто нужно изменить ссылки на данные в стиле customerData.index.
Ошибка 3 — Слишком сложные контроллеры
Одна из распространенных ошибок сжатых сроков разработки и поспешных заданий на кодирование — это код, который пытается сделать слишком много в данном контексте. Разработка достойной программной архитектуры — это трудоемкая задача, и ей часто уделяется мало внимания, как только время становится ценным ресурсом. Таким образом, среди этих видов кодовых баз часто встречается смешивание логических уровней, когда контроллеры выполняют слишком много задач. Например, выполнение вызовов AJAX в контроллерах, когда они действительно принадлежат сервисам, или слишком много обработчиков событий, чем необходимо для выполнения поставленной задачи.
Лучший способ избежать этого — придерживаться своего оружия при проектировании и разработке. Заставьте участников проекта понять, что хороший код должен не только работать, но и быть хорошо написанным и обслуживаемым. Четкое разделение между функциональными слоями — сохранение манипуляций с DOM в директивах, обеспечение того, чтобы уровень отображения фокусировался исключительно на отображении данных и т. Д. — помогает не только уменьшить количество ошибок в кодовой базе, но и облегчить будущие расширения разработанной функциональности.
Ошибка 4 — Игнорирование доступных инструментов
Одна из самых неприятных вещей для почти любого человека, пытающегося помочь начинающему программисту, — это когда он не в состоянии адекватно использовать доступные инструменты. Например, Chrome и Firefox включают полнофункциональный пакет разработки, который охватывает профилирование, отладку и вывод ошибок. Это позволяет разработчику более итеративно развиваться в браузере, быстро обнаруживая и устраняя ошибки. Типичным примером этого является журнал консоли. В журнале консоли часто печатаются угловые ошибки, которых более чем достаточно для начала процесса устранения неполадок. Это особенно актуально в процессе обучения, когда вы впервые пробуетесь через код Angular. Может быть слишком легко полагаться на то, что вы задаете вопросы и когда кто-то дает вам ответы. Таким образом,Лучше всего всегда проверять вывод консоли перед поиском решений — ряд, казалось бы, сложных ошибок сводится к простой ошибке, сообщаемой в браузере.
Ошибка 5 — Неидиоматический код
Angular разработан с учетом декларативного стиля программирования. Он был разработан, чтобы служить расширением HTML, что означает, что он хочет представлять данные на основе конкретного набора правил. Другими словами, после отображения данных DOM следует менять как можно меньше. Попытка приблизиться к этому типу программирования с точки зрения jQuery — где императивное программирование используется для управления изменениями DOM в процедурном подходе — может быстро превратить ваш код в беспорядок. Хотя полагаться на то, что вы знаете, может быть быстрым решением для программиста, стремящегося что-то запустить и запустить, Angular становится намного проще в использовании, если он разработан по намеченным путям.
Вывод
Приведенный выше список общих проблем с развитием Angular не является исчерпывающим — это далеко не так. Тем не менее, вопросы, представленные выше, чрезвычайно распространены среди разработчиков Angular неофитов. Некоторые из них имеют архитектурную природу и, как таковые, не обязательно специфичны для Angular, но такие особенности, как обработка областей в Angular, могут застать даже опытных разработчиков врасплох. Помните об этом при разработке кода, и у вас будет гораздо меньше головной боли.