Несмотря на то, что шаблонный проект предоставляет базовый функционал и выглядит достаточно неплохо, зачастую необходимо реализовывать проект в собственном дизайне, поэтому возникает потребность удалить лишние компоненты с формы. Это мы сейчас и сделаем.


Для начала идем в файл:

Angular2/ClientApp/app/app.shared.module.ts
app.shared.module.ts

app.shared.module.ts

В нем мы можем удалить следующие строки:

import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

В блоке declarations удаляем:

NavMenuComponent,
CounterComponent,
FetchDataComponent,

В блоке imports удаляем:

{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },

Таким образом, у нас должен получиться следующий результат:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

После этого мы можем удалить сами папки компонентов из решения:

Angular2/ClientApp/app/components/counter
Angular2/ClientApp/app/components/fetchdata
Angular2/ClientApp/app/components/navmenu
Remove folders

Remove folders

Теперь необходимо изменить файл компонента приложения

Angular2/ClientApp/app/components/app/app.component.html
app.component.html

app.component.html

Оставив в нем следующее содержимое:

<div class="container"></div>

Также очистим файл главной страницы

Angular2/ClientApp/app/components/home/home.component.html
home.component.html

home.component.html

Оставим там только приветствие:

<h1>Hello, world!</h1>

После этого выполняем компиляцию решения кнопкой F5.

В итоге получаем следующий результат:

Empty Angular app

Empty Angular app

 

shwan

Программист .NET

×
%d такие блоггеры, как: