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 { }
复制代码

转载于:https://juejin.im/post/5b04281651882542a966fc01

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！