Как создать сайт

Что такое AngularJS

Здравствуйте! В этом вводном уроке я хотел бы рассказать о том что такое 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>.

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

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

 

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

− 2 = 7

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: