Что такое AngularJS

Оцените материал
(0 голосов)

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

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

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

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

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

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

 

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

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

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

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

  • 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.3.11/angular.min.js"></script>
</body>
</html>

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

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

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

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

 
Прочитано 431 раз Последнее изменение Воскресенье, 16 октября 2016 16:05
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+