angularjs — вопросы с ответами

Angular является частью экосистемы JavaScript и одним из самых популярных инструментов разработки программного обеспечения на сегодняшний день. Он был представлен Google в 2009 году и получил высокую оценку от сообщества разработчиков. Согласно исследованию StackOverflow 2018 года, 36,9% разработчиков программного обеспечения в настоящее время используют AngularJS и новую версию Angular 2+ для создания пользовательских интерфейсов. Давайте поговорим об основных особенностях этих инструментов и рассмотрим их преимущества и недостатки с точки зрения передового проектирования.

Что такое Angular

Angular – это платформа для разработки программного обеспечения с открытым исходным кодом, используемая для создания пользовательских интерфейсов (front-end). Ее история начинается в 2009 году, когда Миско Хевери и Адам Абронс, инженеры Google, разработали фреймворк, в настоящее время известный как AngularJS, и официально выпустили его в 2010 году.

AngularJS

В 2010 году основным преимуществом AngularJS было то, что он позволял вам превращать документы на основе HTML в динамический контент. До AngularJS HTML, язык веб-разметки, всегда был статичным. Это означало, что пользователи имели ограниченное взаимодействие с интерфейсами на страницах HTML. Существовало несколько способов создания динамических одностраничных приложений (SPA), но они были слишком сложными для удобного проектирования. Архитектура AngularJS сократила объемы работ, необходимых для создания динамического контента, и пользователи получили веб-страницы с динамическими формами и элементами.

Angular 2+

В сентябре 2016 года Google выпустила Angular 2. Они полностью переписали фреймворк, стараясь идти в ногу с растущими требованиями современного интернета. И разница между AngularJS 1.x и новым Angular была настолько радикальной, что вы не смогли просто так обновиться с одной версии на другую. Принятие новой технологии потребовало полной переработки приложений. В 2017 году появилось еще одно крупное обновление, Angular 4. Оно внесло несколько существенных улучшений в версию 2, но осталось тем же продуктом в своей основе. С тех пор Google регулярно выпускает обновления. Чтобы избежать путаницы в терминологии, мы просто будем называть новую платформу Angular.

MEAN

Angular относится к так называемому стеку MEAN. Акроним описывает четыре технологии, которые охватывают основные аспекты разработки программного продукта.

  • M – MongoDB, база данных noSQL (нереляционная);
  • E – Express, промежуточное программное обеспечение;
  • A – Angular, каркас приложений на стороне клиента;
  • N – Node.js, среда выполнения.

Хотя инженеры могут использовать Angular независимо от других технологий, они всегда могут положиться на существующую фирменную экосистему, в которой также есть разработчики из всего стека (специалисты, охватывающие все аспекты разработки программного обеспечения).

Инструменты и настройка Angular

Здесь мы рассмотрим 2 основных инструмента, которые инженеры обычно используют с Angular, чтобы в полной мере воспользоваться преимуществами этой среды.

  • RxJS. Маловероятно, что вы сможете работать с Angular без RxJS, библиотеки реактивного программирования, предназначенной для обработки асинхронных данных с несколькими событиями. Она в основном позволяет инженерам настроить несколько каналов обмена данными, чтобы облегчить потребление ресурсов;
  • Angular CLI. Интерфейс командной строки (CLI) используется для создания проектов, добавления файлов, выполнения обновлений, обработки отладочных тестов и развертывания.

Важно: В настоящее время многие популярные продукты для редактирования кода поддерживают Angular. Наиболее распространенные из них, и принятые сообществом, включают код Visual Studio, Sublime text и, что удивительно, не включают Angular IDE и WebStorm. Однако проверьте, подходит ли ваш любимый редактор кода для Angular перед началом проекта.

Плюсы и минусы AngularJS

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

Плюсы AngularJS

Директивы. Эта функция фактически способствовала развитию HTML, упомянутого выше. Директивы позволили разработчикам назначать особые варианты поведения объектной модели документов (DOM), позволяя инженерам создавать динамический и насыщенный контент с помощью HTML.

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

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

Минусы AngularJS

Производительность. Динамические приложения не всегда работают хорошо. Сложные SPA (одностраничные приложения) могут быть медлительными и неудобными в использовании из-за их размера.

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

