1
00:00:04,070 --> 00:00:07,050
Ладно, ладно, я слышал, как ты говоришь.

2
00:00:07,050 --> 00:00:08,280
Давай займемся этим,

3
00:00:08,280 --> 00:00:09,835
покажи мне код.

4
00:00:09,835 --> 00:00:13,440
Действительно, мы начнем с создания

5
00:00:13,440 --> 00:00:17,770
нашего углового приложения в этом самом первом упражнении.

6
00:00:17,770 --> 00:00:21,145
Мы будем использовать интерфейс угловой командной строки,

7
00:00:21,145 --> 00:00:28,020
Угловой CLI для строительных лесов нашего углового приложения в этом упражнении.

8
00:00:28,020 --> 00:00:31,690
Затем, когда мы проходим через остальные упражнения в этом курсе,

9
00:00:31,690 --> 00:00:36,180
мы построим наше угловое приложение шаг за шагом.

10
00:00:36,180 --> 00:00:44,195
Угловой CLI - очень удобный способ создания углового приложения.

11
00:00:44,195 --> 00:00:48,620
Угловое приложение, созданное угловым CLI, следует стилю

12
00:00:48,620 --> 00:00:53,290
руководства, предложенные разработчиками Angular faramework.

13
00:00:53,290 --> 00:00:56,405
Мы можем использовать Угловой CLI для выручки

14
00:00:56,405 --> 00:01:00,980
многие части нашего углового приложения, включая компоненты,

15
00:01:00,980 --> 00:01:04,275
услуги нашего углового приложения.

16
00:01:04,275 --> 00:01:08,480
Угловой CLI также поставляется со своим собственным встроенным сервером,

17
00:01:08,480 --> 00:01:14,405
, который мы можем использовать для обслуживания углового приложения, как мы создаем его,

18
00:01:14,405 --> 00:01:17,930
, а затем просмотреть наше угловое приложение в

19
00:01:17,930 --> 00:01:22,870
браузер в качестве предварительного просмотра нашего приложения.

20
00:01:22,870 --> 00:01:24,805
Как и когда мы вносим изменения,

21
00:01:24,805 --> 00:01:28,940
изменения будут отражены сразу в браузере.

22
00:01:28,940 --> 00:01:33,650
Вот почему я решил использовать угловой CLI как

23
00:01:33,650 --> 00:01:39,365
подход для построения нашего углового приложения в этом курсе.

24
00:01:39,365 --> 00:01:43,100
Для начала перейдите в удобное расположение на

25
00:01:43,100 --> 00:01:46,490
своего компьютера и создайте папку с именем Angular.

26
00:01:46,490 --> 00:01:52,065
Итак, я собираюсь начать переходить в папку с документами Coursera.

27
00:01:52,065 --> 00:01:58,260
Вот где я храню все мои файлы для моего курса Coursera,

28
00:01:58,260 --> 00:02:03,230
, а затем я создаю папку

29
00:02:03,230 --> 00:02:08,955
с именем Angular, а затем перейду в папку Angular.

30
00:02:08,955 --> 00:02:15,505
Теперь мы собираемся создать наше угловое приложение в этой папке.

31
00:02:15,505 --> 00:02:21,080
Первым шагом, который мы делаем в этом упражнении, является установка углового интерфейса командной строки.

32
00:02:21,080 --> 00:02:22,525
Итак, в подсказке

33
00:02:22,525 --> 00:02:32,700
тип npm install -g @angular /cli @ 6.2.1.

34
00:02:32,700 --> 00:02:35,430
Теперь, когда я устанавливаю модуль NPM,

35
00:02:35,430 --> 00:02:39,725
я также буду указывать точную версию модуля NPM, который я устанавливаю.

36
00:02:39,725 --> 00:02:41,720
Я настоятельно призываю вас установить

37
00:02:41,720 --> 00:02:44,930
ту же версию модуля NPM, чтобы вы могли пройти

38
00:02:44,930 --> 00:02:50,680
остальные упражнения без каких-либо проблем с упражнениями.

