1 00:00:03,649 --> 00:00:10,244 Es ist Zeit, mit der allerersten Aufgabe in diesem Kurs zu beginnen. 2 00:00:10,244 --> 00:00:14,564 In dieser Zuweisung werden Sie mit Winkelkomponenten arbeiten. 3 00:00:14,564 --> 00:00:18,172 Sie werden eine neue Komponente namens dishdetail erstellen, 4 00:00:18,172 --> 00:00:21,690 um sie in Ihre Winkelanwendung hinzuzufügen, 5 00:00:21,690 --> 00:00:29,399 und Sie werden die Vorlage aktualisieren, so dass sie die Details eines bestimmten Gerichts anzeigt. 6 00:00:29,399 --> 00:00:37,645 Früher haben wir in der vorherigen Übung eine Karte in unsere Menükomponente eingeführt. 7 00:00:37,645 --> 00:00:41,954 Wir werden diese Karte entfernen und stattdessen die 8 00:00:41,954 --> 00:00:46,929 dishdetail-Komponente anstelle dieser Karte einschließen, damit die 9 00:00:46,929 --> 00:00:53,009 dishdetail-Komponente ihre Informationen 10 00:00:53,009 --> 00:00:56,263 in diesem Teil des Bildschirms anzeigen kann. 11 00:00:56,263 --> 00:01:01,435 Ihre erste Aufgabe besteht darin, die dishdetail Komponente zu erstellen. 12 00:01:01,435 --> 00:01:11,810 Am Ende der ersten Aufgabe, nachdem Sie die dishdetail Komponente erstellt haben, 13 00:01:11,810 --> 00:01:18,020 werden Sie in der Menükomponenten-Vorlagendatei diese Karte durch den Selektor 14 00:01:18,020 --> 00:01:19,430 der dishdetail Komponente dort ersetzen, 15 00:01:19,430 --> 00:01:23,510 so dass die Details der dishdetail Komponente 16 00:01:23,510 --> 00:01:27,579 rechts angezeigt werden unter dem Menü in der Menükomponente. 17 00:01:27,579 --> 00:01:31,564 Wir haben bereits gesehen, wie Sie diesen 18 00:01:31,564 --> 00:01:35,750 Selektor von einer Komponente in eine andere Komponente hinzufügen können. 19 00:01:35,750 --> 00:01:37,693 Als wir die Menükomponente erstellt 20 00:01:37,693 --> 00:01:41,500 haben, haben wir diese in die App-Komponente aufgenommen, 21 00:01:41,500 --> 00:01:48,710 so dass dies am Ende der ersten Aufgabe das Ergebnis in Ihrem Browser sein würde 22 00:01:48,710 --> 00:01:53,454 , wo anstelle der Karte, die die Details des Gerichts anzeigt, 23 00:01:53,454 --> 00:01:58,920 diese Worte namens „dishdetail works!“ am unteren Rand der Seite. 24 00:01:58,920 --> 00:02:02,390 Sobald Sie dies abgeschlossen haben, laden Sie 25 00:02:02,390 --> 00:02:09,349 eine vorkonfigurierte dishdetail-Komponenten-Vorlagendatei mit einigen fehlenden Teilen herunter 26 00:02:09,349 --> 00:02:18,474 und ersetzen Sie dann in der Vorlage Ihrer dishdetail-Komponente. 27 00:02:18,474 --> 00:02:24,439 Sobald Sie die Vorlage der bereitgestellten dishdetail-Komponente ersetzen, 28 00:02:24,439 --> 00:02:31,474 sehen Sie die Seite wie folgt aktualisiert. 29 00:02:31,474 --> 00:02:35,692 Also, Sie werden zwei Teile auf der Seite hier sehen, einer, der sagt: 30 00:02:35,692 --> 00:02:39,480 „Zeigen Sie die Details des Gerichts hier an.“ 31 00:02:39,480 --> 00:02:43,909 Sie werden eine Kartenkomponente verwenden, um die Details des Gerichts zu erstellen 32 00:02:43,909 --> 00:02:47,145 und dieses Gericht hier anzuzeigen. 33 00:02:47,145 --> 00:02:52,009 Darüber hinaus werden Sie 34 00:02:52,009 --> 00:02:58,444 hier auch eine Reihe von Kommentaren über das Gericht im zweiten Teil dieser Komponente anzeigen. 35 00:02:58,444 --> 00:03:04,270 Nun, um Sie in den Zuweisungsanweisungen zu beginnen, 36 00:03:04,270 --> 00:03:09,710 habe ich Ihnen ein neues JavaScript-Objekt geliefert, 37 00:03:09,710 --> 00:03:11,719 das die Details des Gerichts enthält, 38 00:03:11,719 --> 00:03:15,770 einschließlich der Kommentare zu diesem Gericht. 39 00:03:15,770 --> 00:03:18,875 Sie werden diese Informationen verwenden, um 40 00:03:18,875 --> 00:03:21,740 diese beiden zu konstruieren: die Kartenkomponente, um 41 00:03:21,740 --> 00:03:26,944 die Details des Gerichts anzuzeigen, und die Liste der Kommentare hier. 42 00:03:26,944 --> 00:03:32,699 Ihre zweite Aufgabe besteht darin, Ihre 43 00:03:32,699 --> 00:03:39,349 TypeScript-Datei so zu aktualisieren, dass sie die neue Dishvariable darin enthält, 44 00:03:39,349 --> 00:03:45,379 und dann die Dishvariable mit der Kartenkomponente zu verwenden 45 00:03:45,379 --> 00:03:52,710 und dann die Kartenkomponente hier vorzubereiten, um die Details des Gerichts anzuzeigen. 46 00:03:52,710 --> 00:03:55,400 Sobald Sie die zweite Aufgabe abgeschlossen haben, 47 00:03:55,400 --> 00:03:59,330 werden Sie in Ihrer Anwendung sehen, dass 48 00:03:59,330 --> 00:04:04,699 Sie direkt unter dem Menü die Details der 49 00:04:04,699 --> 00:04:09,590 gegebenen Gerichteninformationen in einer Karte wie dieser hier angezeigt werden, 50 00:04:09,590 --> 00:04:13,520 so dass Sie den Titel, das Bild 51 00:04:13,520 --> 00:04:17,129 und auch die Beschreibung unten sehen können. 52 00:04:17,129 --> 00:04:22,519 Nun, nachdem Sie dies abgeschlossen haben, gehen Sie mit der dritten Aufgabe über. 53 00:04:22,519 --> 00:04:29,120 In der dritten Aufgabe verwenden Sie die Kommentare, die auch in der 54 00:04:29,120 --> 00:04:35,239 Schale enthalten sind, die wir Ihnen im JavaScript-Objekt zur Verfügung gestellt haben, 55 00:04:35,239 --> 00:04:40,819 und verwenden Sie diese dann, um eine Liste von Kommentaren hier zu erstellen und anzuzeigen. 56 00:04:40,819 --> 00:04:43,235 Am Ende der dritten Aufgabe 57 00:04:43,235 --> 00:04:48,595 sehen Sie das, was auf der rechten Seite Ihres Gerichts angezeigt wird. 58 00:04:48,595 --> 00:04:52,235 Sie können sehen, dass Sie hier eine Kopfzeile mit 59 00:04:52,235 --> 00:04:54,019 dem Wort „Kommentare“ haben, 60 00:04:54,019 --> 00:04:58,149 und dann haben Sie eine Liste von Kommentaren, die hier angezeigt werden. 61 00:04:58,149 --> 00:05:03,480 Die Informationen für die Konstruktion dieser Kommentare sind im 62 00:05:03,480 --> 00:05:07,699 Gericht JavaScript-Objekt verfügbar, das wir für Sie gegeben haben. 63 00:05:07,699 --> 00:05:11,610 Beachten Sie insbesondere, dass dies der eigentliche Kommentar ist, 64 00:05:11,610 --> 00:05:15,505 dies ist die Anzahl der Sterne, die 65 00:05:15,505 --> 00:05:21,259 diesem Kommentar gegeben werden, und hier zeigen wir den Namen des Autors mit zwei Bindestrichen vor, 66 00:05:21,259 --> 00:05:25,589 und beachten Sie, am Ende, wir zeigen das Datum hier. 67 00:05:25,589 --> 00:05:28,774 Um dieses Datum hier konstruieren zu können, 68 00:05:28,774 --> 00:05:33,600 müssen Sie eine Winkelleitung namens Date verwenden. 69 00:05:33,600 --> 00:05:37,610 Wir haben bereits die Verwendung einer eingebauten Pipe namens Großbuchstaben 70 00:05:37,610 --> 00:05:39,939 in der vorherigen Übung gesehen, 71 00:05:39,939 --> 00:05:45,379 so dass Sie einfach die Date-Pipe verwenden, um dieses 72 00:05:45,379 --> 00:05:50,660 Datum zu erstellen, das rechts neben dem Namen des Autors hier angezeigt wird. 73 00:05:50,660 --> 00:05:53,839 Also, das sind die Hinweise, um Sie mit 74 00:05:53,839 --> 00:05:59,240 dieser dritten Aufgabe in Ihrem ersten Auftrag beginnen zu lassen. 75 00:05:59,240 --> 00:06:02,849 Viel Spaß beim Abschluss des ersten Auftrags. 76 00:06:02,849 --> 00:06:04,620 Unabhängig von den Ressourcen, 77 00:06:04,620 --> 00:06:09,980 die Sie benötigen, die vorkonfigurierte halbvollständige Vorlagendatei 78 00:06:09,980 --> 00:06:14,115 und das JavaScript-Objekt sind beide 79 00:06:14,115 --> 00:06:18,649 in den Anweisungen für diese Zuweisung verfügbar.