После выпуска Angular 2, а затем и обновления Angular 4, использование оригинального AngularJS 1.x начало постепенно снижаться. Хотя новые версии по-прежнему имеют те же функции, которые описаны в разделе Преимущества, в них они были полностью переработаны.

Механизм обнаружения изменений

Механизм обнаружения изменений в Angular намного прозрачнее и проще понятен, чем его аналог в Angular 1. Но все еще существуют ситуации (например, при оптимизации производительности), когда нам действительно нужно знать, что происходит «под капотом».

Как реализовано обнаружение изменений?

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

Чтобы понять, как это работает, нам нужно начать с понимания того, что в Javascript вся среда выполнения может быть переопределена проектом. Мы можем переопределить функции в String или Number, если захотим.

Переопределение стандартных механизмов браузера

Angular во время запуска исправляет несколько низкоуровневых API-интерфейсов браузера, таких как, например, addEventListener, который является функцией браузера, используемой для регистрации всех событий браузера, включая обработчики щелчков. Angular заменяет addEventListener новой версией, которая добавляет больше функциональности к любому обработчику событий: вызывается не только зарегистрированный обратный вызов, но и Angular дает возможность запускать обнаружение изменений и обновлять пользовательский интерфейс.

Низкоуровневые исправления

Низкоуровневое исправление API-интерфейсов браузеров выполняется библиотекой Angular под названием Zone.js. Поэтому важно иметь представление о том, что такое это “zone”.

Zone – это так называемый контекст выполнения, который переживает несколько поворотов выполнения виртуальной машины Javascript. Это общая система, которую мы можем использовать для расширения функционала и его последующего добавления в браузер. Angular использует Zones для запуска обнаружения изменений, но другим возможным вариантом будет профилирование приложений или отслеживание длинных трасс стека, которые проходят через несколько витков виртуальных машин.

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

Возвращение к jQuery

jQuery – это обычная библиотека для обработки событий и упрощения манипуляций с DOM. Однако AngularJS, с другой стороны, является фреймворком, который используется для создания масштабируемых приложений, тестирования и разработки приложений, и, следовательно, его нельзя использовать для усиления HTML-документов. AngularJS обладает достаточным количеством функций, поэтому разработчик должен знать обо всех доступных возможностях, прежде чем привлекать jQuery к разработке. Даже если вам нужны манипуляции с DOM, это не обязательно означает, что вы должны использовать jQuery.

Неправильное использование Batarang

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

Игнорирование $applyAsync

Поскольку существует функция опроса для вызова $digest() в AngularJS, она просто реализована из-за существующих директив. $applyAsync очень помогает в сохранении разрешения выражения для следующего цикла $digest(). Существует как автоматический, так и ручной способ использования $applyAsync.

Прямое манипулирование DOM

Это самая распространенная ошибка, которую совершает каждый новый разработчик AngularJS. Вне зависимости от того, касается ли дело рендеринга SVG или обновления заголовка веб-страницы при изменении контекста, разработчик решает выбрать более легкий путь и вносит изменения в DOM напрямую. Однако это может привести к большим проблемам в будущем, так что воздержитесь от подобных действий.

