<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

AngularJS. Введение.

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. Надеюсь, я вас заинтриговал, и в следующей статье мы уже начнём более углублённо разбираться с тем, как он работает.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

Лапыряев Лапыряев 13.05.2014 20:06:57

Я за JQuery

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.