Уроки AngularJS 2017
Приветствую Вас, друзья, в новом цикле уроков, посвященных знакомству с JS фреймворком AngularJS и изучению основ работы с ним. Собственно, данный цикл будет называться просто - Уроки AngularJS (на русском языке). Для чего нужен данный фреймворк и какова сфера его применения?
Если перед вами стоит задача написать сайт или веб-приложение, где все или почти все работает без перезагрузки страницы, т.е. с использованием AJAX запросов, тогда, вполне возможно, вам стоит посмотреть в сторону JS фреймворков.
Конечно же, можно все то же самое сделать и с помощью библиотеки jQuery или даже на чистом JS. Однако, такой код может быть гораздо более сложен и запутан, его поддержка и последующее расширение могут быть довольно проблематичны, по сравнению с кодом, написанными с помощью фреймворка, предлагающем ясную и чистую структуру кода на основе MVC шаблона (Model-View-Controller) или, быть может немного точнее - MVVM (Model View – View Model).
Хотя здесь на самом деле возможна и обратная картина, поэтому идеализировать фреймворк и воспринимать его как абсолют - также не нужно. Абсолютно идеальных вещей не бывает, везде есть свои плюсы и свои минусы.
Стоит понимать, что JS фреймворки, в частности AngularJS, имеют вполне конкретную сферу применения: создание одностраничных приложений (SPA - Single Page Application). Поэтому лепить его куда ни попадя - не очень хорошая практика. Хотя бы потому, что могут возникнуть проблемы с банальной индексацией ключевого контента поисковыми роботами. Хороший вариант сферы применения JS фреймворков - админская часть сайта. В целом, AngularJS - это фреймворк для веб-приложений, а не сайтов.
Из каких фреймворков выбирать и какой выбрать? JS фреймворков на самом деле множество. Наиболее известны, к примеру: Ember.js, Backbone.js, Knockout. Все они в той или иной мере похожи и, по сути, выполняют одинаковые задачи. AngularJS на сегодняшний день является, пожалуй, одним из наиболее популярных JS фреймворков. Он имеет относительно неплохую документацию со множеством примеров. К тому же, это фреймворк от мирового лидера - компании Google, что уже может свидетельствовать в пользу его выбора.
В уроках AngularJS мы шаг за шагом попробуем изучить его основы, его наиболее полезные и часто используемые возможности. Ну и как итог изучения, попробуем написать несложное, но полноценное веб-приложение на AngularJS. Уверен, что мы добьемся быстрого освоения AngularJS!


Урок 1. AngularJS. Вводный:
От автора: если перед вами стоит задача написать сайт или веб-приложение, где все или почти все работает без перезагрузки страницы, т.е. с использованием AJAX запросов, тогда, вполне возможно, вам стоит посмотреть в сторону JS фреймворков, в частности, это может быть AngularJS. В этом уроке мы познакомимся с данным фреймворком, попробуем понять сферу его применения, а также на простых примерах увидим мощь фрейсворка AngularJS.


Урок 2. AngularJS. Директивы и модули:
От автора: в этом уроке мы приступим непосредственно к изучению JS фреймворка AngularJS. Этот урок мы посвятим изучению основы AngularJS, основы его философии — понятию директивы, т.е. сущности, расширяющей возможности HTML. Также мы создадим первый модуль для работы приложения AngularJS, добавим в него контроллер и немного затронем понятие области видимости ($scope).


Урок 3. AngularJS. Наследование контроллеров и двухстороннее связывание данных:
От автора: в этом уроке мы познакомимся с двумя новыми директивами: ngInit и ngModel. Последняя директива позволяет организовывать двухстороннее связывание данных. Кроме того, мы познакомимся с наследованием в AngularJS, а также узнаем чуть больше о сервисах $scope и $rootScope.


Урок 4. AngularJS. Внедрение зависимости (Dependency injection):
От автора: в этом уроке мы познакомимся с основами шаблона проектирования под названием Dependency injection (Внедрение зависимости). Используя его возможности, мы легко можем получить доступ к нужным сервисам в коде контроллеров.


