Что такое AngularJS

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

Здравствуйте! В этом вводном уроке я хотел бы рассказать о том что такое AngularJS  и зачем он нужен. Надо сказать, что фреймворк AngularJS использует в своей основе  MVC. MVC - это паттерн для создания приложений, он подразумевает разделение кода на модель, представление, контроллер так сказать мухи отдельно, а котлеты отдельно.

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

 Что такое AngularJS

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

 Есть у фреймворка и официальный сайт -  http://angularjs.org/. Где вампредоставляется возможность скачать как сам фремворк, так и дополнительные модули и плагины к нему..

На момент написания данной статьи  фреймворк как бы разделился на 2 ветки. Есть ветка версии 1.х и ветка теперь уже версии 4.х. Причем последняя работает из-под платформы NodeJS, а вот первая ветка может как на NodeJS, так и нет. Поэтому мы сначала рассмотрим первую, а уж потом втрой вариант, тем боле, что между ними имеются существенные различия. Для ветки 1.х последней версией является 1.6.

Версия AngularJS

 

Как подключить  AngularJS

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

Содержимок фреймворка AngularJS

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

  • angular-animate.js: для функционала анимации

  • angular-aria.js: используется для поддержки aria-атрибутов

  • angular-mocks.js: для создания mock-тестов

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

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

  • angular-cookies.js: служит для управления куисами.

  • angular-loader.js: применяется для подгрузки других angular-скриптов

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

  • angular-resource.js: для хранения и использования ресурсов

 

На первых этапах нам потребуется  файл ядра библиотеки  angular.min.js

 Ну а теперь напишем наше первое angular-приложение не будем изменять традициям и это будет Hello World:

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<label>Введите свое имя:</label>
<input type="text" ng-model="name1" placeholder="Введите  свое имя">
 <h1>Добро пожаловать {{name1}}!</h1>
 <script src="/scripts/angular.min.js"></script>
</body>
</html>

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

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

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

 И давайте посмотрим на работу этого приложения.

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

Ну а в заключении смотрите видео как подключить AngularJS

 
Прочитано 499 раз Последнее изменение Четверг, 17 августа 2017 16:56
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

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

Связной трэвел

tezeks

Google+