1 00:00:03,650 --> 00:00:09,520 Eine typische Angular-Anwendung besteht aus vielen Komponenten. 2 00:00:09,520 --> 00:00:16,225 Komponenten steuern einen Teil des Bildschirms, der als Ansicht in Angular aufgerufen wird. 3 00:00:16,225 --> 00:00:21,840 Wenn Sie also Ihren Bildschirm in Ihrer Angular-Anwendung erstellen, 4 00:00:21,840 --> 00:00:25,310 können Sie Ihren Bildschirm in mehrere Ansichten aufteilen, 5 00:00:25,310 --> 00:00:29,384 wobei jede von ihnen durch eine separate Komponente gesteuert wird. 6 00:00:29,384 --> 00:00:31,200 Bisher 7 00:00:31,200 --> 00:00:35,715 haben wir in dem Beispiel eine einzelne Root-Komponente, die den gesamten Bildschirm steuert. 8 00:00:35,715 --> 00:00:42,440 In dieser Lektion werden wir eine weitere Komponente hinzufügen, die Teil des Bildschirms ist und die 9 00:00:42,440 --> 00:00:45,890 Kontrolle über diesen Teil des Bildschirms übernimmt und kümmert sich um 10 00:00:45,890 --> 00:00:50,275 das gesamte Rendering dieses Teils des Bildschirms, hier. 11 00:00:50,275 --> 00:00:54,060 Lassen Sie uns die App-Komponente kurz besuchen, die 12 00:00:54,060 --> 00:00:57,350 wir bereits als Teil unserer Angular-Anwendung haben. 13 00:00:57,350 --> 00:00:58,730 Also, in dieser Komponente 14 00:00:58,730 --> 00:01:04,250 können Sie sehen, dass wir die Komponente aus Angular-Kern importieren. 15 00:01:04,250 --> 00:01:07,100 Dies bietet uns die Möglichkeit, 16 00:01:07,100 --> 00:01:11,585 einen Komponenten-Dekorator zu definieren und ihn auf unsere Klasse anzuwenden. 17 00:01:11,585 --> 00:01:16,640 Dies wird also eine Komponente definieren, die Teil unserer Angular-Anwendung ist. 18 00:01:16,640 --> 00:01:19,590 Also, hier, diese spezielle Komponente, 19 00:01:19,590 --> 00:01:22,970 wie Sie sehen können, wenn Sie den Komponenten-Dekorator definieren, 20 00:01:22,970 --> 00:01:30,450 besteht sie aus mehreren Eigenschaften hier einer von ihnen ist der Selektor, hier. 21 00:01:30,450 --> 00:01:36,375 Nun definiert diese spezielle Selektoreigenschaft hier eine Zeichenfolge. 22 00:01:36,375 --> 00:01:40,010 Beachten Sie insbesondere, was in der Zeichenfolge enthalten ist. 23 00:01:40,010 --> 00:01:42,080 Es steht App-Root. 24 00:01:42,080 --> 00:01:46,270 Jetzt blickt man auf die Datei index.html zurück. 25 00:01:46,270 --> 00:01:48,915 Also, ich gehe zu index.html Datei. 26 00:01:48,915 --> 00:01:51,400 Sie können sehen, dass genau dort, 27 00:01:51,400 --> 00:02:00,570 wir verwenden diese app-root als eines der Tags in unserer index.html Datei. 28 00:02:00,570 --> 00:02:05,630 Also, jetzt sehen Sie, dass dieses bestimmte Tag, das Sie verwenden, 29 00:02:05,630 --> 00:02:11,270 bezieht sich auf den Selektor dessen, was wir hier angegeben haben, app-root. 30 00:02:11,270 --> 00:02:18,500 Wenn Sie also einen Teil des Bildschirms geben und diesen durch eine Komponente steuerbar machen möchten, 31 00:02:18,500 --> 00:02:23,135 verwenden Sie den Selektor, um anzugeben, und fügen Sie dann 32 00:02:23,135 --> 00:02:28,310 das Selektor-Tag in Ihre HTML-Datei ein. 33 00:02:28,310 --> 00:02:32,190 Gleiches gilt auch für die Vorlage einer Komponente. 34 00:02:32,190 --> 00:02:35,330 Wenn Sie einen anderen Selektor aus einer anderen Komponente 35 00:02:35,330 --> 00:02:39,350 in die Vorlage dieser Komponente aufnehmen, 36 00:02:39,350 --> 00:02:42,770 wird dieser Teil des Bildschirms an 37 00:02:42,770 --> 00:02:46,440 die zweite Komponente übergeben, die von der zweiten Komponente gesteuert werden soll. 38 00:02:46,440 --> 00:02:52,304 Darüber werden wir auch in einer der späteren Lektionen lernen. 39 00:02:52,304 --> 00:02:57,970 Nun ist der zweite Teil, den Sie sehen, angegeben wird, templateUrl. 40 00:02:57,970 --> 00:03:06,560 Diese TemplateURL gibt den Namen der Vorlagendatei für diese bestimmte Komponente an. 41 00:03:06,560 --> 00:03:10,970 Also, in diesem Fall, wie Sie sehen können, ist dies app.component.html. 42 00:03:10,970 --> 00:03:14,720 Das ist der Grund, warum die Vorlage in der 43 00:03:14,720 --> 00:03:19,605 Datei app.component.html für diese bestimmte Komponente definiert wird. 44 00:03:19,605 --> 00:03:25,270 Darüber hinaus können Sie auch Stile für diese Anwendung bereitstellen. 45 00:03:25,270 --> 00:03:30,105 Also, hier sagen wir StyleURLs und dann hier, 46 00:03:30,105 --> 00:03:36,610 in eckigen Klammern, geben Sie dieses Sprichwort an. /app.component.scss. 47 00:03:36,610 --> 00:03:44,175 Also, was bedeutet, dass diese bestimmte SaaS-Datei auf diesen Stil angewendet wird. 48 00:03:44,175 --> 00:03:48,620 Wie Sie gesehen haben, als wir unsere Angular-Anwendung erstellt haben, 49 00:03:48,620 --> 00:03:53,970 habe ich auf das Stil-Format angegeben, das ich verwenden werde, ist ein SCSS. 50 00:03:53,970 --> 00:03:56,650 Also, das ist der Grund, warum diese Dateien SCSS sind. 51 00:03:56,650 --> 00:04:01,190 Wenn Sie den Stil SCSS nicht verwenden und stattdessen normal erstellen, 52 00:04:01,190 --> 00:04:06,860 dann wären dies nur CSS-Dateien und dann können Sie CSS verwenden, um 53 00:04:06,860 --> 00:04:16,020 die Stile zu definieren, die in Ihren Anwendungsvorlagen oder in Ihren Komponentenvorlagen verwendet werden können. 54 00:04:16,020 --> 00:04:19,820 Wenn Sie also Komponentenspezifische 55 00:04:19,820 --> 00:04:23,000 Stile haben, die Sie für diese bestimmte Komponente einschließen möchten, 56 00:04:23,000 --> 00:04:25,565 fügen Sie sie in diese Datei ein. 57 00:04:25,565 --> 00:04:29,965 Sie können auch die Vorlage und den Stil inline angeben. 58 00:04:29,965 --> 00:04:33,280 Wenn Sie also den Stil oder die Vorlage inline angeben, 59 00:04:33,280 --> 00:04:37,785 würden Sie dies einfach wie bei hinteren Anführungszeichen angeben. 60 00:04:37,785 --> 00:04:40,080 So kann ich zum Beispiel einfach, 61 00:04:40,080 --> 00:04:42,520 anstatt die TemplateURL 62 00:04:42,520 --> 00:04:47,180 zu tun, kann ich dies einfach als Vorlage bearbeiten und 63 00:04:47,180 --> 00:04:52,475 dann werde ich die Vorlage in hinteren Anführungszeichen definieren. 64 00:04:52,475 --> 00:04:59,420 Also würde ich sagen, und innerhalb der hinteren Qootes kann ich sogar Vorlagen wie diese machen. 65 00:04:59,420 --> 00:05:07,360 Also, ich kann sagen, h1 und dann Titel. 66 00:05:07,360 --> 00:05:17,060 Also, das wäre, was wir als Inline-Vorlage nennen, die wir innerhalb unserer Anwendung verwenden. 67 00:05:17,060 --> 00:05:19,280 Wenn Sie nun Back-Anführungszeichen verwenden, 68 00:05:19,280 --> 00:05:23,690 können Sie auch Dinge wie Dollar Add on 69 00:05:23,690 --> 00:05:28,955 verwenden, um Variablen in Ihren Vorlagen zu verwenden und so weiter. 70 00:05:28,955 --> 00:05:31,235 In diesem speziellen Kurs 71 00:05:31,235 --> 00:05:34,820 werden wir separate Vorlagendateien verwenden 72 00:05:34,820 --> 00:05:39,590 und stattdessen die Vorlagen in diesen HTML-Dateien erstellen. 73 00:05:39,590 --> 00:05:45,050 Ich bevorzuge diese Methode, meine Vorlagen zu definieren, anstatt Inline-Vorlagen zu machen. 74 00:05:45,050 --> 00:05:49,180 Aber wenn Ihre Vorlage sehr einfach ist und nur zwei oder drei Zeilen enthält, 75 00:05:49,180 --> 00:05:56,235 dann verwenden Sie auf jeden Fall eine Inline-Vorlage wie diese in Ihrer Anwendung. 76 00:05:56,235 --> 00:06:02,930 Also, lassen Sie mich es zurück auf meinen ursprünglichen Wert hier ändern. 77 00:06:02,930 --> 00:06:04,770 Das Gleiche für Stile. 78 00:06:04,770 --> 00:06:08,240 Außerdem kann ich einfach Stile sagen und dann in hinteren Anführungszeichen 79 00:06:08,240 --> 00:06:12,500 meine CSS-Klassen in die hinteren Anführungszeichen einschließen. 80 00:06:12,500 --> 00:06:15,245 Obwohl ich, wie ich bereits erwähnt 81 00:06:15,245 --> 00:06:24,895 habe, bevorzuge ich es, sie in separaten Dateien zu behalten, nur um sauberen Code in meinen.ts Dateien hier zu haben. 82 00:06:24,895 --> 00:06:27,515 So haben wir Selektorvorlagen-Stile. 83 00:06:27,515 --> 00:06:30,010 Wir werden auch eine andere namens Modul-ID haben. 84 00:06:30,010 --> 00:06:33,020 Im Moment verwende ich das nicht für meine Komponente, 85 00:06:33,020 --> 00:06:40,395 aber in einigen Fällen müssen Sie die Modul-ID explizit für Ihre Komponente angeben. 86 00:06:40,395 --> 00:06:44,610 Wir werden einige Beispiele dafür ein wenig später sehen. 87 00:06:44,610 --> 00:06:50,955 Darüber hinaus ist eine Komponente nichts anderes als eine JavaScript-Klasse oder eine Type Script-Klasse. 88 00:06:50,955 --> 00:06:53,615 Deshalb sehen Sie hier, 89 00:06:53,615 --> 00:06:58,960 indem Sie eine Klasse definieren, die AppComponent sagt, und dann exportieren Sie diese Klasse. 90 00:06:58,960 --> 00:07:01,820 Der Grund, warum wir den Export hier verwenden, 91 00:07:01,820 --> 00:07:06,820 damit diese Komponente in mein App-Modul importiert werden kann. 92 00:07:06,820 --> 00:07:10,070 Sie haben also gesehen, dass wir dies in mein App-Modul importiert haben. 93 00:07:10,070 --> 00:07:18,350 Wann immer Sie also eine Komponente oder ein Modul in einem anderen Modul in portable machen möchten, 94 00:07:18,350 --> 00:07:25,245 würden Sie hier immer den Export in die Klasse vorangestellt. 95 00:07:25,245 --> 00:07:28,040 Außerdem 96 00:07:28,040 --> 00:07:34,295 sehen wir, dass wir einige lokale Eigenschaften haben, die wir 97 00:07:34,295 --> 00:07:43,220 in unseren Klassen hier definiert haben und diese für meine Vorlage zugänglich wären. 98 00:07:43,220 --> 00:07:45,340 So kann ich diese in meiner Vorlage nutzen. 99 00:07:45,340 --> 00:07:48,170 Also sind die Eigenschaften, die in meiner 100 00:07:48,170 --> 00:07:53,230 component.ts-Datei definiert sind, über meine Vorlagendateien zugänglich. 101 00:07:53,230 --> 00:08:00,875 Wir werden etwas später in einer anderen Lektion über den Datenbindungsaspector sprechen. 102 00:08:00,875 --> 00:08:08,075 Zusammenfassend ist, was wir bisher gelernt haben, dass eine Komponente definiert wird, 103 00:08:08,075 --> 00:08:15,990 indem Sie den Code angeben und auch die entsprechende Vorlage angeben. 104 00:08:15,990 --> 00:08:19,850 So können Sie innerhalb des Codes Eigenschaften und Methoden definieren 105 00:08:19,850 --> 00:08:24,455 , auf die von Ihrer Vorlage aus der entsprechenden Vorlage zugegriffen werden kann. 106 00:08:24,455 --> 00:08:29,370 Wie Sie also gesehen haben, haben 107 00:08:29,370 --> 00:08:33,425 Sie in den Metadaten, im Dekorator, im Komponentendekorator den Vorlagendateinamen als eine 108 00:08:33,425 --> 00:08:38,380 der Eigenschaften für Ihre Komponentenklasse hier angegeben. 109 00:08:38,380 --> 00:08:41,870 In ähnlicher Weise können alle Eigenschaften und Methoden, die Sie in 110 00:08:41,870 --> 00:08:45,875 Ihrer Komponente definieren, über die Vorlage aufgerufen werden. 111 00:08:45,875 --> 00:08:49,645 Nicht nur das, Sie können auch das, was als 112 00:08:49,645 --> 00:08:53,450 Ereignisbindung bezeichnet wird, von Ihrer Vorlage zurück zu Ihren Komponenten haben. 113 00:08:53,450 --> 00:08:57,320 Also, wenn irgendwelche Ereignisse in Ihren Vorlagen generiert werden, so zum Beispiel, 114 00:08:57,320 --> 00:09:02,180 klicken Sie auf eine Schaltfläche in Ihrer Vorlage, die 115 00:09:02,180 --> 00:09:08,535 Aufrufe von Methoden in Ihrem Code hier auslösen kann, 116 00:09:08,535 --> 00:09:11,400 das Javascript oder den Type Script-Code hier. 117 00:09:11,400 --> 00:09:16,790 Wir werden die Verwendung dieser in einem der späteren Lektionen sehen und dann werde ich wieder 118 00:09:16,790 --> 00:09:20,180 diesen Punkt über Eigenschaftsbindung und Ereignisbindung nochmals nochmals 119 00:09:20,180 --> 00:09:23,500 aufgreifen und Ihnen dies etwas genauer erklären. 120 00:09:23,500 --> 00:09:29,840 Die Komponenten in einer Angular-Anwendung können selbst in einer Hierarchie organisiert werden. 121 00:09:29,840 --> 00:09:32,470 Also, Sie werden immer eine Root-Komponente haben. 122 00:09:32,470 --> 00:09:37,130 Für unsere Anwendung 123 00:09:37,130 --> 00:09:43,039 bilden also die Datei app.component.ts und die entsprechende HTML-Vorlage die Stammkomponente für unsere Anwendung 124 00:09:43,039 --> 00:09:46,724 und diese Root-Komponente kann dann 125 00:09:46,724 --> 00:09:52,825 Komponenten in einer Hierarchie enthalten und Komponenten in die Hierarchie aufnehmen. 126 00:09:52,825 --> 00:09:56,750 Wir werden das in der nächsten Übung sehen, 127 00:09:56,750 --> 00:10:02,275 wo wir eine andere Komponente erstellen und diese dann in unserer Root-Komponente verwenden werden. 128 00:10:02,275 --> 00:10:04,960 Sie können also mehrere Komponenten 129 00:10:04,960 --> 00:10:08,005 in Ihre Stammkomponente einbeziehen, und diese Komponenten 130 00:10:08,005 --> 00:10:13,690 selbst können wiederum andere Komponenten verwenden, die in ihnen enthalten sind. 131 00:10:13,690 --> 00:10:21,075 Diese Hierarchie von Komponenten ermöglicht es Ihnen, den Bildschirm Ihrer Anwendung zu entwerfen. 132 00:10:21,075 --> 00:10:24,940 Mit diesem schnellen Verständnis der Komponenten 133 00:10:24,940 --> 00:10:28,810 und wie Komponenten für die Gestaltung unserer Anwendung nützlich sind, 134 00:10:28,810 --> 00:10:32,935 gehen wir nun zu unserer nächsten Übung, wo wir 135 00:10:32,935 --> 00:10:37,339 eine weitere Komponente zu unserer Angular-Anwendung erstellen und hinzufügen 136 00:10:37,339 --> 00:10:41,810 und dann werden wir eine Vorlage für diese Komponente definieren und dann werden wir nutzen Sie 137 00:10:41,810 --> 00:10:47,230 diese Komponente in unserer Root-Komponente, um unseren Bildschirm zu entwerfen.