39
00:02:50,680 --> 00:02:55,700
Итак, в этом случае я устанавливаю версию 6.2.1 Angular CLI.

40
00:02:55,700 --> 00:02:58,310
Теперь, если вы делаете это на Mac или Linux,

41
00:02:58,310 --> 00:03:02,565
не забудьте sudo перед установкой npm.

42
00:03:02,565 --> 00:03:05,095
Установка займет некоторое время.

43
00:03:05,095 --> 00:03:08,095
Таким образом, как только он будет завершен,

44
00:03:08,095 --> 00:03:13,655
, тогда Angular CLI будет доступен в вашей командной строке.

45
00:03:13,655 --> 00:03:15,750
После завершения установки

46
00:03:15,750 --> 00:03:18,885
вы можете проверить и увидеть, что установлен угловой интерфейс командной строки.

47
00:03:18,885 --> 00:03:20,295
После установки,

48
00:03:20,295 --> 00:03:25,190
может потребоваться перезапустить терминал, чтобы

49
00:03:25,190 --> 00:03:30,835
для инструментов Angular CLI были доступны в запросе.

50
00:03:30,835 --> 00:03:35,390
Угловой интерфейс командной строки доступен, набрав ng в строке

51
00:03:35,390 --> 00:03:39,910
, а затем набор дополнительных инструкций.

52
00:03:39,910 --> 00:03:46,105
Итак, первая команда, которую мы попробуем, это ng help,

53
00:03:46,105 --> 00:03:49,820
и это будет список всех других команд

54
00:03:49,820 --> 00:03:53,855
, что Угловой CLI позволяет нам выполнить.

55
00:03:53,855 --> 00:03:56,720
Ng, как вы видите, будет префиксом для

56
00:03:56,720 --> 00:04:02,040
всех команд углового интерфейса командной строки, которые вы будете использовать в этом курсе.

57
00:04:02,840 --> 00:04:09,685
Это перечисляет набор всех опций, которые предоставляет нам Угловой интерфейс командной строки.

58
00:04:09,685 --> 00:04:15,895
Мы узнаем много из этих команд, как мы пройдем через оставшуюся часть этого курса.

59
00:04:15,895 --> 00:04:18,930
Чтобы создать новое угловое приложение,

60
00:04:18,930 --> 00:04:21,545
я собираюсь создать это приложение в

61
00:04:21,545 --> 00:04:25,660
Угловая папка в подпапке с именем conFusion.

62
00:04:25,660 --> 00:04:29,210
Если вы прошли предыдущий курс на Bootstrap четыре,

63
00:04:29,210 --> 00:04:33,500
вы поймете, почему я называю это приложение как conFusion.

64
00:04:33,500 --> 00:04:35,000
Итак, в подсказке,

65
00:04:35,000 --> 00:04:40,905
введите ng new conFusion,

66
00:04:40,905 --> 00:04:45,945
, а затем я бы использовал sass как

67
00:04:45,945 --> 00:04:53,080
фреймворк стилей CSS для моего углового приложения.

68
00:04:53,080 --> 00:04:58,015
Итак, я указываю минус стиль, равный SCSS,

69
00:04:58,015 --> 00:05:01,610
и нажимаю Return, и потребуется некоторое время для

70
00:05:01,610 --> 00:05:05,750
углового приложения, чтобы создать в текущей папке.

71
00:05:05,750 --> 00:05:08,330
Как только ваше приложение будет установлено,

72
00:05:08,330 --> 00:05:10,850
давайте использовать встроенный сервер из

73
00:05:10,850 --> 00:05:16,100
Angular CLI, чтобы скомпилировать наше угловое приложение и начать обслуживать его.

74
00:05:16,100 --> 00:05:18,650
Перейдите в папку conFusion,

75
00:05:18,650 --> 00:05:22,495
и в подсказке введите ng serve,

76
00:05:22,495 --> 00:05:27,470
и дождитесь, пока сервер Angular Live Development запустит

77
00:05:27,470 --> 00:05:33,115
и создайте наше угловое приложение и начните обслуживать приложение.

78
00:05:33,115 --> 00:05:35,175
После завершения,

