Введение в Angular JS. Примеры

Введение в AngularJS. Примеры

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

скачать исходникидемо

Введение

AngularJS — что это? AngularJS это монстр среди JS фреймворков, с помощью огромного набора инструментов можно создавать действительно мощные, простые в обслуживании и структурированные приложения. Данный фреймворк существенно облегчает разработку динамических приложений, благодаря своему синтаксису, простой визуальной манипуляции объектами, а также двусторонней привязке данных. Сегодня мы с вами с головой погрузимся в самые основы Angular и продемонстрируем легкость и мощь фреймворка.

Перед тем, как продолжить, необходимо ознакомиться с терминологией. Выше я уже упоминал «двустороннюю привязку данных», а что это вообще значит? Привязка данных означает связь между моделью (бизнес модель) и видом (UI), и при изменении одного, изменяется и второе. В Angular данные связаны между собой в обоих направлениях. Это значит, если в базе данных что-то обновилось, то вид автоматически обновится для отображения новых данных, и наоборот. При таком подходе манипуляция DOM’ом страницы становится очень простой, а еще это и есть одна из особенностей, почему многие используют Angular.

Angular также применяет контроллеры, принцип действия которых схож с ссылками на виды. Из-за двусторонней привязки данных в Angular очень легко создавать и поддерживать контроллеры, что в итоге очищает код и делает его читаемым. Можно в любой момент получить данные из DOM и отослать их обратно. Также привязка данных делает ненужным большое количество кода, связанного с манипуляцией DOM в JS, еще больше очищая код и придавая модульность контроллерам.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Автозагрузка приложения

Для загрузки любого Angular приложения необходимо вызвать директиву ng-app. Эту директиву можно прописать в любом HTML теге, она используется для автозагрузки приложений Angular. Ng-app представляет из себя корень Angular приложения, и на одной веб-странице может быть запущено только одно Angular приложение. В основном почти всегда вызов директивы можно встретить в теге html:

Заметьте, что мы дали нашему приложению имя app. Посмотрим, как оно себя поведет, добавим немного JS кода. Но перед тем как продолжить необходимо подключить саму библиотеку Angular, а наш код будет находиться в файле app.js. Для добавления Angular в наш проект я использовал менеджер Bower, я настроил его сохранять свои компоненты в папку /lib. Файл app.js я сохранил в папке /app. Наш файл index.html выглядит так:

Далее мы будем работать в файле app.js. Чтобы Angular понял, что мы готовы с ним работать, необходимо задать первоначальное состояние приложения. Ниже код JS:

Код выше можно разбить на 3 части:

Запрет на автоматически запускаемые функции, защищает от захламления глобального пространства переменных.

Объявление Angular

.module(‘app’, []) – устанавливает первоначальное состояние приложения и задает ему имя app

Если интересно, то квадратные скобки в установщике отвечают за загрузку любых зависимостей, которые нам могут понадобиться в шаблоне внедрения зависимостей. В этом уроке мы не будем рассказывать про внедрение зависимостей, но, если вы будете дальше изучать Angular, то это одна из важнейших тем, так что вам нужно с ней ознакомиться самостоятельно! Сейчас наше приложение не делает абсолютно ничего, давайте создадим и добавим первый контроллер и как-нибудь привяжем его к DOM.

Создание первого контроллера

Для объявления нового контроллера в Angular, мы просто прикрепляем строку .controller к нашему модулю (конструктор контроллера). В нашем случае, так как мы пишем весь JS код в одном файле, мы можем просто дописать так:

Стоит обратить внимание на пару вещей. Первое – мы назвали наш контроллер AppController, похожим образом мы назвали наш базовый модуль. Второе – мы использовали строчное подключение, чтобы явно дать понять, что переменная $scope это зависимость от нашего контроллера. И третье, на вход безымянной функции подается переменная $scope, т.е. мы делаем эту переменную доступной внутри функции, а т.е. и для всего контроллера. А что это вообще за переменная $scope?

В Angular scope это объект, связанный с моделью приложения, и работает, как связующее звено между контроллером и видом. Первоначальное состояние scope можно задать, прицепив к объекту различные свойства. Также к объекту $scope можно цеплять методы. Все свойства объекта $scope будут доступны в DOM на уровне объявления контроллера. Но как же объявить сам контроллер?

В html коде нам нужен какой-то раздел DOM, который будет связан с контроллером таким образом, чтобы мы действительно могли применить двустороннюю привязку данных и, наконец, начать работать с Angular. Напомним, что наш контроллер называется AppController, так что объявить контроллер в HTML можно так:

