Введение в 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:

<html ng-app="app">
</html>

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

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <script src="lib/angular/angular.min.js"></script>
</head>
<body>

<script src="app/app.js"></script>

</body>
</html>

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

(function() {

  'use strict';

  /**
   * angular
   * Description: Angular!
   */
  angular

  /**
   * app
   * Description: Устанавливаем первоначальное состояние приложения
   */
  .module('app', [])

})();

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

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

Объявление Angular

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

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

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

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

(function() {

  'use strict';

  angular
  .module('app', [])

  /**
   * AppController
   * Description: Sets up a controller
   */
  .controller('AppController', ['$scope', function($scope) {

  }]);

})();

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

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

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

<main ng-controller="AppController">
</main>

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

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

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

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

<p>Hello, <em>{{ username }}</em>!</p>

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

/**
 * username
 * Description: The default username to attach to the scope
 */
$scope.username = 'Nick';

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

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

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

/**
 * changeUsername
 * Description: Updates the scope username
 */
$scope.changeUsername = function(username) {
  $scope.username = username;
};

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

<p>Hello, <em>{{ username }}</em>!</p>
<button ng-click="changeUsername('Bob')">Hello Bob?</button>
<button ng-click="changeUsername('Adam')">Hello Adam?</button>
<button ng-click="changeUsername('Elena')">Hello Elena?</button>

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

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

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

/**
 * usersArray
 * Description: A generic list of users, possibly pulled from a database, in
 * array notation.
 */
$scope.usersArray = [
  ['BB', 'King'],
  ['Ray', 'Charles'],
  ['Muddy', 'Waters'],
  ['Lightnin', 'Hopkins'],
  ['Howlin', 'Wolf']
];

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

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr ng-repeat="user in usersArray">
    <td>{{ user[0] }}</td>
    <td>{{ user[1] }}</td>
  </tr>
</table>

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

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

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

$scope.usersObject = [
  {
    firstname: 'BB',
    lastname: 'King'
  },
  {
    firstname: 'Ray',
    lastname: 'Charles'
  },
  {
    firstname: 'Muddy',
    lastname: 'Waters'
  },
  {
    firstname: 'Lightnin',
    lastname: 'Hopkins'
  },
  {
    firstname: 'Howlin',
    lastname: 'Wolf'
  }
];

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

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr ng-repeat="user in usersObject">
    <td>{{ user.firstname }}</td>
    <td>{{ user.lastname }}</td>
  </tr>
</table>

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

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

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

/**
 * randomUserModel
 * Description: Initializes the random user model username
 */
$scope.randomUserModel = 'random user';

/**
 * randomUserModelAlert
 * Description: Alerts the random username available from the ng model.
 */
$scope.randomUserModelAlert = function() {
  alert($scope.randomUserModel);
};

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

<input type="text" ng-model="randomUserModel">
<button ng-click="randomUserModelAlert()">alert my random name!</button>

При любом изменении значения поля 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 код:

<input type="checkbox" id="box1" name="box1" ng-model="checkboxModel.box1">
<label for="box1">Show box1!</label>
<br>
<input type="checkbox" id="box2" name="box2" ng-model="checkboxModel.box2">
<label for="box2">Hide box2!</label>
<div class="c-component__box" ng-show="checkboxModel.box1">
  <h3>I am box 1</h3>
  <p>woo woo!</p>
</div>
<div class="c-component__box" ng-hide="checkboxModel.box2">
  <h3>I am box 2</h3>
  <p>woo woo!</p>
</div>

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

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

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

/**
 * textClass
 * Description: A generic class name to attach to a string of text
 */
$scope.textClass = '';

/**
 * changeTextClass
 * Description: Changes the text class
 */
$scope.changeTextClass = function(name) {
  $scope.textClass = name;
}

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

<p class="c-component__text" ng-class="textClass">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere molestias explicabo aspernatur inventore nam fugit, nihil numquam distinctio totam hic, iure porro, magnam consequuntur nemo deleniti dicta amet quo assumenda.</p>
<button ng-click="changeTextClass('pink')">Add a pink class</button>

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

Заключение

Подведем итоги! В этом уроке «Введение в 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree