1
00:00:00,000 --> 00:00:04,792
[MUSIC]

2
00:00:04,792 --> 00:00:10,490
Willkommen zu diesem Kurs über Front-End JavaScript Frameworks: Angular.

3
00:00:10,490 --> 00:00:16,178
Dies ist der zweite Kurs in der Spezialisierung auf Full-Stack-Web- und

4
00:00:16,178 --> 00:00:19,840
Multi-Plattform-Mobilanwendungen.

5
00:00:19,840 --> 00:00:25,830
Dieser Kurs befasst sich mit JavaScript-Frameworks, insbesondere Angular.

6
00:00:25,830 --> 00:00:30,070
Sie müssen sich fragen, ist es Angular zwei, oder ist es Angular?

7
00:00:30,070 --> 00:00:34,940
Wir werden das in der allerersten Lektion über die Einführung in Angular

8
00:00:34,940 --> 00:00:35,740
in diesem Kurs klären.

9
00:00:36,940 --> 00:00:39,390
Ich bin froh, dass Sie sich für diesen Kurs entschieden haben.

10
00:00:39,390 --> 00:00:43,141
Und ich hoffe, du hast Spaß, diesen Kurs durchzugehen.

11
00:00:44,766 --> 00:00:47,181
Bevor Sie diesen Kurs beginnen,

12
00:00:47,181 --> 00:00:52,650
möchte ich sicherstellen, dass Sie über ausreichende Kenntnisse in HTML und CSS verfügen.

13
00:00:52,650 --> 00:00:59,448
Und auch gute Kenntnisse in JavaScript, insbesondere ES 5 JavaScript.

14
00:00:59,448 --> 00:01:04,526
Nun, in diesem Kurs werden wir Typoskript als Sprache für das

15
00:01:04,526 --> 00:01:07,880
Schreiben unserer Angular-Anwendungen verwenden.

16
00:01:07,880 --> 00:01:11,463
Nun, wenn Sie sich fragen, sollte ich Typescript kennen und

17
00:01:11,463 --> 00:01:15,870
sollte ich ES 2015+, die neuere Version von JavaScript, kennen?

18
00:01:15,870 --> 00:01:18,710
Nun, Ihre Laufleistung kann variieren.

19
00:01:18,710 --> 00:01:23,050
Mein Ansatz, diese neuen Sprachen zu lernen, besteht darin, sie zu benutzen und

20
00:01:23,050 --> 00:01:24,900
dann auf dem Weg zu lernen.

21
00:01:24,900 --> 00:01:27,230
Das ist also, was wir in diesem Kurs tun werden.

22
00:01:27,230 --> 00:01:32,208
Ich werde Ihnen Typoskript in diesem Kurs nicht explizit vorstellen.

23
00:01:32,208 --> 00:01:36,884
Aber stattdessen, wenn wir den Code schreiben, werde ich verschiedene

24
00:01:36,884 --> 00:01:41,842
Funktionen von Typescript im Kontext von Angular illustrieren, während Sie

25
00:01:41,842 --> 00:01:47,190
die Angular Anwendung entwickeln, in den Übungen als Teil dieses Kurses.

26
00:01:48,330 --> 00:01:52,630
Ein weiterer Punkt, den ich in diesem Stadium nachdrücklich klären möchte

27
00:01:52,630 --> 00:01:57,600
, ist, dass ich Webentwicklung und Design als zwei Teile betrachte.

28
00:01:57,600 --> 00:02:01,241
Der erste Teil ist das Web Design selbst, das User Experience oder

29
00:02:01,241 --> 00:02:05,705
User Inferface Design, das Visual Design, das Prototyping, die Farben,

30
00:02:05,705 --> 00:02:07,232
Grafiken und Animationen.

31
00:02:07,232 --> 00:02:10,477
Und all diese Aspekte, wie eine Website oder

32
00:02:10,477 --> 00:02:15,170
sogar eine mobile Anwendung entworfen werden sollte.

33
00:02:15,170 --> 00:02:18,367
Nun gibt es den anderen Aspekt, der das Erstellen und

34
00:02:18,367 --> 00:02:22,183
Bereitstellen von Webanwendungen und mobilen Anwendungen ist.

35
00:02:22,183 --> 00:02:25,633
In diesem Kurs konzentrieren wir uns nun mehr auf den Aufbau und die

36
00:02:25,633 --> 00:02:27,464
Bereitstellung von Webanwendungen.

37
00:02:27,464 --> 00:02:32,450
Wenn Sie nach dem Designaspekt von Webdesign und -entwicklung suchen,

38
00:02:32,450 --> 00:02:36,285
dann ist dies nicht der richtige Kurs für Sie.

39
00:02:36,285 --> 00:02:39,940
Wenn ich über diese Bereitstellung, Erstellung und

40
00:02:39,940 --> 00:02:44,440
Entwicklung von Webanwendungen spreche, sprechen wir über Lernfähigkeiten,

41
00:02:44,440 --> 00:02:50,020
die für die Übersetzung eines Designs in einen funktionierenden Code unerlässlich sind.

42
00:02:50,020 --> 00:02:55,310
Also hier, in dieser Spezialisierung, haben wir bereits über Bootstrap 4 gelernt.

43
00:02:55,310 --> 00:02:57,500
In diesem Kurs werden wir etwas über Angular lernen.

44
00:02:57,500 --> 00:03:01,350
Dann erfahren wir mehr über Ionic und NativeScript.

45
00:03:01,350 --> 00:03:06,780
Und dann auch serverseitige Entwicklung mit Node und Node Ökosystem.

46
00:03:06,780 --> 00:03:10,240
Das ist also die Konzentration dieses speziellen Kurses.

47
00:03:10,240 --> 00:03:16,320
Wir sprechen also über echte Codierung, anstatt Website-Design.

48
00:03:16,320 --> 00:03:20,310
Die andere Frage, die in Ihrem Kopf entstehen wird, ist, was genau ist die vollständige

49
00:03:20,310 --> 00:03:21,700
Stack-Web-Entwicklung?

50
00:03:21,700 --> 00:03:23,750
Wenn Sie bereits den vorherigen Kurs absolviert haben,

51
00:03:23,750 --> 00:03:26,540
habe ich Ihnen die vollständige Stack-Web-Entwicklung vorgestellt.

52
00:03:26,540 --> 00:03:29,930
Wenn nicht,

53
00:03:29,930 --> 00:03:34,430
wäre die allererste Lektion in diesem Kurs eine schnelle Einführung in die vollständige Stack-Webentwicklung.

54
00:03:34,430 --> 00:03:39,900
Und wir werden diesen Kurs in den Kontext der Full-Stack-Webentwicklung stellen.

55
00:03:39,900 --> 00:03:42,830
Deshalb haben wir im ersten Kurs Bootstrap 4 behandelt,

56
00:03:42,830 --> 00:03:46,470
in diesem Kurs werden wir uns auf Angular konzentrieren.

57
00:03:46,470 --> 00:03:50,710
Dann werden wir uns im nächsten Kurs Ionic und Cordova ansehen, um

58
00:03:50,710 --> 00:03:54,590
multipliziert für die mobile Entwicklung zu tun.

59
00:03:54,590 --> 00:03:57,350
Dann schauen wir uns NativeScript im vierten Kurs an.

60
00:03:57,350 --> 00:04:00,335
Und schließlich werden wir uns die serverseitige Entwicklung anschauen,

61
00:04:00,335 --> 00:04:05,745
einschließlich beides der Geschäftslogikschicht mit dem Node-Ökosystem.

62
00:04:05,745 --> 00:04:13,935
Und die Datenspeicherschicht mit MongoDB in dieser Spezialisierung.

63
00:04:13,935 --> 00:04:18,265
Dieser spezielle Kurs konzentriert sich, wie Sie erwarten, auf Angular.

64
00:04:18,265 --> 00:04:23,391
Sie werden in die verschiedenen Aspekte des Angular Frameworks durch

65
00:04:23,391 --> 00:04:27,520
eine Reihe von Übungen eingeführt, die aufeinander aufbauen.

66
00:04:27,520 --> 00:04:32,131
Es ist also eine Folge von Übungen, bei denen ich verschiedene Angular-Konzepte einführen werde.

