Практические примеры использования AngularJS

Вы наверняка слышали об AngularJS – невероятная платформа с открытым исходным кодом, разработанная Google, которая меняет способ разработки веб-приложений. В этой статье мы разберем стандартные блоки Angular приложений – модели, виды, контроллеры, службы и фильтры.

angular

Что такое AngularJS?

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

Для подключения AngularJS вы можете воспользоваться Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

AngularJS предоставляет большое количество директив, которые позволяют вам ассоциировать HTML элементы с моделями. Они являются атрибутами, которые начинаются с префикса ng- и могут быть добавлены к любому элементу. Если вы хотите использовать Angular, первым делом вы должны добавить атрибут ng-app:

<body ng-app>

Необходимо подключать данный атрибут к оболочке, например body или div.

Создание навигационного меню на AngularJS

See the Pen YqeNEw by Siteacademy (@Siteacademy) on CodePen.

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

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

Создание встроенного редактора на AngularJS

See the Pen BKYpmZ by Siteacademy (@Siteacademy) on CodePen.

Во втором примере, мы создадим простой встроенный редактор, при нажатии на элементе, появляется всплывающая подсказка с текстовым полем. Используем контроллер, который будет инициализировать модели и добавит два метода для переключения отображения подсказки. Контроллеры - это регулярные функции JavaScript, которые автоматически выполняются Angular, связываются со страницей с помощью директивы ng-controller:

Когда функция контроллера выполняется, он получает специальный объект $scope в качестве параметра. При изменении значения переменной ng-model текстового поля, Angular обновляет данную переменную.

Создание формы заказа на AngularJS

See the Pen grvgog by Siteacademy (@Siteacademy) on CodePen.

В этом примере, мы создадим форму заказа, в которой будет отображаться общая цена выбранных товаров, обновляемая в реальном времени, используя еще одну полезную функцию AngularJS - фильтры. Фильтры позволяют изменять модели и могут быть объединены в цепочку, используя символ вертикальной черты |. В приведенном ниже примере я использую фильтр валюты, чтобы превратить число в отформатированную цену, вместе со знаком доллара и центов.

ng-repeat еще одно полезное свойство в AngularJS. Оно позволяет зациклить массив элементов и сгенерировать для них разметку.

Создание мгновенного поиска на AngularJS

See the Pen jqZyYz by Siteacademy (@Siteacademy) on CodePen.

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

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

  • Используйте функцию angular.module("name",[]), вернет экземпляр нового модуля.
  • Передайте имя модуля в качестве значения директивы ng-app.

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

Перевод статьи Learn AngularJS With These 5 Practical Examples

Тэги: menu

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.