step_00.ngdoc

@ngdoc overview
@name Tutorial: 0 - Инициализация
@description

<ul doc-tutorial-nav="0"></ul>


Теперь вы готовы приступить к созданию angular-приложения 'phonecat'. На этом этапе вы познакомитесь
с наиболее важными файлами исходного кода, узнаете как начать разработку, используя angular-seed, 
и запустите приложение в браузере.


<div class="tabbable" show="true">
  <div class="tab-pane well" id="git-mac" title="Git на Mac/Linux">
    <ol>
      <li><p>В директории `angular-phonecat`, выполните следующую команду:</p>
          <pre>git checkout -f step-0</pre>
          <p>Она сбросит ваш рабочий код (workspace) в шаг 0 данного учебного приложения.</p>
          <p>Вам необходимо будет повторить это действие (сброс рабочего кода в соответствующий шаг)
             для будущих шагов этого учебника. Для этого потребуется изменить число (N) в `step-N`, на
             значение соответствующего шага, в который вы переходите. Это приведет к тому,
             что все внесенные изменения в вашей рабочей директории, будут потеряны.
          </p>
      </li>
      <li>Чтобы увидеть запущенное приложение в браузере, сделайте одно из следующих действий:
        <ul>
          <li><b>Если вы используете node.js:</b>
              <ol>
                <li>В <i>отдельной</i> вкладке терминала или <i>новом</i> окне терминала, выполните команду
                    <code>npm start</code>. Она запустит веб-сервер.
                </li>
                <li>Откройте окно браузера и в строке навигации введите следующий адрес
                    <a href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a>
                </li>
              </ol>
          </li>
          <li><b>Для других http-серверов:</b>
              <ol>
                <li>Настройте сервер на обслуживание файлов в директории <code>angular-phonecat</code>.</li>
                <li>В строке навигации вашего браузера введите адрес вида 
                    <code>http://localhost:[port-number]/[context-path]/app/index.html</code>.
                </li>
              </ol>
          </li>
        </ul>
      </li>
    </ol>
  </div>


  <div class="tab-pane well" id="git-win" title="Git на Windows">
    <ol>
      <li><p>Откройте Git bash и выполните следующую команду (в директории `angular-phonecat`):</p>
          <pre>git checkout -f step-0</pre>
          <p>Она сбросит ваш рабочий код (workspace) в шаг 0 данного учебного приложения.</p>
          <p>Вам необходимо будет повторить это действие (сброс рабочего кода в соответствующий шаг)
             для будущих шагов этого учебника. Для этого потребуется изменить число (N) в `step-N`, на
             значение соответствующего шага, в который вы переходите. Это приведет к тому,
             что все внесенные изменения в вашей рабочей директории, будут потеряны.
          </p>
      </li>
      <li>Что бы увидеть запущенное приложение в браузере, сделайте одно из следующих действий:
        <ul>
          <li><b>Если вы используете node.js:</b>
            <ol>
              <li>В <i>отдельной</i> вкладке терминала или <i>новом</i> окне терминала, выполните команду
                  <code>npm start</code>. Она запустит веб-сервер.
              </li>
              <li>Откройте окно браузера и в строке навигации введите следующий адрес
                  <a href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a>
              </li>
            </ol>
          </li>
          <li><b>Для других http-серверов:</b>
            <ol>
              <li>Настройте сервер на обслуживание файлов в директории <code>angular-phonecat</code>.</li>
              <li>В строке навигации вашего браузера введите адрес вида 
                  <code>http://localhost:[port-number]/[context-path]/app/index.html</code>.
              </li>
            </ol>
          </li>
        </ul>
      </li>
    </ol>
  </div>
</div>


Сейчас вы можете запустить приложение или нажать на 
<a href="http://angular.github.com/angular-phonecat/step-0/app">Демо</a> и увидеть страницу в браузере. 
Это не очень интересно, но это нормально.

HTML страница, отображающая надпись "Nothing here yet!" была построена с помощью HTML приведенного ниже.
Код содержит некоторые ключевые angular-элементы (директивы), которые потребуется нам в будущем.

__`app/index.html`:__
<pre>
<!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>
</pre>



## Что этот код делает?

* директива `ng-app`:

          <html ng-app>

  `ng-app` атрибут является аngular-директивой (название `ngApp`; Angular использует
  `имя-с-тире` для имен атрибутов и `camelCase` для соответствующих имен директив),
  используемый как флаг (указательный элемент), который сообщает Angular-у корневой элемент нашего приложения.
  Это позволяет разработчикам приложений сказать Angular-у, что вся HTML-страница или только некоторые ее
  части должны рассматриваться как Angular-приложение.

