1
00:00:00,000 --> 00:00:04,549
[MUSIK]

2
00:00:04,549 --> 00:00:08,557
Im allerersten Modul haben wir die Richtlinien kurz überarbeitet und

3
00:00:08,557 --> 00:00:11,590
Strukturrichtlinien betrachtet.

4
00:00:11,590 --> 00:00:15,410
Wir haben gesehen, wie strukturelle Richtlinien es uns ermöglichen, die Vorlagen zu entwerfen.

5
00:00:15,410 --> 00:00:17,880
Für unsere Winkel-Komponenten.

6
00:00:17,880 --> 00:00:21,160
In dieser Lektion werden wir Attributdirektiven überprüfen.

7
00:00:21,160 --> 00:00:23,770
Die dritte Art von Richtlinie.

8
00:00:23,770 --> 00:00:28,790
Und wir werden auch untersuchen, wie wir

9
00:00:28,790 --> 00:00:31,350
in der Übung, die diesem Vortrag folgt, eine benutzerdefinierte Direktive entwerfen können.

10
00:00:33,240 --> 00:00:37,490
Wie wir erkannt haben, sind Direktiven eine Möglichkeit,

11
00:00:37,490 --> 00:00:42,360
sowohl Angular-Vorlagen zu entwerfen und ermöglichen es uns,

12
00:00:42,360 --> 00:00:47,820
verschiedene Teile der Damm-Manipulation mit einer R Angular Anwendungen Ansichten zu tun.

13
00:00:47,820 --> 00:00:53,280
Also haben wir die Verwendung von Direktiven gesehen, um Anweisungen für die Angular-Wiederholung

14
00:00:53,280 --> 00:00:56,750
zu geben und wie die Vorlagen in das DOM zu rendern.

15
00:00:56,750 --> 00:01:01,090
Und wir haben bereits gelernt, dass innerhalb der Angular Anwendung

16
00:01:01,090 --> 00:01:06,020
die Verwendung von strukturellen Direktiven in den Vorlagen es uns ermöglicht,

17
00:01:06,020 --> 00:01:10,080
unsere Ansichten unserer Angular Anwendung zu entwerfen.

18
00:01:10,080 --> 00:01:15,060
Wir haben auch gelernt, dass die Komponente, die wir so

19
00:01:15,060 --> 00:01:20,640
umfangreich in den verschiedenen Übungen in diesem Kurs verwendet haben.

20
00:01:20,640 --> 00:01:26,410
Es handelt sich um eine spezielle Art von Richtlinie, die eine Vorlage oder eine Ansicht beigefügt hat.

21
00:01:27,430 --> 00:01:29,560
Und wir haben auch früher gelernt, dass

22
00:01:29,560 --> 00:01:35,330
es zwei andere Arten von Direktiven gibt, die wir innerhalb unserer Vorlagen verwenden können.

23
00:01:35,330 --> 00:01:39,390
Die strukturellen Direktiven und Attribute Direktiven.

24
00:01:39,390 --> 00:01:44,060
Wir haben uns einige eingebaute strukturelle Direktiven im allerersten

25
00:01:44,060 --> 00:01:46,990
Modul dieses Kurses angesehen.

26
00:01:46,990 --> 00:01:52,380
Und wir haben gesehen, wie wir strukturelle Direktiven wie NG4 oder NGF und

27
00:01:52,380 --> 00:01:59,060
mehr in diesen Übungen in den vorherigen Teilen dieses Kurses verwenden können.

28
00:01:59,060 --> 00:02:04,230
Jetzt schauen wir uns die andere Art von Direktive an, die Attribut-Direktive.

29
00:02:04,230 --> 00:02:05,630
Was ist eine Attribut-Direktive und

30
00:02:05,630 --> 00:02:10,360
wie hilft sie uns beim Entwerfen unserer Angular-Anwendung?

31
00:02:10,360 --> 00:02:12,650
Also, was sind Attribut-Direktiven?

32
00:02:12,650 --> 00:02:18,790
Attributdirektiven werden als Attribute für Elemente in Ihrer Vorlage verwendet.

33
00:02:18,790 --> 00:02:23,460
So haben Sie Ihren HTML-Code, den Sie in Ihrer Vorlage schreiben, und

34
00:02:23,460 --> 00:02:26,900
die HTML-Elemente können Sie eine Attribut-Direktive

35
00:02:26,900 --> 00:02:28,410
auf diese HTML-Elemente anwenden.

36
00:02:28,410 --> 00:02:31,940
Wir sahen auch die strukturelle Richtlinie des Nutzers.

37
00:02:31,940 --> 00:02:37,020
Und wir sahen, dass die Komponenten selbst zusätzliche HTML-ähnliche

38
00:02:37,020 --> 00:02:41,710
Elemente hinzufügen können, die innerhalb der Vorlagen Ihrer Angular-Anwendung verwendet werden können.

39
00:02:41,710 --> 00:02:45,510
Die Art und Weise, wie wir die Komponenten mit ihren Selektoren verwenden,

40
00:02:45,510 --> 00:02:49,850
war eine Möglichkeit, Direktiven innerhalb unserer Angular-Anwendung zu verwenden.

41
00:02:49,850 --> 00:02:53,910
Als wir die Verwendung von strukturellen Direktiven sahen, die auf

42
00:02:53,910 --> 00:02:58,890
die verschiedenen HTML-Elemente innerhalb unserer Vorlage angewendet wurden.

43
00:02:58,890 --> 00:03:02,590
Nun schauen wir uns Attribut-Direktiven an, die es uns ermöglichen,

44
00:03:02,590 --> 00:03:06,930
bestimmte Eigenschaften unserer HTML-Elemente zu ändern.