67
00:04:32,131 --> 00:04:37,772
Und dann zeigen Sie Ihnen sofort, wie wir diese Konzepte im Rahmen

68
00:04:37,772 --> 00:04:43,519
einer Angular-Anwendung anwenden, die wir während dieses Kurses entwickeln werden.

69
00:04:43,519 --> 00:04:47,985
Jetzt auf dem Weg, wenn wir Angular Ansichten entworfen

70
00:04:47,985 --> 00:04:54,551
haben, werden wir Angular Material verwenden, um die Benutzeroberfläche unserer Angular-Komponenten zu machen.

71
00:04:54,551 --> 00:05:00,962
Und wir werden Layouts mit dem Angular Flex-Layout in diesem Kurs machen.

72
00:05:00,962 --> 00:05:06,280
Die Alternative wäre, Bootstrap 4 zu verwenden, die wir früher gelernt haben.

73
00:05:06,280 --> 00:05:09,820
Aber ich dachte mir, dass dieser Kurs Ihnen auch die

74
00:05:09,820 --> 00:05:15,060
Möglichkeit bietet, ein weiteres Front-End-UI-Framework zu lernen.

75
00:05:15,060 --> 00:05:18,230
Das ist Angular Material und Angular Flex-Layout, um

76
00:05:18,230 --> 00:05:22,110
genau die gleichen Dinge zu tun, die wir mit Bootstrap 4 gemacht haben.

77
00:05:22,110 --> 00:05:28,430
Auf diese Weise lernen Sie zwei verschiedene Möglichkeiten, sich dem UI-Design zu nähern,

78
00:05:28,430 --> 00:05:35,300
entweder mit Bootstrap 4 oder mit Angular Material plus Angular Flex-Layout.

79
00:05:35,300 --> 00:05:37,880
Wir stellen Ihnen auch die Grundlagen von TypeScript

80
00:05:37,880 --> 00:05:42,650
durch die Übungen vor, während wir unsere Angular-Anwendung verdoppeln.

81
00:05:42,650 --> 00:05:47,346
Der Kurs selbst wird in vier Module organisiert.

82
00:05:47,346 --> 00:05:52,680
Die vier Module entsprechen vier Wochen dieses Kurses.

83
00:05:52,680 --> 00:05:55,450
Aber natürlich möchte ich Ihnen betonen,

84
00:05:55,450 --> 00:05:59,760
dass Sie nicht durch die Fristen, die wir in diesem Kurs haben, unter Druck gesetzt werden müssen.

85
00:05:59,760 --> 00:06:03,030
Sie können sich selbst Zeit nehmen, um den Kurs zu durchlaufen.

86
00:06:03,030 --> 00:06:07,900
Es ist wichtiger, jeden Aspekt von Angular zu verstehen.

87
00:06:07,900 --> 00:06:14,800
Wenn Sie zusätzliche Zeit benötigen, können Sie zur nächsten Sitzung dieses Kurses wechseln.

88
00:06:14,800 --> 00:06:16,450
Und dann weiter.

89
00:06:16,450 --> 00:06:19,950
Die gesamte Arbeit, die Sie in einer Sitzung abgeschlossen haben, wird automatisch

90
00:06:19,950 --> 00:06:22,010
auf die nächste Kurssitzung übertragen.

91
00:06:22,010 --> 00:06:27,340
Lassen Sie sich also nicht von den Fristen drängen, sich zu beeilen, diesen Kurs abzuschließen.

92
00:06:27,340 --> 00:06:30,290
Nun, nachdem wir diese allgemeine Idee gegeben haben,

93
00:06:30,290 --> 00:06:35,810
schauen wir uns an, was jedes der vier Module in diesem Kurs abdecken wird.

94
00:06:35,810 --> 00:06:40,130
Das allererste Modul stellt Ihnen die Full Stack Web Development,

95
00:06:40,130 --> 00:06:43,842
die allgemeine Idee und die Big Picture View vor.

96
00:06:43,842 --> 00:06:50,230
Gleich danach werden wir uns einen kurzen Überblick über Git und Node ansehen.

