Пример простого 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/. Результат запуска приложения.

Шаг 6. Рассмотрим файл app/index.html:

<!doctype html>
<html lang="en" ng-app>
<head>
  <meta charset="utf-8">
  <title>My HTML File</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>

  <p>Nothing here {{'yet' + '!'}}</p>

</body>
</html>

Шаг 7. Директива ng-app в коде <html ng-app> представляет собой Angular-директиву ngApp. Эта директива указывает на корневой элемент Angular-приложения. С помощью этой директивы можно сделать Angular-приложением либо всю страницу, либо только её какую-то часть. В общем эта директива используется для автоматической самозагрузки приложений.

Angular uses spinal-case for its custom attributes and camelCase for the corresponding directives which implement them.

Есть также и ручная загрузка. Её применяют при использовании загрузчиков скриптов (script loaders).

Во время загрузки приложения происходят следующие важные вещи:
  1. Создается инжектор для внедрения зависимостей (dependency injection).
  2. Инжектор создает корневую область видимости (root scope), которая становится областью видимости для модели приложения.
  3. Ангуляр компилирует DOM начиная с корневого ngApp элемента, обрабатывает директивы и биндинги.

После того как приложение загрузилось оно начинает принимать браузерные события (клики мышью, нажатия клавиш, входящие HTTP-ответы), всё что может изменить модель. Изменения модели отображаются в представления посредством биндингов.
Структура рассматриваемого приложения. Шаблон содержит одну директиву и один биндинг (см. далее). Модель пустая пока.

Шаг 8. Код <script src="bower_components/angular/angular.js"> скачивает скрипт angular.js, который региструет callback, который будет вызван, когда браузер полностью загрузит HTML-страницу. Когда callback выполняется, Angular ищет директиву ngApp. Если Angular находит такую директиву, то он начинает загрузку приложения, в DOM которого корнем будет элемент с найденной директивой.

Шаг 9. Код Nothing here {{'yet' + '!'}} демонстрирует возможность шаблонизации.
  • binding описывается скобками {{ }}
  • в биндинге используется простое выражение 'yet' + '!'

Биндинг говорит Ангуляру вычислить выражение и вставить результат вычисления в DOM на место биндинга. Биндинги поддерживают постоянное обновление всякий раз, когда результат вычисления выражения меняется. Т.е. это не просто одноразовая вставка результата вычисления выражения.

Angular expression - это код похожий на JavaScript, который вычисляется Ангуляром в контексте текущей модели, а не в глобальном контексте (window).

Вот еще простой пример выражения: <p>1 + 2 = {{ 1 + 2 }}</p>, которое можно вставить в HTML-страницу.
Теги: