Angularjs — Средство для создания множества сущностей в angular.js


Содержание

Скринкаст по Angular

Angular – одна из самых популярных библиотек для создания сложных Frontend-приложений.

Однако, успешная разработка на нём требует хорошего понимания концепций, на которых он построен.

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

Его записал Степан Суворов, ведущий наших курсов по Angular, который разрабатывает и преподает этот фреймворк примерно столько, сколько он существует.

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

10 преимуществ использования фреймворка Angular.js при разработке веб-приложений

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

Во-первых, что такое Angular.js фреймворк? Это open source-фреймворк (не библиотека!), который позволяет создавать популярные сегодня одностраничные приложения. После запуска в 2009 году Angular.js быстро набрал популярность и не собирается сдавать позиции — он остается самым востребованным JavaScript-фреймворком на GitHub (в топе как по форкам, так и по количеству «звезд»).

Ниже мы перечислили исчерпывающие причины, почему стоит выбрать AngularJS.

1. Большое комьюнити

Начнем с того, что у Angular.js огромнейшее комьюнити. В него входят как участники постоянной команды разработки, так и просто те, кто хотят внести свою лепту в развитие фреймворка с открытым исходным кодом. По Angular.js проходит множество конференций, о нем говорят на хакатонах и спорят в тематических ИТ-коммьюнити. Существует много книг и он-лайн ресурсов по Angular.js для разработчиков. Для клиентов это означает: выбрав Angular.js, вы будете не только в тренде, но и всегда сможете найти разработчиков для поддержки своего проекта.

2. Декларативный стиль кода

При создании шаблонов в Angular.js применяется декларативная парадигма программирования. Это делает код более легковесным, облегчает его чтение и поддержку, так как описывается необходимый конечный результат, а не все шаги по его достижению. Например, сравните фрагменты кода на JavaScript:

3. Использование директив

В качестве языка шаблонов в Angular.js используется HTML. Он расширяется с помощью директив, которые добавляют в код сведения о требуемом поведении (например, о необходимости загрузить определенный модуль сразу после загрузки страницы). Директивы позволяют вам сконцентрироваться на проработке логики и работать более продуктивно. Их можно использовать повторно, что также повышает читабельность кода.

4. Высокая скорость разработки

При правильном подходе с помощью Angular.js можно быстро разрабатывать даже большие приложения.

5. MVC из коробки

В AngularJS используется схема MVC, разделяющая логику, представление и данные приложения:

Это позволяет создавать одностраничные веб-приложения (Single Page Application). В Angular.js имеется служба $http, которая обеспечивает взаимодействие с удаленными HTTP-серверами с помощью XMLHttpRequest или JSONP. При передаче объекта JavaScript на сервер он будет автоматически преобразован в строку JSON. После получения ответа служба также попытается преобразовать полученную строку JSON в JavaScript. Используя службу $http можно создать собственную службу с полным контролем над обработкой URL и данных.

6. Полезные фичи для SPA

Angular.js для вебприложений – это как вода для рыб. Трудно представить, чтобы они могли существовать друг без друга. Например, Angular.js предоставляет возможности по работе с валидацией форм. Если на странице используются формы, FormController записывает их состояние. Используя эту информацию, мы можем задавать поведение HTML-элементов в UI (например, скрыть кнопку «Очистить форму», если пользователь еще не начал вводить данные в форму). Для обработки ошибок в Angular.js предусмотрены встроенные валидаторы (required, ng-required, ng-minlength, ng-pattern и другие), но при необходимости мы также можем создавать собственные. Сообщения об ошибках можно выводить как для всей формы, так и для ее отдельных полей.

Шаблоны или темплейты в Angular.js представляют собой HTML-код, дополненный элементами и атрибутами Angular.js. Фреймворк дополняет шаблон информацией из модели, чтобы показать пользователю динамическую страницу. Для обработки данных и форматирования значений, полученных от модели, используются фильтры. Они позволяют показать нужные данные пользователю без необходимости вносить изменения в исходные данные.

7. Модульность

В Angular.js можно организовывать приложения из отдельных модулей. Такие модули могут как зависеть друг от друга, так и быть автономными. Например, в последнем случае модуль входа через Facebook можно использовать сразу в нескольких частях приложения, скажем, на странице входа и на странице оформления заказа. А благодаря встроенному механизму внедрения зависимостей Angular.js сам распознает ситуацию, когда нужно предоставить вспомогательные объекты, предоставляет их и связывает объекты между собой.

8. Наличие готовых решений

Что важно, для Angular.js существует огромное количество готовых решений, которые позволяют решать довольно разнообразные задачи, используя уже готовые модули. Например, существует несколько модулей для роутинга самый популярный из которых ui-router, так же есть различные модули для работы с таблицами ui-grid, ng-table и много других.

Из-за отсутствия жесткой структуры проекта в AngularJS можно создавать приложения с достаточно разнообразной структурой. Также вы можете использовать AngularJS для мобильной разработки (разумеется, речь идет о создании так называемых гибридных приложений). Как использовать Angular.js фреймворк в этих целях можно почитать здесь.

9. Двустороннее связывание данных

В Angular.js применяется двустороннее связывание: любые изменения в пользовательском интерфейсе сразу же отражаются на объектах приложения и наоборот. Фреймворк сам следит за событиями браузера, изменениями модели и действиями пользователя на странице, чтобы сразу обновлять нужные шаблоны. При этом в коде JavaScript не требуется хранить ссылки на DOM-элементы и явно ими манипулировать. Мы просто описываем необходимый результат в терминах состояния модели, и нам не нужно использовать низкоуровневые конструкции.

10. Простота тестирования

Части приложения располагаются внутри модулей Angular.js, которыми легко манипулировать. Такая разбивка на модули позволяет загружать только нужные службы и эффективно выполнять автоматическое тестирование. При этом если придерживаться принципа «один файл — один модуль», не будет возникать необходимости запоминать порядок загрузки модулей.