Урок 5. AngularJS. Controller as синтаксис:
От автора: в этом уроке мы познакомимся с новым синтаксисом для работы с контроллерами — это так называемый controller as синтаксис. Использование данного варианта позволяет исключить использование сервиса $scope в работе, а также позволяет сделать сложный код чуть более понятным. Также в уроке мы научимся создавать методы контроллера.


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


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


Урок 8. AngularJS. Создание директив. Часть 2:
От автора: в этом уроке мы продолжим знакомиться с директивами. Напомню: AngularJS уже предлагает нам десятки различных директив, расширяющих возможности HTML. Также AngularJS предоставляет нам возможность создавать собственные директивы, в которые можно завернуть любой код и функционал. В этом уроке мы научимся создавать простейшие пользовательские директивы в AngularJS.


Урок 9. AngularJS. Работа с jQuery. jqLite:
От автора: в этом уроке мы продолжим знакомиться с директивами и на примере уже созданной директивы научимся задавать поведение для тех или иных элементов DOM. В частности, мы рассмотрим работу с jQuery и jqLite в AngularJS.


Урок 10. AngularJS. Фильтры в AngularJS:
От автора: в этом уроке мы с вами познакомимся с понятием фильтров в AngularJS. Фильтры в AngularJS используются для форматирования данных перед показом пользователю. AngularJS предлагает нам девять готовых к использованию фильтров. В качестве примера работы мы с вами рассмотрим фильтр currency (денежный фильтр), который предназначен для форматирования цены.


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


Урок 12. AngularJS. Сервис http в AngularJS:
От автора: в этом уроке мы познакомимся с незаменимым сервисом AngularJS — это сервис http. Сервис http в AngularJS позволяет отправлять http запросы на сервер, обмениваясь данными с сервером. Это значит, что мы можем как отправлять данные на сервер, так и получать данные с сервера.


Урок 13. AngularJS routing (маршрутизация):
От автора: в этом уроке мы познакомимся с концепцией маршрутизации в AngularJS. Маршрутизация позволяет создавать одностраничные приложения (Single Page Application — SPA), т.е. приложения, которые целиком размещены на одной странице или, проще говоря, приложения, которые используют единственный HTML документ в качестве шаблона, в который динамически загружаются веб-страницы. Routing (маршрутизация) в AngularJS очень похожи на маршрутизацию в PHP фреймворках, поэтому если вы знакомы с ним, вам будет крайне просто понять концепцию работы маршрутизации в AngularJS.


Урок 14. Параметры маршрутизации в AngularJS:
От автора: в этом уроке мы продолжим работу с маршрутизацией (routing) в AngularJS. Здесь мы научимся передавать и принимать параметры между страницами, тем самым позволяя, к примеру, получать динамические данные с сервера.


