Введение в AngularJS

Что такое AngularJS

Последнее обновление: 26.04.2017

AngularJS представляет собой opensource JavaScript-фреймворк, использующий шаблон MVC. Собственно использование MVC является его одной из отличительных особенностей.

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

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

Кроме того, AngularJS поддерживает такие функциональности, как Ajax, управление структорой DOM, анимация, шаблоны, маршрутизация и так далее. Мощь фреймворка, наличие богатого функционала во многом повлияла на то, что он находит свое применение во все большем количестве веб-приложений, являясь на данный момент наверное одним из самых популярных javascript-фреймворков.

Официальный сайт фреймворка: http://angularjs.org/. Там вы можете найти сами исходные файлы, обучающие материалы и другие сопроводительные материалы относительно библиотеки.

На момент написания данного руководства последней версией фреймворка была версия 1.6.4.

Начало работы c AngularJS

Посмотрим, что же представляет собой AngularJS. Для этого нам потребуется файлы самого фреймворка, поэтому загрузим саму библиотеку по ссылке, указанной выше:

Загрузка фреймворка AngularJS

Также можно использовать ссылку на библиотеку из сети CDN компании Google: https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js.

При загрузке zip-пакета мы найдем в нем кроме самой библиотеки (angular.js) еще ряд дополнительных файлов и их минимизированные версии:

Пакет загрузки AngularJS

  • angular-touch.js: предоставляет поддержку событий сенсорного экрана

  • angular-animate.js: предоставляет функциональность анимации

  • angular-aria.js: предоставляет поддержку aria-атрибутов (accesible rich internet application)

  • angular-mocks.js: предоставляет mock-объекты для юнит-тестирования

  • angular-route.js: обеспечивает механизм маршрутизации

  • angular-sanitize.js: предоставляет функционал для управления потенциально опасным контентом (javascript, html)

  • angular-cookies.js: обеспечивает функционал для управления куками

  • angular-loader.js: используется для загрузки angularjs-скриптов

  • angular-messages.js: предоставляет функционал для вывода сообщений

  • angular-resource.js: обеспечивает функциональность для работы с ресурсами

  • Папка i18n: содержит js-файлы для разных локалей

Из всех загруженных скриптов в архиве нас будет интересовать прежде всего файл angular.min.js

Теперь собственно создадим приложение. Оно будет стандартным HelloWorld. Код html-страницы будет следующим:

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<label>Введите имя:</label>
<input type="text" ng-model="name" placeholder="Введите имя">

<h1>Добро пожаловать {{name}}!</h1>
     
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</body>
</html>

Первое, наверное, что бросается в глаза - это новые атрибуты, добавленные к стандартным тегам html (в данном случае ng-app и ng-model). Эти атрибуты являются директивами фреймворка AngularJS. Благодаря их встраиванию фреймворк позволяет добавить элементам определенное поведение.

Конкретно в данном случае директива ng-app объявляет элемент <html> корневым для всего приложения, а директива ng-model указывает модель "name", к которой будет привязано значение элемента input. И при изменении текста в элементе input, модель "name" также будет динамически изменять свое значение.

Чуть ниже в элементе <h1>Добро пожаловать {{name}}!</h1> выводится значение этой модели.

И мы можем просто открыть данный файл в браузере и протестировать его работу.

Первое приложение на AngularJS

СодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850