* `<script>` тэг для AngularJS:

          <script src="lib/angular/angular.js">
          
  Этот код загружает скрипт `angular.js` и регистрирует функцию обратного вызова (колбэк, callback), которая будет 
  выполнена браузером, когда HTML страница будет полностью загружена. Когда выполняется колбэк, Angular ищет 
  {@link api/ng.directive:ngApp ngApp} директиву. Если директива найдена, Angular запускает приложение 
  с корневым DOM элементом (root of the application DOM), в котором была определена `ngApp` директива.

* Двойные фигурные скобки `{{ }}` связанные с выражением:

          Nothing here {{'yet' + '!'}}

  Эта конструкция демонстрирует основную особенность шаблонов Angular-а - связывание (binding), оно обозначается
  двойными фигурными скобками `{{ }}`и простым выражением `'yet' + '!'`, которое используется в этом связывании.

  Связывание сообщает Angular-у, что он должен вычислить выражение и вставить полученный результат в DOM 
  в месте связывания. Вместо одноразовой вставки, как мы увидим в следующих шагах, связывание позволяет 
  эффективно обновлять результат всякий раз, когда результат выражения изменяется.

  {@link guide/expression Angular выражение} является JavaScript-подобным фрагментом кода, который 
  вычисляется Angular-ом в контексте текущей модели области видимости (model scope), а не в рамках области видимости
  глобального контекста `window`.
  
  Как и следовало ожидать, как только этот шаблон обработался Angular-ом, HTML-страница стала содержать текст:
  "Nothing here yet!".

## Инициализация AngularJS приложения

Инициализация AngularJS приложения происходит автоматически, используя директиву `ngApp`. Это очень просто
и подходит в большинстве случаев. В продвинутых случаях, например, при использовании скриптовых загрузчиков
(script loaders), вы можете использовать способы инициализации приложения описанные в 
{@link guide/bootstrap разделе 'Инициализация'}

Есть 3 важные вещи, которые происходят во время инициализации приложения:

1. Инициализируется {@link api/AUTO.$injector Инжектор}, который будет использоваться для 
   внедрения зависимости (dependency injection) в рамках создания приложения.

2. Инжектор будет создавать {@link api/ng.$rootScope корневую область видимости (root scope)}, которая станет
   контекстом для модели нашего приложения.

3. Angular будет "компилировать" DOM, начиная с корневого элемента `ngApp`, подготавливая найденные директивы
   и связывая директивы с соответствующими элементами.
   
Как только приложение инициализировалось, оно будет ожидать события от браузера (например, нажатие мыши,
нажатие клавиши или пришедший HTTP-ответ), которые могут привести к изменению модели. Как только 
такое событие случается, Angular пытается обнаружить изменениям в каких-нибудь моделях,
если изменения будут найдены, Angular будет отражать их в представлении (view), путем обновления всех
задетых связанных данных (bindings).

Структура нашего приложения в настоящее время очень простая. Шаблон содержит только одну директиву
и одно статическое связывание (binding), наша модель пуста. Это скоро изменится!

<img class="diagram" src="img/tutorial/tutorial_00.png">


## Что означают все эти файлы в моей рабочей директории?

Большинство файлов в вашей рабочей директории пришли из {@link https://github.com/angular/angular-seed angular-seed проекта}, 
который обычно используется для создания новых Angular проектов. Проект `angular-seed` включает в себя 
последнюю версию Angular библиотеки, библиотеки для тестов, скрипты и простой пример приложения, 
все предварительно настроено для начала процесса разработки типичного веб-приложения.

Для целей этого учебного шага мы внесли следующие изменения в angular-seed:

* Удалили пример приложения
* Добавили картинки телефонов в `app/img/phones/`
* Добавили файлы в формате JSON с данными о телефоне в `app/phones/`
* Добавили файлы [Bootstrap](http://twitter.github.com/bootstrap/) в `app/css/` и `app/img/`



# Давайте поэкспериментируем

* Попробуйте добавить новое выражение в `index.html`, которое будет делать некоторое математическое вычисление:

          <p>1 + 2 = {{ 1 + 2 }}</p>



# Идем дальше

Мы закончили шаг 0, теперь вы можете перейти к {@link step_01 шагу 1} и добавить контент в веб-приложение.

<ul doc-tutorial-nav="0"></ul>

<div style="display: none">
Примечание: Во время инициализации инжектор (injector) и корневая область видимости (root scope) будут связаны
            с элементом, на котором была объявлена директива `ngApp`, так что при отладке приложения вы 
            можете получить их в консоле браузера через `angular.element(rootElement).injector()` и 
            `angular.element(rootElement).scope()`.
</div>