Несмотря на вышеупомянутые особенности AngularJS, у него есть и несколько недостатков:

  1. Сложность освоения. Трудности обычно возникают у тех, кто раньше использовал библиотеку jQuery, ведь в отличие от Angular.js она полагается на выполнение манипуляций с деревом DOM.
  2. Замедление работы при использовании более 2000 вотчеров (или слушателей событий).
  3. Отсутствие обратной совместимости со второй версией. Разумеется, вы можете начать подготовку своего кода к миграции уже сейчас, но гарантий, что она пройдет гладко, нет.

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

Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

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, который предоставляет специальные директивы – аналог ангуляровским, только без вотчеров.

Цукерберг рекомендует:  Css - Помогите новичку разобраться (вёрстка сайта)

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 — Средство для создания множества сущностей в angular.js

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Alternatives

Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

Extensibility

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

H jQuery против AngularJS: сравнение и руководство по переходу в черновиках Перевод

.collapse»>Содержание

0 TL;DR сводка

Если вы торопитесь – вот вам краткая сравнительная сводка двух фреймворков.

1 Сравнение фреймворков

ВНИМАНИЕ! Все сравнения субъективны. Что-то в одном случае будет преимуществом, а в другом – может быть расценено как недостаток. К примеру, сложные селекторы CSS3 в jQuery позволяют выполнить множество действий одной строкой кода, но это не значит, что они – наиболее эффективный способ взаимодействия с DOM.

1.1 jQuery

jQuery – набор модулей, содержащих кроссбраузерные методы для вызовов AJAX, работы с элементами, создания и ожидания событий, выбора элементов DOM, показа анимации и эффектов, назначения и считывания значений полей ввода, прохода по DOM, и прочего. Работает как промежуточное звено для стандартизации и облегчения работы программистов с элементами страницы.

1.1.1 Интуитивный API

Хотя современные браузеры становятся более стандартизированными, кроссбраузерные манипуляции с DOM пока ещё очень неудобны. Одна из сильных сторон jQuery – интуитивный и простой API.

Допустим, у нас есть следующая разметка HTML, и нам надо добавить текст «мир» к сообщению «Привет» по первому клику на кнопке.

Следующий код написан на Vanilla JS:

А вот как это можно сделать при помощи jQuery:

Круто?! Поэтому слоган jQuery переводится, как «Пиши меньше, делай больше». Поэтому он приобрёл такую популярность.

Однако, не стоит увлекаться однострочниками. Я как-то наткнулся на селектор в коде продакшена, который выбирает все дочерние галочки у выбранной категории, который работает ужасно неэффективно – 6 секунд.

После рефакторинга, где были использованы простые селекторы и цикл перебора элементов, время сократилось до 13 ms. Не нужно напрямую использовать фильтры DOM. Полезным будет знать, что движок селекторов jQuery работает справа налево. Например:

В этом примере jQuery делает следующее:

— находит все элементы input
— проверяет, есть ли у них атрибут catid с нужным значением
— проходит дерево DOM для проверки того, что эта ветка – дочерняя для subcatID
— наконец, возвращает список элементов, удовлетворяющих запросу

1.1.2 Кросс-браузерная поддержка

Хотя со времён браузерных войн 90-х годов прошло много времени, но и сейчас некоторые вещи, вроде работы с текстом внутри элемента доставляют проблем. Некоторые браузеры используют textContent, а другие (IE) – innerText. jQuery позволяет просто работать с $(elm).text(), не отвлекаясь на эти мелочи.

Также нет необходимости изобретать велосипед, работая с AJAX. Можно просто использовать $.ajax и получать данные на лету, и это будет работать одинаково во всех браузерах. Поэтому вы можете реализовывать свой алгоритм, а не отвлекаться на исправление давно известных багов.

1.1.3 Размер сообщества

Выбирая технологию с открытым кодом, важно принять во внимание размер и количество активных участников сообщества. Обновляется ли проект, есть ли у него поддержка – или он тихо увядает? Поскольку более 60% веб-сайтов используют jQuery, существуют сотни тысяч плагинов на все случаи жизни (только на github их более 175000) и множество тьюториалов, нет необходимости волноваться за этот пункт.

1.1.4 Небольшой размер

Хоть размер и не имеет особенного значения для JS-фреймворка – всё ж приятно знать, что jQuery весит всего 32Кб в сжатом виде. Последняя версия AngularJS весит 38Кб. Что это значит? Да просто, если вам нужен только jQuery, то и используйте его. Но если вам нужна дополнительная функциональность, которая есть только в AngularJS, то выбирайте его. А почему бы просто не собрать коктейль из нужных jQuery-плагинов? — спросите вы. В принципе, можно и так. Но минусы, с которыми вы столкнётесь при поддержке кучки плагинов от третьих лиц при разработке большого проекта, скорее всего перевесят плюсы такого подхода. А добавив десяток-другой плагинов, вы обнаружите, что общий объём JS-кода вырос.

1.1.5 Дополняющие jQuery проекты

Если вам всё-таки приходиться ограничиваться jQuery, но тем не менее, вам требуются дополнительные возможности – обратите внимание на следующие проекты.

Шаблонизация:
— Mustache (шаблоны без внутренней логики; поддержка шаблонов как на стороне клиента, так и сервера)
— Handlebars (логика в шаблонах)
— Dust.js (мой любимый шаблонизатор со стороны клиента, включающий логику, асинхронный рендеринг страниц, фильтры, поддержка потоков и т.п.)

Привязка данных:
— Knockout (MVVM фреймворк; позволяет связывать элементы DOM к данным модели; при изменении данных UI меняется автоматически)
— Rivets.js (не привязан к модели и контроллеру, работает с существующими библиотеками, привязанными к событийной схеме — Backbone.js и Stapes.js)
— Ractive.js (библиотека по созданию реактивных UI, с поддержкой декларативно двусторонней привязки данных и событий)
— Ember.js (фреймворк для создания больших веб-приложений с роутингом по url, шаблонами, связанными с данными)

