Υποενότητα 13.1: Δρομολόγηση - Πρακτική

Ανοίξτε το τερματικό σας και μεταβείτε στον φάκελο angularChocoYourname  

Για να προσθέσετε μια νέα συνιστώσα, το υποσέλιδο - footer, χρησιμοποιώντας το Angular CLI, πληκτρολογήστε τα ακόλουθα στη γραμμή εντολών

ng generate component footer

Ανοίξτε τον φάκελο angularChocoYourname  στο  Visual Editor code και ελέγξτε τη δημιουργία:

Ενημερώστε την template, footer.component.html, και το  styles.css  as follows:

View HTML source:

View CSS source:

Λάβετε υπόψη ότι το Angular έχει αυτόματα ενημερώσει το app.module.ts

Ενημερώστε το αρχείοι  app.component.html να συμπεριλάβει το υποσέλιδο ως εξής:

<app-footer></app-footer>

Με τον προηγούμενο κώδικα ολοκληρωμένο, ανοίξτε το τερματικό σας και  μεταβείτε στον υποφακέλο angularChocoYourname   και τρέξτε ng serve για να εκτελέσετε την εφαρμογή σας. Στο πρόγραμμα περιήγησης περιηγηθείτε στο URL localhost:4200 

Αυτός ο κώδικας θα δημιουργήσει μια σελίδα που εμφανίζεται ως εξής:

Κάντε μια  Git commit με το μήνυμα "Angular Footer".