Что я должен написать в Angular index и app.component.html?

Question

В настоящее время я изучаю Angular и задаюсь вопросом, что именно должно быть закодировано в index.html и app.component.html вместо того, чтобы кодироваться в компонентах.

Мой текущий проект Angular - это мой личный веб-сайт, который я хотел бы перенести на Angular для обучения.Вы можете найти его по адресу http://www.chloe -seiler.com /

.это заголовок, навигация и тело.Тело отличается только при навигации, заголовок и навигация остаются на всем сайте.

Должен ли я кодировать заголовок и новый файл в index.html?Или в app.component.html?Или я должен сделать их компонентами, в этом случае: мои index.html и мой app.component.html остаются пустыми?

Заранее спасибо за помощь!

Answer 1

index.html : Поскольку базовое приложение, такое как персональный веб-сайт, разрабатывается, index.html может использоваться для включения css, js, значка, шрифтов и задания заголовка, введенного пользователемскрипты.

app.component.html : Это должно содержать представление компонента для компонента уровня приложения.Теперь хорошей практикой является использование маршрутизации в вашем приложении для каждого компонента.Затем вы можете вставить только тег

<router-outlet></router-outlet> 

для отображения ваших перенаправленных компонентов. Вот простой пример маршрутизации. Если вы не используете несколько компонентов, вы можете просто использовать app.component.html для отображения компонента уровня приложения.

Answer 2

app / app.component.ts - здесь мы определяем наш корневой компонент
index.html - это страница, на которой компонент будет отображаться в

так index.html это всего лишь начальная страница, вы можете добавить к ней ссылку на глобальный css и заголовок глобальной страницы ....

app / app.component.ts с ее файлом шаблонов(app / app.component.ts) он вызывается каждый раз при изменении маршрута ... поэтому в нем должны быть заголовок и нижний колонтитул:

<app-header></app-header> // here's goes the header
<router-outlet></router-outlet> // here's goes the content of each route
<app-footer></app-footer> // here's goes the footer