Управление зависимостями:
— RequireJS (популярный загрузчик модулей, работает во всех браузерах и Node.js, поддерживает формат AMD)
— Inject (поддерживает и CommonJS и AMD, кеширование localStorage и др)
— StealJS (разработан для упрощения управления зависимостями, при этом не теряя в мощности и гибкости. Поддержка ES6, CommonJS, AMD, CSS, LESS и других)

Набор разнородных проектов с открытым исходным кодом будет иметь различный уровень качества кода – об этом не стоит забывать.

«Поддержка кода упрощается при минимизации зависимостей» – Дэниел Лэмб

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

1.2 Набор инструментов от AngularJS

AngularJS – набор инструментов для построения фреймворка, наиболее подходящего для вашего проекта — angularjs.org

Сравнивая структуры фреймворков, я бы разместил AngularJS между Backbone.js и Ember.js. Backbone («позвоночник») даёт вам голый скелет, на который можно повесить всё, что угодно. В Ember довольно жёсткие правила по тому, как и что нужно делать.

AngularJS балансирует между двумя подходами. Его структура поощряет к разделению сущностей контроллеров, сервисов, директив… И при этом остаётся достаточная гибкость и расширяемость.

1.2.1 Модульное тестирование

AngularJS был написан так, чтобы его легко было тестировать. То есть, у вас не остаётся отговорок для того, чтобы не писать тесты. Команда разработчиков даже создала специальный инструмент для запуска тестов, Karma (бывш. Testacular), поддерживающий фреймворки для тестирования Jasmine, Mocha и QUnit.

1.2.2 Полное тестирование (End-to-End Testing)

Часто решения для клиентской стороны обходят вниманием тестирование end-to-end для проверки работы приложения от начала и до конца. Разработчики AngularJS озаботились и этим, создав фреймворк Protractor. Он построен на основе WebDriverJS и запускает ваши тесты в реальных браузерах. Используя и Karma и Protractor, вы можете написать все тесты на JS в одном фреймворке (например, Jasmine).

Конечно, кое-что остаётся неохваченным: например, тестирование быстродействия и загрузки.

1.2.3 Интеграция

Многофункциональные инструменты бывает сложно встроить в ваш процесс разработки. Я создал для этого вспомогательный проект AQUA, т.е. «Automated QUality Analysis» – автоматический анализатор качества. Он помогает простым образом оценивать качество кода. Цель проекта – определять качество кода, не ограничивая структуру проекта.

1.2.4 Привязка данных в шаблонах

jQuery хорош для добавления интерактивности на страницу, но у него нет инструментов для привязки данных модели к динамическим шаблонам.

AngularJS же даёт нам возможность декларативной двусторонней привязки.

Императивная привязка через jQuery

Хотя jQuery устраняет ненужную возню с кроссбраузерностью и другими частностями, подход AngularJS ещё более прост. Меньше кода – меньше багов!

Декларативная привязка данных в AngularJS

1.2.5 Управление зависимостями

Сложность этого управления растёт вместе с ростом приложения, особенно если вы правильно пишете код и разделяете его на аккуратные модули.

AngularJS использует простую и элегантную форму аргументов при объявлении функции:

При создании MyController, $scope и экземпляры dep1 и dep2 автоматически передаются внутрь. Не нужно хардкодить зависимости через глобальные переменные или создавать экземпляры вручную в компонентах.

1.2.6 Кривая обучения

AngularJS сложнее в обучении, и его кривая обучения длиннее, чем у jQuery. Рекомендую для изучения пользоваться помощью сообщества AirPair.

2 Инструкция по переходу

Если вы, оценив все достоинства и недостатки двух фреймворков, решили начать миграцию с jQuery на AngularJS, то остаток статьи даст вам несколько советов по этому процессу.

2.1 Проекты с нуля

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

2.2 Задача

Предположим, нам нужно сделать одностраничное приложение. Для конкретики это будет социальная сеть под названием airstream. Версия на jQuery будет использовать Sammy.js для роутинга и Mustache.js для шаблонов. Версия AngularJS должна давать ту же функциональность, что и jQuery, но только на основе встроенных в AngularJS библиотек.

2.3 От jQuery к фильтру Angular

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

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

Прошли тесты – давайте мигрировать!

2.4 Полная миграция

Чем переписывать все плагины с нуля, быстрее осуществить смешанный подход. Но в долгосрочной перспективе модульность и тестируемость оправдывают себя. Поскольку мы работаем со строковыми данными, фильтр AngularJS хорошо подойдёт для автозамены текста на ссылки. По правилам TDD сначала поправим модульные тесты:

А теперь и сам код:

2.5 Смешанный подход

Но если ваши плагины для jQuery весьма сложны и у вас нет времени портировать их все? Можно воспользоваться возможностью AngularJS включать в себя jQuery. Если коротко, то вы делаете пустую оболочку-компонент, пишете для неё модульные тесты, а внутри вызываете плагин для jQuery. Позже, когда будет время, можно будет переписывать всё с нуля. Но это не лучший подход. Пример:

Основы AngularJS на практике

Введение

AngularJS – фреймворк-библиотека Javascript, разработанная для создания одностраничных приложений на основе MVC (Model-View-Controller) шаблона.

Будем осваивать данную технологию на практике.

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

тег с данным кодом:

script src =» http :// ajax . googleapis . com / ajax / libs / angularjs /1.3.14/ angular . min . js «>

Следующим шагом мы явно укажем на то, что наша страница является AngularJS приложением. Нужно добавить ng-app директиву, которой мы обозначим корневой элемент приложения. Зачастую таким элементом выступает тег или же тег . Добавим эту директиву к :