97
00:06:50,230 --> 00:06:53,250
Wenn Sie den vorherigen Bootstrap 4 Kurs absolviert

98
00:06:53,250 --> 00:06:56,020
haben, dann hätten Sie diese beiden bereits im vorherigen Kurs behandelt.

99
00:06:56,020 --> 00:06:59,310
So können Sie schnell zur

100
00:06:59,310 --> 00:07:03,750
ersten Lektion überspringen, die Sie in Angular, die Einführung in Angular, einführt.

101
00:07:04,970 --> 00:07:10,020
Nach der Einführung in das Angular Framework und dann Einrichten unserer Angular

102
00:07:10,020 --> 00:07:15,060
Anwendung mit Angular Material und Angular Flex-Layout.

103
00:07:15,060 --> 00:07:18,910
Dann werden wir weitergehen, um mehr über Winkelkomponenten zu studieren.

104
00:07:18,910 --> 00:07:23,880
Welche Rolle spielen Angular-Komponenten beim Entwerfen einer Angular-Anwendung und

105
00:07:23,880 --> 00:07:27,530
beim Entwerfen der verschiedenen Ansichten, die in Ihrer Angular-Anwendung unterstützt werden.

106
00:07:28,610 --> 00:07:32,990
Das sollte Sie bis zum allerersten Auftrag in diesem Kurs führen.

107
00:07:32,990 --> 00:07:38,570
Das zweite Modul konzentriert sich auf Angular-Dienste

108
00:07:38,570 --> 00:07:41,110
, Routing und Single-Page-Anwendungen.

109
00:07:41,110 --> 00:07:46,220
Wir schauen uns an, wie das Angular-Feedback den Zugriff auf Daten unterstützt und

110
00:07:46,220 --> 00:07:50,210
wie wir Dienste für den Zugriff auf die Daten nutzen können.

111
00:07:50,210 --> 00:07:54,160
Darüber hinaus, wie wir Daten bei der Gestaltung

112
00:07:55,420 --> 00:08:00,040
unserer Ansichten für unsere verschiedenen Angular-Komponenten nutzen können.

113
00:08:00,040 --> 00:08:04,240
Das ist also, wo der Datenbindungsaspekt ins Bild kommt.

114
00:08:04,240 --> 00:08:06,920
Dann schauen wir uns Angular Routing an und

115
00:08:06,920 --> 00:08:11,200
wie wir einzelne Seitenanwendungen in Angular implementieren können.

116
00:08:11,200 --> 00:08:13,920
Ich werde Ihnen erklären, was eine einzelne Seitenanwendung ist, und

117
00:08:13,920 --> 00:08:18,930
dann werden wir uns ansehen, wie wir eine mit dem Angular-Framework entwerfen können.

118
00:08:18,930 --> 00:08:24,060
Und das bringt Sie den ganzen Weg zur zweiten Aufgabe in diesem Kurs.

119
00:08:24,060 --> 00:08:29,120
Das dritte Modul konzentriert sich auf Winkelformen.

120
00:08:29,120 --> 00:08:32,517
Dann schauen wir uns Angular Reactive Forms an und

121
00:08:32,517 --> 00:08:36,883
wie Winkel- und Reaktive Programmierung zusammenarbeiten.

122
00:08:36,883 --> 00:08:40,236
Und wie Angular reaktive Programmierung nutzt, um

123
00:08:40,236 --> 00:08:45,470
verschiedene Unterstützungsformen innerhalb der Angular-Anwendung zu implementieren.

124
00:08:45,470 --> 00:08:50,324
Also schauen wir uns vorlagengesteuerte Formulare an, dann schauen wir uns Angular Reactive Formulare an, und

125
00:08:50,324 --> 00:08:53,262
dann schauen wir uns an, wie Angular Versprechen unterstützt.

126
00:08:53,262 --> 00:08:59,621
Und dann werfen Sie einen kurzen Blick auf die Reaktive Programmierung in RxJs im Kontext,

127
00:08:59,621 --> 00:09:07,565
wie Angular RxJs nutzt, um verschiedene Funktionen innerhalb des Frameworks zu unterstützen.

