angular 新建页面流程

目录概览

.src    // 项目源码目录
    ├── app     // 应用的组件、模块
    │   ├── app.component.spec.ts
    │   ├── app.component.ts    // 根组件
    │   ├── app.module.ts       // 根模块
    │   ├── app-routing.module.ts   // 根路由
    │   ├── chrome      // 菜单路由模块，左边菜单，头部导航栏
    │   ├── common      // 公共目录，存放公共模块组件、全局services
    │   ├── core.module.ts      // 全局核心模块
    │   ├── custom.module.ts    // 自定义模块
    │   ├── logs                // 日志模块
    │   ├── monitor             // 监控模块
    │   ├── overview
    │   ├── resource    // 主要页面模块
    │   ├── shared.module.ts
    │   └── typings     // 全局typescript类型声明
    ├── assets          // 资源目录，存储静态资源的,比如图片
    │   ├── baseui
    │   └── images
    ├── _dark.scss
    ├── environments    // 环境配置，比如开发、测试、生产环境做不同配置
    │   ├── environment.prod.ts
    │   ├── environment.ts
    │   └── version.ts
    ├── favicon.ico     // 网站标志图标
    ├── index.html      // 整个应用的根html，程序启动就是访问这个页面
    ├── index.scss
    ├── _light.scss
    ├── main.ts         // 项目入口，通过这个文件来启动项目
    ├── _mixins.scss
    ├── polyfills.ts    // 主要是用来导入一些必要库, 兼容老版本
    ├── styles.scss     // 全局的样式文件
    ├── test.ts         // 自动化测试使用
    ├── _theming.scss
    ├── tree.txt
    └── _variables.scss

新建的页面主要流程，主要是在src/app/resource目录中创建对应模块，然后模块中创建对应的组件，如果组件中需创建公共组件，则在src/app/common中创建。

下面以新建网络配置信息概览subnet列表页为例，介绍新建页面的流程。

模块

创建模块 network

切换到模块目录下，src/app/resource，执行

ng g module network

ng g module network/subnet --routing

组件

组件subnet

创建组件subnet

创建模块里的组件subnet

ng g component network/subnet/list

声明组件subnet

src/app/resource/network/subnet/subnet.module.ts

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

import { SubnetRoutingModule } from './subnet-routing.module';
import { SubnetComponent } from './list/list.component';
import { SharedModule } from '../../../shared.module';
import { ComponentsModule } from '../../../common/components/components.module';
import { NavModule } from '../../../chrome/nav/nav.module';


@NgModule({
  declarations: [SubnetComponent],
  imports: [
    CommonModule,
    SharedModule,
    ComponentsModule,
    SubnetRoutingModule,
    NavModule,
  ]
})
export class SubnetModule { }

添加到路由

src/app/chrome/chrome-routing.module.ts

// Network group
{
	path: 'network',
	loadChildren: '../resource/network/network.module#NetworkModule',
},
{
	path: 'subnet',
	loadChildren: '../resource/network/subnet/subnet.module#SubnetModule',
},

src/app/chrome/nav/nav.component.html

<kd-nav-item class="kd-nav-group-item" state="/network" i18n>Network Config
</kd-nav-item>
<kd-nav-item class="kd-nav-item" state="/subnet" i18n>Subnet
</kd-nav-item>

创建公共列表组件

组件subnet 需创建其对应的列表组件

切换到公共列表组件目录下，src/app/common/components/resourcelists，执行

ng g component subnet

公共列表组件组件

声明公共列表组件组件

在/src/app/common/components/components.module.ts里

import { SubnetListComponent } from './resourcelists/subnet/subnet.component';

@NgModule({
  imports: [SharedModule],
  declarations: [...components, ScaleEditDefaultActionbar, ActionbarDetailScaleComponent, NavComponent, ExecComponent, EndpontsComponent, SubnetListComponent],
  exports: [...components],
  entryComponents: [ChipDialog, RowDetailComponent, MenuComponent]
})

至此，network模块下的subnet组件已新建完成

├── network
│   ├── network.module.ts
│   ├── network-routing.module.ts
│   └── subnet
│       ├── list
│       │   ├── list.component.html
│       │   ├── list.component.scss
│       │   └── list.component.ts
│       ├── subnet.module.ts
│       └── subnet-routing.module.ts

列表页使用公共列表组件

在subnet组件中使用公共列表组件

src/app/resource/network/subnet/list/list.component.html

<sym-subnet-list #subnetList></sym-subnet-list>