meta charset =»utf-8″>

script src =»http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js»>


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

p > Результат произведение чисел 123 и 45 равен : <<123 * 45 >> p >

Запустим в браузере:

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

AngularJS позволяет разработчику легко взаимодействовать с пользовательским вводом. Для этого есть соответствующая директива ng-model , которая связывает значения HTML элементов контроля (teaxtarea, input etc.) с приложением. Использовать эти данные поможет директива ng-bind, добавив эти данные во View ( элемент MVC ) и отобразив их на странице.

Применим полученные знания на практике. В созданный ранее шаблон добавим поле для ввода input > с директивой ng-model и параграф для вывода данных c директивой ng-bind.

meta charset =»utf-8″>

script src =»http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js»>

p > Ввведте свое имя: p >

input type =»text» ng-model =»yourName»>

p > Здравствуй, span ng-bind =»yourName»> span > p >

Откроем в браузере:

Теперь попробуйте ввести свое имя в поле для ввода.

Давайте добавим в данный пример дефолтное значение имени, к примеру Анна. Сделаем это, конечно же, с помощью директивы ng-init , которая позволяет инициализировать любую переменную AngularJS приложения.

В строку добавим директиву ng-init .

input type =» text » ng — model =» yourName » ng — init =» yourName =’ A нна'»>

Посмотрим изменения в браузере:

Цукерберг рекомендует:  Путь программиста-самоучки повторять не рекомендую

Теперь мы имеем значение по дефолту – Анна, но все так же можем изменять его:

Вывод данных в этом примере можно сделать еще одним способом, а именно, использовав выражение. Заменим на <>.

Открыв страницу, мы не увидим абсолютно никаких изменений, а все потому, что выражения в AngularJS связывают данные со страничкой точно так же, как и ng-bind директива.

Как упоминалось в статье ранее, AngularJS строит приложения на основе MVC. Часть модель – представление (Model — View) определяется с помощью директивы ng-app . Контроллер в свою очередь определяется директивой ng-controller .

Рассмотрим пример с использованием контроллера страницы.

Создадим страничку со списком гостей, которых Вы пригласите на свой день рождения.

К созданному ранее шаблону добавим контроллер, а так же установим имя для приложения. В тег внесем следующие изменения:

html ng-app =»firstApp» ng-controller =»firstController»>

Далее добавим с типом text для введения имени гостя и еще один с типом submit для добавления гостя в список. Также добавим

script src =»http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js»> script >

body ng-app =»firsApp» ng-controller =»firstController»>

h2 > Мои гости: h2 >

form ng-submit =»addGuest()»>

input type =»text» ng-model =»guestsInput» size =»50″ placeholder =»Введите имя гостя»>

input type =»submit» value =»Добавить гостя»>

div ng-repeat =»guest in listOfGests»>

input type =»checkbox» ng-model =»guest.come»> span ng-bind =»guest.guestName»> span >

p > button ng-click =»remove()»> Удалить гостя button > p >

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

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

p > button ng — click =» remove ()»> Удалить гостя button > p >

var app = angular.module( ‘firsApp’ , []);