17 ответов
Я ищу правильный шаблон для ввода класса строк начальной загрузки каждые три столбца. Мне нужно это, потому что cols не имеет фиксированной высоты (и я не хочу ее исправлять), поэтому он нарушает мой дизайн! Вот мой код: <div ng-repeat="product in products"> <div ng-if="$index % 3 == 0"...
angularjs-ng-repeat
ng-repeat
30 нояб. 2014, в 09:54
3 ответа
Я ищу, чтобы найти лучшие практики для сохранения данных Angularjs в приложении PhoneGap. Я использую Ionic Framework поверх этого, но не относящийся к этому вопросу, поскольку он просто построен поверх Angular и Cordova. Мне нравится, что Angular остается гибким в решениях сохранения данных, это им...
cordova
persistence
17 май 2014, в 19:34
16 ответов
Я планирую использовать AngularJS в своих больших приложениях. Таким образом, я нахожусь в поиске правильных модулей для использования. В чем разница между ngRoute (angular -route.js) и ui-router (angular -ui-router.js). Во многих статьях, когда используется ngRoute, маршрут настроен с помощью $r...
angular-ui-router
angularjs-routing
angularjs-module
09 янв. 2014, в 14:35
17 ответов
Я пытаюсь использовать всплывающую подсказку Bootstrap в своем приложении. Мое приложение использует AngularJS. В настоящее время у меня есть следующее: <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> ...
twitter-bootstrap-tooltip
18 дек. 2013, в 17:42
8 ответов
Я хочу передать userName из списка userName зарегистрированный пользователь нажимает на twitter bootstrap modal. Я использую grails с angularjs, где данные отображаются с помощью angularjs. Конфигурация Страница просмотра grails encouragement.gsp <div ng-controller="EncouragementController"...
02 сен. 2013, в 14:45
26 ответов
Если у меня есть navbar в bootstrap с элементами Home | About | Contact Как установить активный класс для каждого элемента меню, когда они активны? То есть, как я могу установить class="active", когда маршрут angular находится в #/ для дома #/about для страницы about #/contact для контактной стр...
angularjs-directive
navbar
24 апр. 2013, в 18:35
15 ответов
Предположим, что я знаком с разработкой клиентских приложений в jQuery, но теперь я хотел бы начать использовать AngularJS. Можете ли вы описать сдвиг парадигмы, который необходим? Вот несколько вопросов, которые могут помочь вам сформировать ответ: Как мне создавать и создавать клиентские веб-прил...
21 фев. 2013, в 02:18
13 ответов
Как я могу отправить свой объект $scope с одного контроллера на другой с помощью методов .$emit и .$on? function firstCtrl($scope) { $scope.$emit('someEvent', [1,2,3]); } function secondCtrl($scope) { $scope.$on('someEvent', function(mass) { console.log(mass); }); } Это не работает так, ка...
24 янв. 2013, в 11:56
12 ответов
Я использую Angular с Bootstrap. Вот код для справки: <form name="newUserForm" ng-submit="add()" class="" novalidate> <input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" required></td> <button type="submit"...
15 янв. 2013, в 22:47
3 ответа
Ссылка на справочную страницу API: Область может наследоваться из родительской области. Страница "Руководство разработчика" : Объект (прототипно) наследует свойства из его родительской области. Итак, всегда ли прототипна наследственная область дочернего объекта из его родительской области? Ест...
inheritance
prototype
prototypal-inheritance
27 дек. 2012, в 04:35
6 ответов
Я знаю только одну библиотеку js и jQuery. Но мои другие кодеры в группе меняют AngularJS в качестве своей библиотеки по умолчанию в новом проекте. Я ничего не знаю об этом. Как это отличается от jQuery? У меня уже есть набор функций, выполняемых для подобных задач в jQuery. Могу ли я использовать...
31 окт. 2012, в 06:10
10 ответов
У меня проблема с тем, что этот plunkr (select2 + angulat-ui) работает. http://plnkr.co/edit/NkdWUO?p=preview В локальной настройке я получаю работу select2, но я не могу установить ширину, как описано в docs. Он слишком узкий, чтобы его можно было использовать. [IMG_OUR_ID=120.png] Спасибо. EDIT:...
02 окт. 2012, в 03:44
13 ответов
Как привязка данных работает в рамках AngularJS? Я не нашел технических подробностей их сайта. Это более или менее понятно, как это работает, когда данные распространяются из представления в модель. Но как AngularJS отслеживает изменения свойств модели без сеттеров и геттеров? Я обнаружил, что есть ...
data-binding
13 март 2012, в 10:16
19 ответов
Возможно ли создать фрагмент HTML в контроллере AngularJS и отобразить этот HTML в представлении? Это связано с требованием превратить несогласованный BLOB-код в вложенный список пар id : value. Поэтому HTML создается в контроллере, и теперь я хочу его отобразить. Я создал свойство модели, но не мог...
escaping
html-sanitizing
21 фев. 2012, в 16:44
13 ответов
Я хочу использовать AngularJS с Django, но оба они используют {{ }} в качестве тегов шаблонов. Есть ли простой способ изменить один из двух, чтобы использовать другой пользовательский шаблонный тег?
django-templates
28 нояб. 2011, в 20:31
Наверх
Меню