阅读 206

angular5创建项目

公司要求用ng5做开发,由于时间实在是紧凑,现在补起来整个项目开发得流程

1.创建项目

看了文档觉得so easy,直接撸起袖子就是干。

ng new PROJECT-NAME
复制代码

然后实现了hello world,当然是完美的完成了。开始项目首页的开发,项目是个系统,用的最一般的左边菜单,右边内容需要配置路由,并且要求是less开发,我创建的都是css,谷歌了很多都说可以改配置什么的,最后我选择简单粗暴的方式直接把项目删了重新创建

ng new PROJECT-NAME --routing --style=less
复制代码

加上参数以后,就完全ok了

2、模块化开发

项目创建完毕,就开始项目开发。根据api,用ng g conponent component-name去创建组件并开发,发现所有的组件都注入在appmodule里面,感觉不美观,并且也没有达到模块化开发的效果。后来找到模块化管理的方法,在每个模块建立一个module,举个例子,项目里面有一个订单的模块,用ng g module order命令创建一个名为order.module.ts的文件,在app.module.ts注入home.component.ts和home.module.ts,再在home.module-routing.ts文件里面引入order.module.ts,再把order下面的子模块和组件注入order.module.ts里面,就完成了模块化管理的开发。下面我们看一下每一个文件的ts内容

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeService } from './service/home.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HomeComponent } from './home.component';
import { HomeModule } from './home.module.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HomeModule,
    HttpClientModule,
    CommonAllModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
复制代码

home.module-routing.ts


const homeRoutes: Routes = [
  {
    path: 'home', component: HomeComponent, children: [
      {
        path: 'order',
        loadChildren: './component/order.module#OrderModule',
      }
    ]
  }
]
复制代码

order.module.ts

import { CommonAllModule } from './../../common/common-all.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SchoolsRoutingModule } from './schools-routing.module';
import { orderStatusComponent } from './schools.component';
import { orderTableComponent } from './order-table.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    SchoolsRoutingModule,
    CommonAllModule
  ],
  declarations: [orderStatusComponent,orderTableComponent]
})
export class SchoolsModule { }
复制代码
文章分类
前端
文章标签