app.controller( ‘firstController’ , function ($scope) <

var countOfGuests = 1;

var oldGuests = $scope.listOfGests;

angular.forEach(oldGuests, function (guest) <

if (!guest.come) $scope.listOfGests.push(guest);

alert( » Маленькая вечеринка тоже не плохо ! Не печалься! Лучших друзей не бывает много!» );

> else if (countOfGuests >= 9)<

alert( «Праздник?! ВЕЧЕРИНИЩЕ!» );

alert ( «Узкий круг самых близких, это всегда хорошо!» );

В данном коде у нас есть три функции: добавление и удаление гостя и проверка количества гостей.

В функции добавления мы берем введенные данные guestsInput и добавляем их в лист listOfGests. Устанавливаем значение чекбокса в false (в нашем случае, это значит, что человек придет / если значение true, то есть галочка стоит — значит не придет), после чего очищаем поле ввода. Далее увеличиваем счетчик гостей и вызываем функцию проверки их количества.

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

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

Давайте откроем пример в браузере и поработаем с ним:

Добавим несколько гостей:

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

Когда вы добавите больше 9 друзей, тогда увидите такое оповещение :

Поздравляем, вот Вы и создали свое первое одностраничное приложение с помощью AngularJS!

Angular.JS. Быстрое знакомство с популярным фреймворком от Google

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

Проблемы JavaScript

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

Но неужели проблема только в отсутствии профессионалов? Ведь рано или поздно зеленые юнцы, рубящие с плеча, должны набраться опыта и превратится в продвинутых учителей своего дела. Конечно же, нет. Причины лежат в самом языке и его архитектурных проблемах. Разработку JavaScript можно сравнить с гонками формула 1 – спорт-кары развивают реактивную скорость, но крайне ненадежны. Времени на создание языка было потрачено непростительно мало. Добавим сюда внезапную смену концепции проекта (изначально JavaScript планировался как функциональный язык) и в итоге получим то, что получили. Местами запутанный синтаксис, непредсказуемость работы некоторых операторов, бесконечные нюансы со слабой типизацией, проблемы с областью видимости переменных и кучу других дефектов, способных нарушить психику людей, привыкших работать с нормальными языками.

Первым, кто отважился по-настоящему развернуть неповоротливый JavaScript, стал Джон Резиг. Он разглядел в гадком утенке невидимое изящество и отважился решить одну из самых важных на то время проблем: покончить с бесконечным переписыванием одного и того же кода. В то время он занимался разработкой сайта компании Brand Logic и нюансы JavaScript прочувствовал на собственной шкуре.

Результатом его рвения стал первый релиз библиотеки jQuery. Она должна была решить не только проблему одноразового кода, но и добиться хоть какой-то кросс-браузерности. Не оставленным без внимания остался и синтаксис JavaScript. Библиотека позволила сократить многие монструозные конструкции и стала неким кусочком синтаксического сахара. Каждый новый релиз библиотека совершенствовалась и вбирала в себя новые возможности. Сегодня jQuery является неотъемлемыми инструментом любого web-разработчика и представить современный сайт без ее использования (или альтернатив) уже проблематично.

Ну а дальше началось самое интересное. jQuery показала, что JavaScript способен на многое и возможно именно это послужило своеобразным пинком для многих игроков web’а. К языку стали относится более снисходительно и пытаться всячески развивать. Чего только стоит пример Google, подаривший нам быстрейший JavaScript-движок V8. Благодаря ему появилась возможность создавать тяжелые js приложения. Вновь открывшиеся перспективы стали подспорьем для создания принципиально новых технологий на базе JavaScript. Достаточно назвать Node.JS и сразу становится ясным, что сегодня JavaScript намного больше, чем скриптовый язык. Сегодня он готов взять на себя все этапы создания приложения (клиентскую и серверную часть) не прибегая к вспомогательным инструментам.

JavaScript-фреймворки

На смену библиотекам вроде jQuery в мир JavaScript стали приходить фреймворки, реализующие популярный паттерн MVC (MVVM, MVP и т.д.). Фреймворки стали приносить новую культуру разработки и альтернативные взгляды на устоявшиеся в умах девелоперов вещи. Все больше стали подниматься вопросы применения паттернов, хорошо зарекомендовавших себя в мире большего программирования, и в умах js-разработчиков наконец-то стала укладываться аксиома: «Нельзя мешать логику с представлением».

Преимущества фреймворков, по сравнению с изобретением собственных «труповозок» видны невооруженным глазом. Один из самых существенных, на мой взгляд, является избавление от рутинного кода, который тянется от проекта к проекту. Фреймворк предоставляет разработчикам каркас будущего приложения и решение задач, встречающихся в большинстве проектов. Например, программисту не нужно думать, как принять данные от клиента и передать их на сервер, т.к. все необходимое скорей всего реализовано авторами фреймворка. Вместо этого разработчику предлагается сосредоточиться функционалом собственного приложения.

Другим немаловажным плюсом всех фреймворков будет стандартизация кодирования. Если разработчик решается применять готовый каркас в своем проекте, то он должен быть готовым следовать его заповедям. Это значит, что ему нужно не полениться — один раз ознакомиться с правилами и быть спокойным, что в последствие код без проблем может дорабатываться другими разработчиками. Новому девелоперу будет проще разобраться в хорошо документированной структуре (особенно, если он уже имел опыт работы с этим решением), чем понять чей-то оригинальный велосипед.

Лежащий в основе большинства современных фреймворков паттерн проектирования MVC хорошо зарекомендовал себя и теперь стал доступен для JavaScript мира. Конечно, особой новизны и революции в этом событии нет. Любой продвинутый разработчик может без всяких фреймворков спроектировать приложение, следуя этому паттерну. Однако «может» и «обязывают» разные вещи. Учитывая, что в JS сообществе на передовые методики долго все клали железный болт, то требование применение паттерна со стороны фреймворка будет весьма кстати.

Angular JS

Проект Angular.JS относительно новый. Впервые был представлен в 2009 году. За это время вышло несколько версий и вокруг продукта сколотилось плотное сообщество. Успех к проекту во многом определил его родитель – компания Google. К релизам корпорации добра гики относится с особым трепетом, особенно если речь идет об инструментарии для разработчиков. В этот раз получилось тоже самое. Не буду вдаваться в технические дебри, а лучше сразу расскажу, чем зацепил проект лично меня.

Он предельно прост

Angular.JS имеет достаточно низкий порог вхождения по сравнению со многими подобными решениями. Документация носит слегка противоречивый характер. Она вроде хорошо структурирована, есть примеры кода, но некоторые вещи освещены крайне слабо. С ними придется разбираться самостоятельно путем изучения исходников или комментариев от коллег по цеху. Например, трудности понимания работы scope (областей видимости) развеют комментарии Misko Hevery на StackOverflow и просмотр видео «AngularJS. Best Practices» (http://goo.gl/UYG6Q).

Декларативный подход

Разработчики Angular.JS отошли от традиционной идеи: «HTML враг и нужно с ним бороться». Вместо этого они решили естественным образом расширить язык разметки, путем ввода дополнительных директив.

Тестирование

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

Выражения

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

Директивы Angular.JS

Директивы являются одной из ключевых возможностей Angular.JS. Они позволяют разработчику описать поведение отдельных элементов и расширить синтаксис HTML. В состав angular входит лишь базовый набор директив. Однако, никто не мешает нам его расширить своими собственными наработками. Правильно созданные директивы могут использоваться и в других проектах. Некоторые разработчики даже практикуют выкладывать свои коллекции компонент в публичный доступ. Ярким примером тому является команда AngularUI, которые выложили и поддерживают в актуальном состоянии порядка двадцати готовых к использованию компонент.

Я неспроста сказал, что директивы являются одной из ключевых возможностей. Начинающие разработчики частенько пропускают эту мысль мимо ушей и начинают мудрить по своему – изменяют напрямую DOM. Этого делать ни в коем случае нельзя. Почему? Во-первых, так гласят священные заповеди Angular.JS, а во-вторых разработчик лишается вкусностей вроде многоразового использования своих наработок, простого сопровождения кода и т.д.

Scope, производительность и мифы

О производительности Angular можно найти много негативных мнений. По некоторым заявлениям, производительность фреймворка недостаточно хороша и не годится для серьезных приложений. Например, нередко можно встретить примеры, авторы которых демонстрируют непригодность фреймворка для обработки нескольких десятков тысяч объектов. «Тормозит, ваш angular с его продвинутым биндингом!» — кричат ярые противники. При детальном рассмотрении примеров становится, очевидно, что проблема надуманна и их авторы не удосужились прочитать до конца документацию и вспомогательные материалы с официального блога.

Чтобы раз и навсегда развеять мифы о производительности разберемся с таинственной сущностью scope (область видимости). Scope – это не модель и ненужно пытаться ее из него делать. Ничего хорошего из этого не получится. В руководстве по angular четко сказано, что под моделью подразумевается любой массив данных, а scope может содержать ссылку на модель. Не нужно пихать все данные из модели в scope. Да, в таком контексте ими удобно манипулировать, но кроме тормозов никакой выгоды ты не получишь. Не стоит считать все вышесказанное банальным обходным маневром и отмазкой со стороны разработчиков angular. Это архитектура angular.js и с ней нужно считаться. Тем более, не стоит забывать о паттерне MVVM. Помимо традиционной сущности «модель» он выделяет «модель-представление» и в данном случае, scope это есть модель-представление, а значит, в ней должны быть данные, которые требуется отображать.

Получается, что наезды на производительность angular по большей части неуместны. Во всяком случае, на озвученных выше примерах. Хорошо, один миф разрушен. Но ведь, проблемы могут случиться (теоретически) и на более скромных объемах. Некоторые разработчики утверждают, что тормоза могут проявляться, когда в scope напихано ни много, ни мало, а 2000-3000 объектов. Как быть с этим аргументом? Частично ответ я уже дал – не нужно пихать в scope то, что не нужно отображать прямо сейчас. Вот серьезно, я не могу представить ни одной задачи, которая может потребовать вывод такого большего количества объектов на одной странице. Тут либо закралась ошибка в архитектуре приложения, либо разработчик неправильно трактует решаемую задачу.

Почему же несколько тысяч элементов могут вызывать серьезные проблемы с производительностью? Ну, ей, богу, в каком веке мы живем? Неужели пару тысяч объектов могут стать серьезной проблемой для современного ПК? На самом все несколько сложнее, чем просто большое количество объектов. Причина кроется в работе биндинга. Во время компоновки шаблона директивы создают так называемых наблюдателей ($watch). Наблюдатели уведомляют директивы об изменения свойств, чтобы те в свою очередь во время обновили значения элементов в DOM. Эта операция производится часто, поэтому при большом количестве объектов в scope тормоза будут неизбежны.

Загрузка angular-приложения

Начальная загрузка angular приложения выполняется при помощи директивы ngApp. Данный способ подходит в большинстве случаев, но при желании можно все сделать ручками. В нашем примере мы пойдем простым путем, т.е. воспользуемся директивой ngApp, указав ее в корневом элементе страницы. После объявления этой директивы произойдет следующее:

  • создается injector (механизм, применяемый для получения экземпляров объектов, предоставляемые поставщиком; загрузки модулей и т.д.), который будет использоваться для внедрения зависимостей в пределах приложения;
  • injector, сформирует глобальный scope в контексте модели нашего приложения;
  • angular начнет обрабатывать дерево DOM, начиная с элемента в котором была объявлена директива ngApp. Во время этого процесса будут созданы все найденные биндинги и выполнены обнаруженные директивы.


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

    ToDo лист. Держим задачи под зорким надзором

    Я долго думал, какой лучше подобрать пример для демонстрации angular. Скажу честно, сначала у меня была грандиозная идея сотворить матерое расширение для браузера Google Chrome, способное взаимодействовать с различными сервисами корпорации добра. Но, к сожалению, до конца отладить весь задуманный функционал у меня не вышло. Что-то постоянно не работало и глючило. В итоге я решил рассмотреть классический пример – создание ToDo листа, а про разработку расширений для Google Chrome, когда-нибудь сделаю, с позволения редактора рубрики, отдельную статью.

    Для начала сформулируем задачу. Что из себя представляет типичный ToDo лист? В первую очередь – это список задач, которые необходимо выполнить в определенное время. Каждая задача это отдельный элемент, обладающий минимум двумя свойствами: наименование (описание задачи) и состояние.

    Представление

    Часть кода представления я привел в первом листинге, а полную версию ты всегда можешь взять с нашего диска. Любое angular приложение начинается с объявление директивы ngApp. Обрати внимание, что в коде название директив пишется через тире, а в хелпе и в тексте стать слитно. Для директивы ngApp можно указать дополнительный атрибут – имя модуля, который будет загружен при инициализации приложения. Пока оставим этот вопрос открытым, а в качестве имени модуля укажем todomvc. Далее я привожу описание формы с одним единственным полем. В него пользователь будет вводить новую задачу и при нажатии кнопки «Отправить» она будет отправляться в общий список.

    Цукерберг рекомендует:  Swift - Событие встряхивания устройства SWIFT

    Обработать событие отправки данных введенных в форму поможет директива ngSubmit. Она позволяет забиндить действие, которое будет выполняться при отправке данных из формы. В нашем случае таким действием будет метод контроллера addTodo(). В теле метода будет описан код, добавляющий новую задачу в модель. Сам текст задачи будет вводиться в поле ввода, для которого я указываю директиву ngModel, тем самым устанавливая двухстороннюю привязку с моделью отображения.

    Теперь взглянем на вывод данных из модели. Каждая новая задача обрамляется тегом li, включающий в себя элементы управления: изменение состояния, редактирование или удаление. Функционал этих кнопок реализуется тем же способом, что и был применен для добавления новых задач. С одним лишь отличием, вместо директивы ngSubmit используется ngClick (обрабатываем клик по кнопке) или ngDblClick (двойной щелчок).

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

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

    Последнее, что нуждается в пояснении – конструкция filter:statusFilter . Здесь filter – встроенная функция, позволяющая отфильтровать данные из массива todos, соответствующие значению переменной statusFilter (ее значение будет изменяться в контроллере).

    Контроллер

    В втором листинге я привел описание контроллера — ключевой части нашего примера. Контроллер в angular оформляется в виде обычной JavaScript-функции. Например: function MyController () .

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

    Правда, при вынесении контроллера в отдельный файл мы должны как-то сообщить angular, что в контексте нашего приложения необходимо использовать именно этот контроллер. Решением этого вопроса занимается директива ngApp. В качестве дополнительного атрибута она принимает имя модуля, который будет загружен при инициализации приложения. Под модулем в Angular подразумевается совокупность служб, директив, фильтров и различной вспомогательной информации, которая может быть использована для конфигурирования injector. Для нашего примера в качестве модуля я указываю «todomvc», а его создание описываю в файле app.js:

    После этого, в рамках данного модуля можно описать наш контроллер, что я и делаю конструкций:

    Давай разберем ее на кусочки:

  • todomvc – имя модуля (вспоминаем про директиву ngApp и файл app.js);
  • controller – служба, отвечающая за создание экземпляра контроллера. В качестве параметров мы должны передать название функции с контроллером и ссылка на объект, соответствующий контроллеру. Обрати внимание, как я передаю ссылку на объект контроллера. Поскольку отдельной функции контроллера у нас нет, то я ее определяю прямо в параметре.
  • function TodoCtrl($scope, $location, todoStorage) – функция, определяющая контроллер.В качестве параметров передаем:
  • $scope. Область видимости, созданная при объявлении директивы ngController;
  • $location. Служба, предназначенная для работы с URL, введенным в адресной строке браузера;
  • todoStorage. Самописная служба, созданная для взаимодействия с локальным хранилищем.

    А теперь самое интересное, ни один из этих параметров (для функции контроллера), кроме Scope, ни является обязательным. Все остальное добро мы передаем на свое усмотрение и сугубо для решения конкретной задачи. Количество параметров и их тип для функций-контроллеров может быть любым.

    С объявлением контроллера разобрались. Теперь посмотрим на его внутренности. В самой первой строчке я объявляю модель (todos), которая представляет собой обычный массив. В нем будут храниться все добавленные пользователем задачи. Чтобы получить список задач, который отображен в представлении в настоящее время, достаточно обратиться к свойству todos в scope. Однако, нас должны интересовать не только текущие данные, но и ранее сохраненные в локальном хранилище, которые мы можем получить через описанную мной службу todoStorage. После этих манипуляций, в модели будут абсолютно все данные.

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

  • значение, за которым требуется наблюдать;
  • функция, которая вызывается при изменении значения переданного в качестве первого параметра;
  • признак необходимости сравнивать объект;

    В теле функции, которая будет вызывать при изменении содержимого модели, я определяю всего лишь один метод – todoStorage.put(todos) . Он отвечает за сохранение списка задач в локальное хранилище.

    Чуть ниже по тексту второго листинга ты можешь увидеть похожий трюк. Только на этот раз следить нужно за изменением адресной строки. Появление параметра «active» означает необходимость установки фильтра, отображающего пользователю только невыполненные задачи. Ну а если в url присутствует параметр «completed», то делаем обратную операцию – невыполненные задачи скрываем, а завершенные отображаем.

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

    Тестируем

    Написание тестов – неотъемлемая часть разработки приложения с использованием angular. Для написания и выполнения тестов есть все необходимое из коробки и сейчас ты в этом убедишься на реальном примере. Я не буду заходить далеко, а просто приведу часть кода, тестирующего контроллер с необходимыми для понимания комментариями. Все подробности ты узнаешь из документации.

    Вместо заключения

    Однозначно, Angular.JS получился качественным и интересным решением, которое стоит применять в своих проектах. Компания Google вновь смогла удивить нас релизом хорошо продуманного продукта. Нельзя сказать, что он получился идеальным, но с возложенными на него задачами ему справиться под силу, а это самое главное. На этом спешу откланяться и пожелать тебе взглянуть иначе на мир JS разработки.

    Листинг 1. Представление

    Листинг 2. Контроллер в Angular.JS

    Листинг 3. Тестируем код контроллера

    Как изучать Angular.JS

    Братья по духу

    Как отладить Angular приложение

    При разработке на angular тебе однозначно понадобится дополнительный инструмент отладки. К счастью, такой инструмент уже создан и выполнен в виде расширения для Google Chrome. Называется оно Angular JS Batarag и после установки из Google Play расширение встраивается дополнительной примочкой в Developers Tools. Batarag позволит тебе просматривать иерархию scope, их содержимое и при желании изменять значения прямо из консоли. Более подробную информацию ты сможешь получить из видео, доступного на странице расширения в Google Play.

    `$.each()` alternative in Angular JS

    What is the alternative for jquery’s $.each() loop in Angular JS.

    I have got the following in jquery (in my Angular JS based project):

    and I don’t want to use the mix of jquery and angular, because they say it is a bad practice to do so (is it?). Is there any feature that angular provides like $.each() ? Or should I go with the plain javascript?

    3 Answers 3

    You can use angular.forEach() for iterating in angularjs

    Another option is to use Array.prototype.forEach and shim it for old browsers using https://github.com/es-shims/es5-shim.

    That way, you can do:

    angular.forEach does a great job for me. It provides brevity;

    But it depends from one use case to another. In most of the code I’ve written, it proves quite useful and it has completely replaced $.each for me.

    About mixing things up, angular comes with a subset of jQuery methods that, in most cases, do the job and don’t require anything else. I prefer keeping the application lightweight. Also, its a matter of principles for me to not mix things up with jQuery – since Angular is a completely different line of thought.

    10 преимуществ использования фреймворка Angular.js при разработке веб-приложений

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

    Во-первых, что такое Angular.js фреймворк? Это open source-фреймворк (не библиотека!), который позволяет создавать популярные сегодня одностраничные приложения. После запуска в 2009 году Angular.js быстро набрал популярность и не собирается сдавать позиции — он остается самым востребованным JavaScript-фреймворком на GitHub (в топе как по форкам, так и по количеству «звезд»).

    Ниже мы перечислили исчерпывающие причины, почему стоит выбрать AngularJS.

    1. Большое комьюнити

    Начнем с того, что у Angular.js огромнейшее комьюнити. В него входят как участники постоянной команды разработки, так и просто те, кто хотят внести свою лепту в развитие фреймворка с открытым исходным кодом. По Angular.js проходит множество конференций, о нем говорят на хакатонах и спорят в тематических ИТ-коммьюнити. Существует много книг и он-лайн ресурсов по Angular.js для разработчиков. Для клиентов это означает: выбрав Angular.js, вы будете не только в тренде, но и всегда сможете найти разработчиков для поддержки своего проекта.

    2. Декларативный стиль кода

    При создании шаблонов в Angular.js применяется декларативная парадигма программирования. Это делает код более легковесным, облегчает его чтение и поддержку, так как описывается необходимый конечный результат, а не все шаги по его достижению. Например, сравните фрагменты кода на JavaScript:

    3. Использование директив

    В качестве языка шаблонов в Angular.js используется HTML. Он расширяется с помощью директив, которые добавляют в код сведения о требуемом поведении (например, о необходимости загрузить определенный модуль сразу после загрузки страницы). Директивы позволяют вам сконцентрироваться на проработке логики и работать более продуктивно. Их можно использовать повторно, что также повышает читабельность кода.

    4. Высокая скорость разработки

    При правильном подходе с помощью Angular.js можно быстро разрабатывать даже большие приложения.

    5. MVC из коробки

    В AngularJS используется схема MVC, разделяющая логику, представление и данные приложения:

    Это позволяет создавать одностраничные веб-приложения (Single Page Application). В Angular.js имеется служба $http, которая обеспечивает взаимодействие с удаленными HTTP-серверами с помощью XMLHttpRequest или JSONP. При передаче объекта JavaScript на сервер он будет автоматически преобразован в строку JSON. После получения ответа служба также попытается преобразовать полученную строку JSON в JavaScript. Используя службу $http можно создать собственную службу с полным контролем над обработкой URL и данных.

    6. Полезные фичи для SPA

    Angular.js для вебприложений – это как вода для рыб. Трудно представить, чтобы они могли существовать друг без друга. Например, Angular.js предоставляет возможности по работе с валидацией форм. Если на странице используются формы, FormController записывает их состояние. Используя эту информацию, мы можем задавать поведение HTML-элементов в UI (например, скрыть кнопку «Очистить форму», если пользователь еще не начал вводить данные в форму). Для обработки ошибок в Angular.js предусмотрены встроенные валидаторы (required, ng-required, ng-minlength, ng-pattern и другие), но при необходимости мы также можем создавать собственные. Сообщения об ошибках можно выводить как для всей формы, так и для ее отдельных полей.

    Шаблоны или темплейты в Angular.js представляют собой HTML-код, дополненный элементами и атрибутами Angular.js. Фреймворк дополняет шаблон информацией из модели, чтобы показать пользователю динамическую страницу. Для обработки данных и форматирования значений, полученных от модели, используются фильтры. Они позволяют показать нужные данные пользователю без необходимости вносить изменения в исходные данные.

    7. Модульность

    В Angular.js можно организовывать приложения из отдельных модулей. Такие модули могут как зависеть друг от друга, так и быть автономными. Например, в последнем случае модуль входа через Facebook можно использовать сразу в нескольких частях приложения, скажем, на странице входа и на странице оформления заказа. А благодаря встроенному механизму внедрения зависимостей Angular.js сам распознает ситуацию, когда нужно предоставить вспомогательные объекты, предоставляет их и связывает объекты между собой.

    8. Наличие готовых решений

    Что важно, для Angular.js существует огромное количество готовых решений, которые позволяют решать довольно разнообразные задачи, используя уже готовые модули. Например, существует несколько модулей для роутинга самый популярный из которых ui-router, так же есть различные модули для работы с таблицами ui-grid, ng-table и много других.

    Из-за отсутствия жесткой структуры проекта в AngularJS можно создавать приложения с достаточно разнообразной структурой. Также вы можете использовать AngularJS для мобильной разработки (разумеется, речь идет о создании так называемых гибридных приложений). Как использовать Angular.js фреймворк в этих целях можно почитать здесь.

    9. Двустороннее связывание данных

    В Angular.js применяется двустороннее связывание: любые изменения в пользовательском интерфейсе сразу же отражаются на объектах приложения и наоборот. Фреймворк сам следит за событиями браузера, изменениями модели и действиями пользователя на странице, чтобы сразу обновлять нужные шаблоны. При этом в коде JavaScript не требуется хранить ссылки на DOM-элементы и явно ими манипулировать. Мы просто описываем необходимый результат в терминах состояния модели, и нам не нужно использовать низкоуровневые конструкции.

    10. Простота тестирования

    Части приложения располагаются внутри модулей Angular.js, которыми легко манипулировать. Такая разбивка на модули позволяет загружать только нужные службы и эффективно выполнять автоматическое тестирование. При этом если придерживаться принципа «один файл — один модуль», не будет возникать необходимости запоминать порядок загрузки модулей.

    Несмотря на вышеупомянутые особенности AngularJS, у него есть и несколько недостатков:

    1. Сложность освоения. Трудности обычно возникают у тех, кто раньше использовал библиотеку jQuery, ведь в отличие от Angular.js она полагается на выполнение манипуляций с деревом DOM.
    2. Замедление работы при использовании более 2000 вотчеров (или слушателей событий).
    3. Отсутствие обратной совместимости со второй версией. Разумеется, вы можете начать подготовку своего кода к миграции уже сейчас, но гарантий, что она пройдет гладко, нет.

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

    Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

    Angularjs — Средство для создания множества сущностей в angular.js

    HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

    Alternatives

    Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

    Extensibility

    AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

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