PhoneCat Tutorial App

Перед началом изучения учебника лучше всего будет ознакомится с часто задаваемыми вопросами по Node.js.

1. Пример простого Angular-приложения
2. Шаблонизация
3. Фильтрация
4. Двухсторонняя привязка данных
5. XMLHttpRequest (XHR) и внедрение зависимостей
6. Генерация ссылок и вставка изображений
7. Роутинг и вьюхи
8. Еще раз о шаблонизации
9. Пользовательская фильтрация
10. Обработчики событий
11. REST и пользовательские сервисы
12. Анимация

Для дальнейшего изучения можно приступить к чтению Developer Guide.

Если после прочтения данного туториала вы решили попробовать создать свой проект, то начните свою разработку с базового angular-seed проекта.

Также вы можете внести свой вклад в развитие AngularJS.

Любые вопрос касающиеся AngularJS можете задавать в соответствующей гугл-группе.

CSS и JavaScript анимация в AngularJS

В этом уроке мы улучшим наше веб-приложение путем добавления CSS и JavaScript анимаций для наших шаблонов.

• Мы будем использовать модуль ngAnimate для обеспечения возможности анимации.
• Мы будем использовать основные ng директивы для того чтобы автоматически запускать анимации.
• Когда в приложении встречается анимация, она работает в промежутке времени в котором выполняется стандартная DOM-операция над элементом (например, вставка или удаление узлов в ngRepeat или вставка или удаление классов в ngClass).

Переключим проект на состояние соответствующее данному уроку:

git checkout -f step-12

Изменения относительно предыдущего урока.

REST и пользовательские сервисы в AngularJS

На этом шаге мы изменим способ получения данных.

Мы определим пользовательский сервис, который представляет собой RESTful-клиент. Используя этот сервис мы можем намного проще получать данные с сервера, т.е. не используя низкоуровневый $http API, HTTP-методы и URL-ы.

Переключим состояние проекта на данный шаг:

git checkout -f step-11

Демо. Изменения.

Обработчики событий в AngularJS

На этом шаге мы сделаем на странице деталей телефона отображение крупного изображения по клику на его миниатюру.

Переключим проект на состояние соответствующее даному шагу:

git checkout -f step-10

На этом шаге были внесены такие изменения.

Пользовательская фильтрация в AngularJS

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

До этого урока на странице деталей телефона мы писали true или false для того чтобы показать наличие какой-нибудь возможности у телефона. Давайте вместо этого отображать символы ✓ или ✘.

Переключим проект на состояние соответствующее данному шагу:

git checkout -f step-9

По сравнению с предыдущим шагом были внесены следующие изменения.

Еще раз о шаблонизации в AngularJS

На этом шаге мы реализуем представление отображающее детали телефона, которые отображаются, когда пользователь кликает на телефоне из списка.

Мы будем получать данные с помощью $http и наполнять ими шаблон представления phone-detail.html.

Переключить проект на состояние соответствующее шагу:

git checkout -f step-8

На этом шаге будут внесены такие изменения.

Роутинг и вьюхи в AngularJS

В этом уроке мы рассмотрим как создать шаблон макета (layout) и как создать приложение с несколькими представлениями с помощью роутинга используюя модуль 'ngRoute'.

• Когда пользователь будет переходить на страницу app/index.html он будет перенаправляться на app/index.html/#/phones и список телефонов будет появляться в браузере.
• Когда пользователь будет кликать на ссылку на телефон, url поменяется на соответствующий странице с деталями о телефоне.

Переключимся на данный шаг:

git checkout -f step-7

Список изменений, которые будут внесены на этом шаге.

Генерация ссылок и вставка изображений в AngularJS

В этом уроке мы рассмотрим как добавить миниатюры для телефонов в списке телефонов.

Переключим состояние проекта на соответствующий шаг:

git checkout -f step-6

На этом шаге мы внесём такие изменения.

XMLHttpRequest (XHR) и внедрение зависимостей в AngularJS

До этого урока мы хранили данные в коде. Давайте рассмотрим как получать данные с сервера, используя один из встроенных в Angular сервисов $http. Мы будем использовать dependency injection (DI) чтобы предоставить сервис PhoneListCtrl контроллеру. К концу урока должен получиться такой результат. Для достижения такого результата нужно внести такие изменения.

Фильтрация в AngularJS

В этом уроке мы добавим полнотекстовый поиск, а также напишем end-to-end тест, постоянное наблюдение за которым позволит вовремя заметить регрессию.

Как сделать динамическую веб-страницу с помощью AngularJS

Предыдущий урок: Пример простого Angular-приложения

Шаг 1. Переключите репу на состояние для step 1:

git checkout -f step-1

Шаг 2. Сначала создадим статический контент, а потом сделаем его динамичным. Внесите в app/index.html созданный в предыдущем уроке такие изменения. Должно получиться так:

<!doctype html>
<html lang="en" ng-app>
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
</head>
<body>

  <ul>
    <li>
      <span>Nexus S</span>
      <p>
        Fast just got faster with Nexus S.
      </p>
    </li>
    <li>
      <span>Motorola XOOM™ with Wi-Fi</span>
      <p>
        The Next, Next Generation tablet.
      </p>
    </li>
  </ul>

</body>
</html>

Можете добавить еще статического контента, например <p>Total number of phones: 2</p>.

Пример простого Angular-приложения

Шаг 1. Загрузите репозиторий: git clone --depth=14 https://github.com/angular/angular-phonecat.git.

Шаг 2. Переключимся на step 0: git checkout -f step-0.

На данном этапе большинство файлов взяты из проекта angular-seed project, который используется для старта новых Angular-проектов. Seed-проект преднастроен для установки Angular-фреймворка (через bower в папку app/bower_components/) и для установки инструментов (через npm) необходимых для разработки типового веб-приложения.

В этом учебнике в angular-seed были внесены следующие изменения:

• Удалено example-приложение
• Добавлены изображения телефонов в папку app/img/phones/
• Добавлены описание телефонов в формате JSON в папку app/phones/
• Добавлена зависимость от Bootstrap в файл bower.json.

Шаг 3. Установите зависимости, если вы еще этого не сделали: npm install.

Шаг 4. Запустите веб-сервер: npm start.

Шаг 5. Откройте приложение по адресу http://localhost:8000/app/. Результат запуска приложения.