Урок 15. Ссылки без хэштега в AngularJS:
От автора: после того, как мы начали использовать маршрутизацию и создавать одностраничное приложение, URL наших страниц изменился — там появился хэштег (символ решетки — #). Это нормальная практика при создании Single Page Application, однако у кого-то может возникнуть желание избавиться от этого символа и получить ссылки без хэштега, ссылки, как и на обычных сайтах. Как это сделать мы и узнаем в этом уроке.


Урок 16. UI-Router — маршрутизатор для AngularJS
От автора: в этом уроке мы познакомимся со сторонним решением для маршрутизации в AngularJS — это маршрутизатор AngularUI Router. Это гораздо более мощное средство для построения маршрутизации, нежели стандартный модуль ngRoute. В этом уроке мы познакомимся с основами работы с модулем UI-Router.


Урок 17. Анимация в AngularJS:
От автора: в этом уроке мы познакомимся с понятием анимации в AngularJS. У нас уже есть простенькое одностраничное приложение, но переходы между его страницами происходят резко и обыденно. Однако AngularJS позволяет улучшить эту ситуацию, предоставляя модуль ngAnimate. Все что нам остается сделать — это описать стили анимации или взять готовые для получения красивых и плавных переходов.


Урок 18. Анимация в AngularJS. Библиотека ngAnimation:
От автора: в этом уроке мы продолжим работать с анимацией в AngularJS. Для реализации анимационных эффектов в AngularJS можно найти множество различных готовых библиотек, использовать которые очень просто. В уроке мы воспользуемся одной из таких библиотек — это библиотека ngAnimation.


Урок 19. Манипуляция с DOM в AngularJS:
От автора: в этом уроке мы рассмотрим варианты работы с DOM в AngularJS. В частности, мы рассмотрим несколько директив: ng-show, ng-hide, ng-if и ng-include. Благодаря перечисленным директивам мы можем подключать шаблоны, показывать или прятать элементы DOM, а также удалять элементы из DOM по условию.


Урок 20. Сортировка данных в AngularJS. Фильтр orderBy. Часть 1:
От автора: в этом уроке мы подробно познакомимся с фильтром orderBy в AngularJS, который в считанные минуты позволит организовать сортировку данных по нужному полю. Для начала мы выведем достаточно большой объем реальных данных, использовав базу данных World, а в следующей части познакомимся с нюансами работы с фильтром orderBy.


Урок 21. Сортировка данных в AngularJS. Фильтр orderBy. Часть 2:
От автора: в этом уроке мы продолжим работу с фильтром orderBy в AngularJS, который в считанные минуты позволит организовать сортировку данных по нужному полю. Здесь мы познакомимся с нюансами работы с фильтром orderBy, а также с различными вариантами его использования.


Урок 22. AngularJS. Пагинация в AngularJS. Часть 1:
От автора: в этом уроке мы начнем решать одну из классических задач в практике веб-программирования — речь идет о пагинации или постраничной навигации. Построение пагинации в AngularJS имеет свои нюансы и особенности о которых мы и поговорим в уроке. В этом и следующем уроке мы для начала создадим простейший вариант пагинации. В дальнейшем мы рассмотрим более универсальное решение.


Урок 23. AngularJS. Пагинация в AngularJS. Часть 2:
От автора: в этом уроке мы продолжим решать одну из классических задач в практике веб-программирования — построение пагинации или постраничной навигации. Построение пагинации в AngularJS имеет свои нюансы и особенности о которых мы и поговорим в уроке. В этом уроке мы завершим написание простейшего вариант пагинации. В дальнейшем мы рассмотрим более универсальное решение.


Урок 24. AngularJS. Пагинация в AngularJS. Часть 3:
От автора: в этом уроке мы реализуем еще один вариант пагинации. На этот раз это будет более классический и, главное, универсальный вариант постраничной навигации, который можно использовать многократно. Для реализации пагинации мы будем использовать фабрику. В результате мы получим классический вариант пагинации с номерами страниц, при клике по которым будем переходить к выбранной странице.


Урок 25. AngularJS. Пагинация в AngularJS. Часть 4:
От автора: в этом уроке мы завершим реализацию классического варианта пагинации. Это будет более универсальный вариант постраничной навигации, который можно использовать многократно. Для реализации пагинации мы будем использовать фабрику. В результате мы получим классический вариант пагинации с номерами страниц, при клике по которым будем переходить к выбранной странице.


Урок 26. AngularJS. Routing (роутинг) и пагинация. Часть 1:
От автора: в этом уроке мы продолжим создание простейшего одностраничного приложения с использованием JS фреймворка AngularJS. В частности, мы настроим маршруты приложения и получим все города выбранной страны. Узнаем, что такое Routing (роутинг) и пагинация.


Урок 27. AngularJS. Routing и пагинация. Часть 2:
От автора: в этом уроке мы продолжим создание простейшего одностраничного приложения с использованием JS фреймворка AngularJS. В частности, мы добавим пагинацию к списку городов и внесем некоторые изменения в наш сервис пагинации, сделав его гибче и универсальнее.


Урок 28. AngularJS. ng-switch и переключение видов:
От автора: в этом уроке мы продолжим создание простейшего одностраничного приложения с использованием JS фреймворка AngularJS. В частности, мы познакомимся с директивой ng-switch, благодаря которой мы можем в зависимости от выполнения условия показывать тот или иной вариант представления. Заодно мы решим классическую задачу переключения видов с табличного на вид списком и наоборот.