Angular 项目结构

一个Angular项目正常由很多个页面构成，一个页面又由很多个组件构成，如何去组织项目代码的结构
app文件夹下每个文件夹组织一个页面模块，一个页面模块中包含有几个页面，如主页，编辑页，详情页，

App模块

module

/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AdminModule } from './admin/admin.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ AdminModule, BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 引入Admin模块和路由配置并在import中生明

路由

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

export const routes: Routes = [
  { path: '',   redirectTo: '/home', pathMatch: 'full' }
];

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

Admin模块

module

app/home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AdminComponent } from './admin.component';
import { CenterComponent } from './center';
import { EditComponent } from './edit';

import { AdminRoutingModule } from './admin-routing.module';
import { SharedModule } from '../shared/shared.module';
import { QuestionnaireModule } from '../shared/questionnaire/questionnaire.module';
import { CenterSharedModule } from './center/shared/center-shared.module';
import { EditSharedModule } from './edit/shared/edit-shared.module';

import { TabsModule } from 'ngx-bootstrap';

@NgModule({
  imports: [CommonModule, AdminRoutingModule, SharedModule, TabsModule.forRoot(), QuestionnaireModule, CenterSharedModule, EditSharedModule],
  declarations: [
    AdminComponent,
    CenterComponent,
    EditComponent
  ]
})
export class AdminModule { }

• module用与组织home模块中所需的页面
• 引入页面组件和公共组件的Module

路由

/app/admin/admin-routing.module.ts

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

import { AdminComponent } from './admin.component';
import { CenterComponent } from './center/center.component';
import { EditComponent } from './edit/edit.component';

import { AuthGuard } from '../core/services/auth-guard.service';

const routes: Routes = [
    {
        path: 'admin',
        component: AdminComponent,
        canActivate: [AuthGuard],
        children: [
          {
            path: '',
            children: [
              { path: 'center', component: CenterComponent },
              { path: 'edit/:id', component: EditComponent }
            ]
          }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AdminRoutingModule { }

/core/services/auth-guard.service

import { Injectable }       from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';

import { UserService } from './user.service';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private userService:UserService, private route:Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if(this.userService.isLogin) {
            return true;
        }
        this.route.navigate(['/login'],{queryParams:{returnUrl:state.url}});
        return false;
    }
}

center页面

/app/admin/center/index.js

export * from "./center.component";
export * from './shared/questionnaire-controls/index';
export * from './shared/questionnaire-detail/index';
export * from './shared/questionnaire-item/index';

/app/admin/center/shared/

export * from './questionnaire-item/index';
export * from './questionnaire-detail/index';
export * from './questionnaire-controls/index';

/app/admin/center/shared/center-shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { QuestionnaireItemComponent } from './questionnaire-item/index';
import { QuestionnaireDetailComponent } from './questionnaire-detail/index';
import { QuestionnaireControlsComponent } from './questionnaire-controls/index';

@NgModule({
  imports: [CommonModule],
  declarations: [QuestionnaireItemComponent, QuestionnaireDetailComponent, QuestionnaireControlsComponent],
  exports: [QuestionnaireItemComponent, QuestionnaireDetailComponent, QuestionnaireControlsComponent, CommonModule]
})
export class CenterSharedModule { }