128
00:09:07,565 --> 00:09:12,130
Das bringt Sie bis zum dritten Auftrag in diesem Kurs.

129
00:09:12,130 --> 00:09:15,980
Das letzte Modul betrachtet Client-Server-Kommunikation.

130
00:09:15,980 --> 00:09:20,060
Wie Ihre Angular-Anwendung mit einem Server kommunizieren kann

131
00:09:20,060 --> 00:09:24,220
, der Daten bereitstellt, die von der Serverseite abgerufen und

132
00:09:24,220 --> 00:09:29,120
dann zum Rendern der Ansichten in Ihrer Angular-Anwendung verwendet werden können.

133
00:09:29,120 --> 00:09:33,370
Entsprechend betrachten wir auch, wie Änderungen, die Sie an

134
00:09:33,370 --> 00:09:38,020
den Daten vornehmen möchten,

135
00:09:38,020 --> 00:09:40,340
aus Ihrer Angular-Anwendung auf die Serverseite reflektiert werden können.

136
00:09:40,340 --> 00:09:44,670
Wir werden Angular und das HTTP-Modul in Angular betrachten.

137
00:09:44,670 --> 00:09:48,731
Wir werden uns ansehen, wie die REST-API für das

138
00:09:48,731 --> 00:09:52,171
Entwerfen Ihrer Angular-Anwendung genutzt wird,

139
00:09:52,171 --> 00:09:57,398
wir werden uns auch Animationen und Direktiven in Angular ansehen.

140
00:09:57,398 --> 00:10:00,040
Insbesondere Attributdirektiven in Angular.

141
00:10:00,040 --> 00:10:04,558
Wir werden Strukturdirektiven im allerersten Modul betrachten.

142
00:10:04,558 --> 00:10:10,140
Wir werden uns kurz mit dem Testen von Angular-Anwendungen befassen, und dann

143
00:10:10,140 --> 00:10:16,040
schauen wir uns schließlich an, wie wir unsere Angular-Anwendung auf einem Server erstellen und bereitstellen werden.

144
00:10:16,040 --> 00:10:22,030
Und das sollte Sie bis zum endgültigen Auftrag in diesem Kurs führen.

145
00:10:22,030 --> 00:10:27,758
Auf dem Weg haben wir auch eine Ehrenstrecke in diesen Kurs eingebaut.

146
00:10:27,758 --> 00:10:32,440
Wenn Sie mit Angular an Ihrem eigenen Projekt arbeiten

147
00:10:32,440 --> 00:10:37,950
möchten, bietet Ihnen der Ehren-Track die Möglichkeit,

148
00:10:37,950 --> 00:10:43,470
innerhalb dieses Kurses an Ihrem eigenen Projekt zu arbeiten.

149
00:10:43,470 --> 00:10:48,840
Werfen Sie einen Blick auf den Ehren-Track, und wenn Sie das interessiert, können Sie auch verfolgen,

150
00:10:48,840 --> 00:10:53,150
Ihr eigenes Angular-Projekt im Rahmen dieses Kurses zu entwickeln.

151
00:10:54,190 --> 00:10:58,175
Ich hoffe, Sie haben Spaß, diesen Kurs zu durchlaufen und Angular zu lernen.

152
00:10:59,500 --> 00:11:04,550
Das letzte Wort, mit dem ich Sie zurücklassen werde, ist Geduld.

153
00:11:04,550 --> 00:11:07,990
Angular erfordert viel Geduld zu lernen.

154
00:11:07,990 --> 00:11:11,020
Es wird viele Konzepte und

155
00:11:11,020 --> 00:11:15,740
Technologien geben, denen Sie begegnen werden, wenn Sie diesen Kurs durchlaufen.

156
00:11:15,740 --> 00:11:19,620
Bitte beeilen Sie sich nicht, um den Kurs abzuschließen.

157
00:11:19,620 --> 00:11:26,716
Nehmen Sie sich Zeit, um jeden einzelnen Schritt zu verstehen, bevor Sie diesen Kurs beenden.

158
00:11:26,716 --> 00:11:29,987
Ich hoffe, Sie genießen diesen Kurs.

159
00:11:29,987 --> 00:11:33,049
( MUSIK)