45
00:03:06,930 --> 00:03:09,480
Also, was sind die Verwendung von Attribut-Direktiven?

46
00:03:09,480 --> 00:03:15,480
Attributdirektiven hören und ändern das Verhalten anderer HTML-Elemente oder

47
00:03:15,480 --> 00:03:21,410
Attribute oder Eigenschaften oder Komponenten, die Sie in Ihren Vorlagen verwenden.

48
00:03:21,410 --> 00:03:25,630
Wir haben tatsächlich einige der

49
00:03:25,630 --> 00:03:30,500
eingebauten Attribute-Direktive bereits verwendet, ohne explizit über sie zu sprechen.

50
00:03:30,500 --> 00:03:34,880
Sprechen Sie über die integrierten Attributdirektiven, die als Teil Ihres

51
00:03:34,880 --> 00:03:36,260
Angular-Frameworks kommen.

52
00:03:36,260 --> 00:03:41,390
Sie haben bereits Ng-Modell in einigen der vorherigen Lektionen

53
00:03:41,390 --> 00:03:46,410
in diesem Kurs begegnet, insbesondere im Datenbindungsbereich und

54
00:03:46,410 --> 00:03:52,620
auch, wenn wir über die Schriftarten im vorherigen Modul studiert haben.

55
00:03:52,620 --> 00:03:55,520
Es gibt zwei andere Arten von eingebauten Attribut-Direktiven, die wir

56
00:03:55,520 --> 00:03:59,180
begegnen könnten, ist ngClass und ngStyle.

57
00:03:59,180 --> 00:04:03,430
Mit dem Namen selbst können Sie erraten, was ihr Zweck ist.

58
00:04:03,430 --> 00:04:07,600
In ähnlicher Weise gibt es einige andere Module, die Sie in Ihren

59
00:04:07,600 --> 00:04:13,190
Angular-Anwendungen verwenden, wie das FormsModule und auch das RouterModule, die einen

60
00:04:13,190 --> 00:04:18,245
eigenen Satz von integrierten Attributdirektiven haben, die wir verwenden.

61
00:04:18,245 --> 00:04:22,865
In der Tat haben wir sie bereits verwendet, wenn wir Formulare definieren und

62
00:04:22,865 --> 00:04:28,645
auch die Verwendung des Routers innerhalb unserer Angular-Anwendung früher.

63
00:04:28,645 --> 00:04:33,005
Nun, an diesem Punkt, fragen Sie sich vielleicht, wie gehe ich über die Erstellung meiner

64
00:04:33,005 --> 00:04:37,985
eigenen Attribut-Direktive, wenn ich daran interessiert bin, eine benutzerdefinierte Direktive zu erstellen, also

65
00:04:37,985 --> 00:04:44,950
werden wir hier schauen, wie Sie eine benutzerdefinierte Direktive ableiten können.

66
00:04:44,950 --> 00:04:50,470
Lassen Sie uns benutzerdefinierte Direktiven in der nächsten Folie kurz und

67
00:04:50,470 --> 00:04:53,040
in der folgenden Übung untersuchen.

68
00:04:53,040 --> 00:04:57,280
In benutzerdefinierten Direktiven ist Ihre Erwartung also, dass Sie in der Lage wären, das zu implementieren,

69
00:04:57,280 --> 00:04:58,990
was Sie interessiert sind.

70
00:04:58,990 --> 00:05:03,310
Insbesondere hier können wir unsere eigenen benutzerdefinierten Direktiven erstellen.

71
00:05:03,310 --> 00:05:08,660
Mit der Angular CLI können Sie den nackten Bones Code für eine Direktive aufstellen

72
00:05:08,660 --> 00:05:13,130
und danach diesen Code ändern, um Ihre benutzerdefinierte Direktive zu implementieren.

73
00:05:13,130 --> 00:05:17,860
Wenn Sie also eine benutzerdefinierte Direktive mit Angular CLI implementieren,

74
00:05:17,860 --> 00:05:19,920
wird eine Direktive für Sie erstellt.

75
00:05:19,920 --> 00:05:24,490
Und dann werden Sie sofort bemerken, dass

76
00:05:24,490 --> 00:05:29,880
Sie innerhalb der Direktive diese verzierte

77
00:05:29,880 --> 00:05:35,290
Dekorator-Klasse verwenden werden, um die Klasse in eine Direktive zu konvertieren, und

78
00:05:35,290 --> 00:05:39,410
wir werden einem solchen in der folgenden Übung begegnen.

79
00:05:39,410 --> 00:05:45,120
Darüber hinaus mit dem Director, insbesondere wenn Sie Attributdirektiven verwenden und

80
00:05:45,120 --> 00:05:50,490
alle Elemente ändern möchten, die in Ihren Vorlagen verwendet werden.

81
00:05:50,490 --> 00:05:55,560
Eine andere Klasse, die für uns nützlich ist, heißt ElementRef.

82
00:05:55,560 --> 00:06:00,740
Dies ist auch wichtig aus dem Angular-Code, und dies wird in Ihren

83
00:06:00,740 --> 00:06:06,130
Direktiven-Konstruktor injiziert, geschrieben Ihre Direktivenklasse.

84
00:06:06,130 --> 00:06:10,940
Und dann können Sie auf die DOM-Elemente zugreifen und

85
00:06:10,940 --> 00:06:13,580
dann Änderungen an ihnen vornehmen.

86
00:06:13,580 --> 00:06:18,137
Mit diesem schnellen Verständnis, wie Sie benutzerdefinierte Direktiven erstellen können,

87
00:06:18,137 --> 00:06:22,351
schauen wir uns ein Beispiel in der Übung an, die dieser Vorlesung folgt.

88
00:06:22,351 --> 00:06:28,469
( MUSIK)