Сейчас мы использовали уже вторую директиву, ng-controller. Теперь наш AppController связан с DOM. Теперь мы полностью готовы! Посмотрим на парочку основных возможностей Angular в действии. Весь код, будем считать, будет внутри функции контроллера.

Рекомендуется использовать в имени контроллера слово controller, чтобы было четко ясно, к какому контроллеру вы обращаетесь в текущем шаблоне. В этом уроке мы так и поступим.

Очень простая двусторонняя привязка данных

В нашем HTML вывод свойств можно делать с помощью двух скобок:

Как можно заметить, на экране переменная usename ничего не отобразит, так как username не добавлена в пространство переменных:

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

Изменение значения свойств с помощью ng-click

В Angular есть еще одна директива под названием ngClick, с помощью которой установить поведение элемента при клике на него. Вот мы постепенно и узнаем про мощь Angular, мы можем обойти все обработчики событий и использовать директиву ngClick. За основу возьмем наш пример выше, изменим его так, чтобы можно было менять username:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Теперь в нашем шаблоне можно напрямую воспользоваться директивой ngClick и подать ей на вход нужное значение. Ниже код HTML:

При клике на кнопку, будет обновляться имя! Опять мы видим двустороннюю привязку данных. Все, что мы сделали, это обновили значение свойства в контроллере, а соответствующее значение уже отображается в DOM. Заметка: Все директивы Angular используют горбатый регистр (т.е. ngClick), а при использовании непосредственно в HTML меняется на ng-click.

Проходим в цикле по массиву с помощью ng-repeat

Часто в JS мы работаем с какими-то наборами данных, которые необходимо пройти в цикле. Для массивов вы использовали цикл for, пробегая массив и сохраняя необходимые результаты в строки для последующего вывода их в DOM. Для облегчения пробежки по массивам в Angular есть директива ngRepeat. Первым делом, создадим массив в контроллере:

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

Мы подключили директиву ngRepeat к тегу tr со строкой user in usersArray. Это значит, что тег tr будет зациклен, а переменная user будет заменяться значением на текущей итерации. Наш массив это просто набор подмассивов, и на первой итерации user[0] отобразит «BB», user[1] отобразит «King» (т.е. на нулевом шаге).

Проходим в цикле по массиву объектов с помощью ng-repeat

Часто в JS требуется работать с коллекцией объектов. Обычно, данные в таком формате возвращаются из баз данных или из API. Создадим типичную коллекцию объектов:

По такой же логике можно пробежаться в цикле по коллекции объектов:

Обратите внимание, как мы обращаемся к свойствам объекта с помощью точки! Просто и эффективно, двигаемся дальше.

Простой способ связи с введенными данными

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

В HTML шаблоне можно связать данные из формы с моделью, тем самым открывая соединение привязки данных:

При любом изменении значения поля input, значение переменной автоматически также обновится. При вызове alert в функции (при помощи ngClick) отобразится уже обновленное значение.

Отображение и скрытие элементов DOM с помощью ng-show и ng-hide

ngShow и ngHide – две довольно аккуратные директивы в том смысле, что они напрямую манипулируют элементами DOM. DOM элементы показываются и скрываются на основе сравнения на true/false. Другими словами, если установить для тега ng-show=»true», то он будет отображаться. Соответственно, если установить ng-hide=»true», элемент будет скрыт. Чтобы показать работу директив нам даже не потребуется JavaScript. Создадим элемент checkbox , и посмотрим, каким образом Angular обрабатывает значения true/false. Ниже HTML код:

Когда «Show box 1» выбран, свойство checkboxModel.box1 устанавливается в true. Т.е. при Angular подставляет ng-show=»checkboxModel.box1″. Таким же образом при выборе второго чекбокса, checkboxModel.box2 устанавливается в true, и блок 2 скрывается.

Изменение имени класса с помощью ng-class

Наше введение в Angular мы закончим на одной из моих любимых директив, ngClass, она позволяет динамически присваивать классы тегам HTML. Можете почитать о различных способах использования ngClass, а в нашем примере обойдемся очень простым кодом. Зададим пустое имя класса и создадим функцию, которая сможет менять это значение.

Присвоим значение textClass к атрибуту ng-class. А также привяжем к кнопке функцию changeTextClass:

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

Заключение

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

Источник: http://callmenick.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Уроки AngularJS

Изучите все возможности AngularJS в авторском курсе!

Смотреть курс

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree