AngularJS. Введение.
Сегодня мы начнём изучать известный фрэймворк AngularJs. Этот урок у нас будет вводным, и мы разберёмся, что такое AngularJs и как его использовать.
AngularJs - это MVC фрэймворк, который облегчает жизнь разработчикам, пишущим на языке JavaScript. Данный фрэймворк начал разрабатывать сотрудник фирмы Google в 2009 году, как свой персональный проект. Первая версия была выпущена в 2012 году и в ней использовался JQuery, но в дальнейшем от него отказались. Оффициальный сайт - http://angularjs.org. Там вы можете найти исходный код, документацию, видео уроки и примеры. Давайте теперь посмотрим на простой пример.
Для начала зайдём на указанный выше сайт и нажмём кнопку download, чтобы скачать библиотеку. Я её качать не буду, а подключу через CDN.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
</head>
<body ng-app>
{{3+5}}
</body>
</html>
Просто подключив библиотеку, она не начнёт свою работу. Её ещё нужно активировать. Для этого нужно добавить нестандартный атрибут ng-app. Все специальные теги и атрибуты html, поддерживаемые фрэймворком AngularJs, называются директивами.
Использование двойных фигурных скобок обеспечивает вывод значения модели. Скорее всего, вы ничего сейчас не поняли, но это не страшно, т.к. это всего лишь вводная статья и в дальнейшем мы с этим разберёмся. В нашем примере мы выводим значение операции сложения двух чисел. Ответ, как вы догадались, будет 8.
8
В двойных фигурных скобках можно указывать любые арифметические операции или, даже, функцию, которая сработает динамически на нашем DOM дереве.
Теперь рассмотрим более практический пример.
<input type="text" ng-model="name">
Привет, {{name}}!
Если вы запустите этот пример, то, каждый раз нажимая на клавиши, страница будет перерисовываться, и мы будем видеть динамический ввод. Т.е. значение будет браться из текстового поля с директивой ng-model и подставляться вместо фигурных скобок со значением name.
И ещё один пример
<input type="checkbox" ng-model="ShowMyText">
<div ng-show="ShowMyText">Текст, который появится сразу после того, как пользователь активирует checkbox.</div>
На чистом JavaScript у нас было бы намного больше строчек кода, но AngularJs избавляет нас от этого.
На этом подошла к концу вводная статья по AngularJs. Надеюсь, я вас заинтриговал, и в следующей статье мы уже начнём более углублённо разбираться с тем, как он работает.
-
Создано 08.05.2014 17:50:30
-
Михаил Русаков
Комментарии (1):
Я за JQuery
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.