79
00:05:35,175 --> 00:05:39,920
, то вы заметите, что это приложение будет доступно, набрав

80
00:05:39,920 --> 00:05:50,425
a http://localhost:4200 в адресной строке нашего браузера.

81
00:05:50,425 --> 00:05:53,975
Вы можете оставить сервер разработки работать непрерывно.

82
00:05:53,975 --> 00:05:57,020
Когда вы вносите изменения в угловое приложение,

83
00:05:57,020 --> 00:06:01,520
сервер автоматически перекомпилирует изменения, а затем

84
00:06:01,520 --> 00:06:06,320
начнет обслуживать обновленное приложение Angular в вашем браузере.

85
00:06:06,320 --> 00:06:13,370
Таким образом, это был бы очень хороший способ смотреть вживую изменения, которые вы делаете

86
00:06:13,370 --> 00:06:16,760
в своем угловом приложении, сразу отражаясь

87
00:06:16,760 --> 00:06:21,265
в браузере, где вы просматриваете свое угловое приложение.

88
00:06:21,265 --> 00:06:28,610
Если вы заходите в браузер и получите доступ к угловому приложению на localhost:4200,

89
00:06:28,610 --> 00:06:31,135
вы увидите, что приложение начинает работать,

90
00:06:31,135 --> 00:06:36,835
и он будет обслуживать этот набор слов в наш браузер.

91
00:06:36,835 --> 00:06:42,140
Итак, это очень простое приложение, которое голые кости Угловое приложение

92
00:06:42,140 --> 00:06:47,490
вы начали с разработки вашего углового приложения.

93
00:06:47,490 --> 00:06:52,460
Мы собираемся построить поверх этого приложения с лесом Angular CLI,

94
00:06:52,460 --> 00:06:57,420
, внедрив различные функции в рамках этого курса.

95
00:06:57,420 --> 00:07:01,710
Если вы планируете использовать Git для своего Angular приложения для управления версиями,

96
00:07:01,710 --> 00:07:03,680
, тогда на этом этапе

97
00:07:03,680 --> 00:07:06,980
может быть хорошей идеей инициализировать ваш репозиторий Git.

98
00:07:06,980 --> 00:07:12,620
Угловой CLI автоматически выполняет инициализацию вашего репозитория Git,

99
00:07:12,620 --> 00:07:18,765
и, таким образом, первую фиксацию с первоначальным сообщением в репозиторий Git.

100
00:07:18,765 --> 00:07:23,610
Давайте проверим статус нашего репозитория Git.

101
00:07:23,610 --> 00:07:28,310
Позволяет проверить, набрав git log

102
00:07:28,310 --> 00:07:29,600
одну строку, и вы увидите, что

103
00:07:29,600 --> 00:07:33,020
первоначальная настройка была зафиксирована в нашем репозитории Git.

104
00:07:33,020 --> 00:07:36,920
Теперь мы можем начать работу над нашим угловым приложением, которое мы

105
00:07:36,920 --> 00:07:41,020
выложены в эту папку здесь.

106
00:07:41,020 --> 00:07:46,800
Если вы решите синхронизировать свой репозиторий Git с онлайн-репозиторием,

107
00:07:46,800 --> 00:07:52,160
, пожалуйста, убедитесь, что ваш онлайн-репозиторий является частным репозиторием.

108
00:07:52,160 --> 00:07:56,835
Bitbucket позволяет создавать бесплатные частные репозитории.

109
00:07:56,835 --> 00:08:01,580
Итак, продолжайте и настройте свой репозиторий Git на Bitbucket.

110
00:08:01,580 --> 00:08:04,350
С этим мы завершаем наше упражнение.

111
00:08:04,350 --> 00:08:06,395
В этом первом упражнении

112
00:08:06,395 --> 00:08:08,635
мы установили угловой интерфейс командной строки.

113
00:08:08,635 --> 00:08:14,060
Затем мы выстроили наше угловое приложение, над которым мы собираемся работать

114
00:08:14,060 --> 00:08:22,150
для дальнейшего развития в рамках остальных упражнений в этом курсе.