Angular实战记录--工程结构分析

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WRian_Ban/article/details/84184395

Angular官方网站讲解得非常详细，这里我特别说明几个文件是需要我们关注的。

项目总览

• app.module.ts文件
  项目里需要用到的包，比如ant design，echarts的模块包都需要在这里统一导入，这样才能在其他页面、组件里进行导入。大概呢，这里算是项目进行编译打包的入口吧，这里有的模块才会生成到项目中，供其他组件调用。

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { HeroesComponent } from './heroes/heroes.component';
  import { HeroDetailComponent } from './detail/detail.componet';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { HeroSearchComponent } from './hero-search/hero-search.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      HeroesComponent,
      HeroDetailComponent,
      DashboardComponent,
      HeroSearchComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule,
      HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• app-routing.module.ts
  这里是配路由的地方,主要就是将你的页面component与路由对应起来，注意装饰器@NgModule里的内容。总之就是，没事别瞎改工具给你生成的代码，不然呢，不是不报哦。

  import { Hero } from './interface';
  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { HeroesComponent } from './heroes/heroes.component';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { HeroDetailComponent } from './detail/detail.componet';
  
  const routes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'heroes', component: HeroesComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'detail/:id', component: HeroDetailComponent },
  ];
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}
  

• app.component.html
  这里可以说是一个最外层框架，你的nav bar都是可以放在这里的。所谓单页面应用大抵就是由此得来吧。其实呢，只产出了这么一个html文件而已，其他的路由不过是控制这个页面内部显示那个组件罢了。

    <nav class="navStyle" >
      <a [routerLink]=" ['/'] "
        routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}">
        Home
      </a>
      <a [routerLink]=" ['/evaluation'] "
        routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}">
        Design
      </a>
      <a [routerLink]=" ['/evaluation'] "
        routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}">
        Execute
      </a>
      <a [routerLink]=" ['/evaluation'] "
        routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}">
        Report
      </a>
      <a [routerLink]=" ['/evaluation'] "
        routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}">
       AI Evaluation
      </a>
    </nav>

    <router-outlet></router-outlet>

这里呢要特别注意添加<router-outlet></router-outlet> ,它会告诉路由器要在哪里显示路由到的视图。Angular路由说得很清楚呢。

---

创建自己的组件

这里我主要记录在mian layout中添加的App的子组件evaluation（evaluation是组件的名称）
我们需要在app文件夹下创建evaluation的文件夹，这里面将会放与这个组件相关的所有文件，除了抽离出来的公共组件。

• evaluation.component.ts
  初始结构和代码规范如下：

import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash';
import { NzModalService, NzMessageService  } from 'ng-zorro-antd';

import { EvaluationService } from './evaluation.service';
import { EvaluationAction } from './evaluation.action';


@Component({
  selector: 'app-evaluation',
  templateUrl: './evaluation.component.html',
  styleUrls: ['./evaluation.component.scss']
})

export class EvaluationComponent implements OnInit {

  constructor(
    private _AI_E_Serve: EvaluationService,
    private _AI_E_Action: EvaluationAction,
    ···//实例化服务，后面可通过this._AI_E_Serve.serveFuc(xxx)来调用EvaluationService里的函数
    ) { }
    
  reportList: any;
  ···//这里要将后面需要使用的变量事先声明
  
  ngOnInit() {
  ···//这里需要处理当页面第一次加载成功后需要做的事情，比如向服务器
  ···//请求数据，那么在这里就需要把要显示的来自服务器的数据填充进来
  ···//已经进行数据格式化等操作
  }

 //其他页面功能函数，比如处理点击事件，提交检验，模态框弹出等
 otherFunc(): void {}
}

我的建议：
1.将与服务器请求有关联的方法放在evaluation.service.ts里。
2.将与数据处理有关联的方法放在evaluation.action.ts里。
3.将与页面行为处理有关联的方法放在evaluation.component.ts自己里。

组件分析完了，还有些细节不得不做

• 在app.component.html添加访问路径，有必要的话

        <a [routerLink]=" ['/evaluation'] "
          routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}">
         AI Evaluation
        </a>
  

• 在app-routing.module.ts里添加子路由

  const routes: Routes = [
    ···
    { path: 'evaluation',  component: EvaluationComponent },
    ···
  ];
  

• 在app.module.ts模块里引入模块，确保被打包编译

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  ···
  import { EvaluationComponent } from './+evaluation/evaluation.component';
  
  registerLocaleData(zh);
  
  @NgModule({
    declarations: [
       ···
      EvaluationComponent,
      ···
    ],
    imports: [
      BrowserModule,
       ···
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  

---

在父组件里创建子组件

在evaluation里再创建个step1子组件。在evaluation文件夹下创建step1的文件夹，这里面将会放与这个组件相关的所有文件。
文件结构如下：

• step1.component.ts初始结构和代码规范与evaluation.component.ts类似：
  不过要特别注意Component selector, 我们将使用这个选择器在evaluation.component.html显示step1.component.html。
  step1.component.ts:

  ···
  @Component({
    selector: 'app-step1',
    templateUrl: './step1.component.html',
    styleUrls: ['./step1.component.scss']
  })
  ···
  

  evaluation.component.html

   <app-step1 ></app-step1>