Angular - это полнофункциональный SPA фреймворк, с помощью которого создается одностраничное приложение. В SPA вся страница не перезагружается каждый раз, каждый раз вид будет меняться
Так что при первой загрузке приложения не все страницы с сервера будут отображаться .. Это только индекс. html, который загружается при загрузке приложения. Поскольку загружается только одна страница, она называется SPA
. Вам необходимо создать три разных компонента и для каждого компонента. html вы добавляете html:
1.header-component
2.content-cmponent
3.footer-component
Вы можете создать каждый компонент с помощью этой команды
ng g c header
Когда вы создаете свои компоненты go для компонента приложения. html и добавляете эти компоненты следующим образом
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
Посмотрите этот рабочий пример
Если вы используете маршрутизацию, вы должны сделать это:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
Ваш контент должен быть компонентом, который вы перенаправляете с маршрутизации!
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ContentComponent } from './content/content.component';
const routes: Routes = [
{
path: '',
component: ContentComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Обновленный пример с маршрутизацией