angular 一般配置

spfLinux發表於2018-01-24

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {AppRoutingModule} from './app.router';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

import { AppComponent }  from './app.component';
import { CartComponent }  from './cart/cart.component';
import { DetailComponent }  from './detail/detail.component';
import { IndexComponent }  from './index/index.component';
import { ListComponent }  from './list/list.component';
import { LoginComponent }  from './login/login.component';
import { OrderConfirmComponent }  from './orderConfirm/orderconfirm.component';
import { RegisterComponent }  from './register/register.component';
import { UserCenterComponent }  from './userCenter/usercenter.component';
import { HeaderComponent }  from './utility/header/header.component';
import { FooterComponent }  from './utility/footer/footer.component';
import { NotFoundComponent }  from './utility/notFound/notfound.component';

@NgModule({
  imports: [ 
    AppRoutingModule,
    FormsModule,
    HttpModule,
    BrowserModule
  ],
  declarations: [ 
    AppComponent,
    CartComponent,
    DetailComponent,
    IndexComponent,
    ListComponent,
    LoginComponent,
    OrderConfirmComponent,
    RegisterComponent,
    UserCenterComponent,
    HeaderComponent,
    FooterComponent,
    NotFoundComponent
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
app.router.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent }  from './app.component';
import { IndexComponent }  from './index/index.component';

const routes: Routes = [
  { path: '', component: IndexComponent },
  { path: 'index', component: IndexComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }
app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <router-outlet></router-outlet>
  `,
})
export class AppComponent  { name = 'Angular'; }




相關文章