angular-doc/docs/content/tutorial/index.ngdoc at f1b27f307fe5693a1623b6546df871ea69913734 · AngularjsRUS/angular-doc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
@ngdoc overview
@name Tutorial
@description

Отличным способом познакомиться с AngularJS является работа с этим учебником, который проведет вас за руку
по пути создания AngularJS веб-приложения. Это приложение строит каталог, в котором отображает список Android устройств,
позволяет вам фильтровать список, чтобы увидеть только те устройства, которые вас интересуют, а затем просмотреть детали
для выбранного устройства.

<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">

Работая с этим учебником, вы увидите как Angular делает браузеры умнее - без использования расширений или плагинов.

Кроме того в этом учебнике вы сможете:

* Увидеть примеры того, как на стороне клиента происходит связывание данных и внедрение зависимости
  для построения динамических представлений данных (dynamic views of data), которые изменяются немедленно
  в ответ на действия пользователя.
* Увидеть, как Angular создает слушателей (обработчики событий) для ваших данных без необходимости
  манипуляции DOM-моделью.
* Узнать легкий способ тестирования вашего веб-приложения.
* Узнать, как использовать Angular сервисы, чтобы упростить работу с общими задачами для веба,
  таких как получение данных в вашем приложении.

И все это работает в любом браузере без изменений для конкретного браузера!

После завершения изучения этого учебника вы сможете:

* Создавать динамические приложения, которые работают в любом браузере.
* Понимать основные различия между Angular и другими JavaScript фрейморками (frameworks).
* Понять, как в AngularJS работает связывание данных.
* Использовать {@link https://github.com/angular/angular-seed angular-seed проект} для быстрого
  создания собственных проектов.
* Создавать и запускать тесты.
* Узнать ресурсы для получения дополнительной информации о AngularJS.

Учебник проведет вас через весь процесс создания простых приложений, в том числе расскажет о написании
и запуске юнит тестов (unit tests) и системном тестировании (end-to-end tests). Эксперименты в конце каждого шага
предоставят вам возможность узнать больше об AngularJS и о приложении, которое вы пишете.

Вы можете пройти весь учебник в течение нескольких часов или вы можете провести приятный день подробно изучая его.
Если вы ищете более короткое введение в AngularJS, вы можете обратиться к документу {@link misc/started С чего начать}.


# Работа с кодом

Вы можете следовать этому учебнику и работать с программным кодом либо в Mac/Linux, либо в среде ОС Windows.
Учебник основан на использовании системы управления версиями Git для управления исходным кодом.
Вам не нужно ничего знать о Git, просто следуйте указаниям в учебнике. Выберите одну из вкладок ниже и
следуйте инструкции по настройке вашего компьютера.

<div class="tabbable" show="true">
  <div class="tab-pane well" id="git-mac" title="Git на Mac/Linux">
    <ol>
      <li><p>Для запуска юнит тестов (unit tests) вам понадобятся Node.js и Karma, поэтому убедитесь,
             что у вас установлен <a href="http://nodejs.org/">Node.js</a> версии 0.8 или выше
             и что команда <code>node</code> является исполняемой и прописана в вашем <code>PATH</code>.
             Для этого запустите следующую команду в окне вашего терминала (в командной строке):
          </p>
          <pre>node --version</pre>
          <p>Дополнительно установите <a href="http://karma-runner.github.io/">Karma</a>, если вы еще
             не сделали это:
          </p>
          <pre>npm install -g karma</pre>
      </li>
      <li><p>Вам также потребуется Git, который вы можете получить на сайте
             <a href="http://git-scm.com/download">the Git site</a>.
          </p>
      </li>
      <li><p>Склонируйте репозиторий <code>angular-phonecat</code>, размещенный на
             <a href="https://github.com/angular/angular-phonecat">Github</a>.
             Для этого вам потребуется запустить следующую команду:
          </p>
          <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
          <p>Эта команда создаст <code>angular-phonecat</code> директорию в вашей текущей директории.</p>
      </li>
      <li><p>Перейдите в директорию <code>angular-phonecat</code>:</p>
          <pre>cd angular-phonecat</pre>
          <p>В учебнике предполагается, что вы запускаете все команды из <code>angular-phonecat</code> директории.</p>
      </li>
      <li><p>Также вам понадобится http-сервер, запущенный в вашей системе. Для запуска http-сервера, идущего
              в комплекте с Node.js, используйте команду <code>npm start</code> (из директории <code>angular-phonecat</code>).
          </p>
      </li>
    </ol>
  </div>

  <div class="tab-pane well" id="git-win" title="Git на Windows">
    <ol>
      <li><p>Для запуска юнит тестов (unit tests) вам понадобятся Node.js и Karma, поэтому убедитесь,
             что у вас установлен <a href="http://nodejs.org/">Node.js</a> версии 0.8 или выше
             и что команда <code>node</code> является исполняемой и прописана в вашем <code>PATH</code>.
             Для этого запустите следующую команду в окне вашего терминала (в командной строке):
          </p>
          <pre>node --version</pre>
          <p>Дополнительно установите <a href="http://karma-runner.github.io/">Karma</a>, если вы еще
             не сделали это:</p>
          <pre>npm install -g karma</pre>
      </li>
      <li><p>Вам также потребуется Git, который вы можите получить на сайте
             <a href="http://git-scm.com/download">the Git site</a>.
          </p>
      </li>
      <li><p>Склонируйте репозиторий <code>angular-phonecat</code>, размещенный на
             <a href="https://github.com/angular/angular-phonecat">Github</a>.
             Для этого вам потребуется запустить следующую команду:</p>
          <pre>git clone git://github.com/angular/angular-phonecat.git</pre>
          <p>Эта команда создаст <code>angular-phonecat</code> директорию в вашей текущей директории.</p>
      </li>
      <li><p>Перейдите в директорию <code>angular-phonecat</code>:</p>
          <pre>cd angular-phonecat</pre>
          <p>В учебнике предполагается, что вы запускаете все команды из <code>angular-phonecat</code> директории.</p>
          <p>Вы должны запускать <code>git</code> и все git-команды из <code>Git bash</code>
             (командной оболочки для Git).</p>
          <p>Другие команды, такие как <code>test.bat</code> или <code>e2e-test.bat</code> должны запускаться
             из командной строки Windows (<code>cmd</code>).</p>
      </li>
      <li><p>Для управления зависимостями в этом учебнике используется пакетный менеджер Bower. Перед начало мпроекта его необходимо установить в систему. Сделать это можно при помощи команцы
              <pre>npm install -g bower</pre>
              После успешной установки пакетного менеджера с его помощью необходимо установить зависимости - их перечень хранится в файле `bower.json` в корневой директории проекта. Для установки всех зависимостей выполните в этой директории команду
              <pre>bower install</pre>
          </p>
      </li>
      <li><p>Также вам понадобится http-сервер, запущенный в вашей системе. Для запуска http-сервера, идущего
              в комплекте с Node.js, используйте команду <code>npm start</code> (из директории <code>angular-phonecat</code>).
          </p>
      </li>
    </ol>
  </div>

Последнее, что нужно сделать, это убедиться, что на вашем компьютере имеется веб-браузер, и установлен
хороший текстовый редактор. Теперь давайте сделаем парочку прикольных вещей!

{@link step_00 <span class="btn btn-primary">Поехали!</span>}