angular6 mysql_Angular6项目搭建

布满荆棘的人生 2022-11-03 05:44 180阅读 0赞

安装工具：

Nodejs, npm     最新版, https://nodejs.org/en/

Angular CLI,    npm install -g @angular/cli

Visual Studio Code,    https://code.visualstudio.com/

Angular Cli

https://github.com/angular/angular-cli

https://cli.angular.io/

ng new

ng generate

ng serve

Test, Lint, Format

要看文档!!!

项目搭建

1、在cmd  输入  ng new blog-client  --style scss  --dry-run   项目创建预览

2、在项目目录下输入 code .   命令打开vscode

3、 安装 angularMaterial       npm install --save @angular/material @angular/cdk @angular/animations         官网 ：https://material.angular.io/guides

4、 在 app.module.ts 中添加

import \{BrowserAnimationsModule\} from '@angular/platform-browser/animations';

@NgModule(\{

...

imports: \[BrowserAnimationsModule\],

...

\})

exportclass PizzaPartyAppModule \{ \}

5、在 app.module.ts 中添加

import \{MatButtonModule, MatCheckboxModule\} from '@angular/material';

@NgModule(\{

...

imports: \[MatButtonModule, MatCheckboxModule\],

...

\})

exportclass PizzaPartyAppModule \{ \}

6、在scss中添加

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

7、npm install --save hammerjs      在main.ts 导入

import 'hammerjs';

8、 ng g module blog --routing --spec false

9、全局设置 spec为false，在angular.json中设置

"@schematics/angular:module": \{"spec": false\}

10、 ng g module shared/material    将angularMateria组件都导入

11、将  MaterialModule 导入  blog.module.ts

import \{ NgModule \} from '@angular/core';

import \{ CommonModule \}from '@angular/common';

import \{MaterialModule\}from '../shared/material/material.module'import \{ BlogRoutingModule \}from './blog-routing.module';

@NgModule(\{

imports: \[

CommonModule,

BlogRoutingModule,

MaterialModule

\],

declarations: \[\]

\})

exportclass BlogModule \{ \}

12、 ng g component blog/blog-app --flat --inline-style  --inline-template --module blog   创建主组件

13、配置路由：blog-routing.module.ts

const routes: Routes =\[

\{path:'', component: BlogAppComponent\}

\];

@NgModule(\{

imports: \[RouterModule.forChild(routes)\],

exports: \[RouterModule\]

\})

exportclass BlogRoutingModule \{ \}

13、配置主路由：app.module.ts

const routers: Routes =\[

\{path:'blog', loadChildren: './blog/blog.module\#BlogModule'\},

\{path: '\*\*' , redirectTo: 'blog'\}

\];

@NgModule(\{

declarations: \[

AppComponent

\],

imports: \[

BrowserModule, BrowserAnimationsModule, MatButtonModule, MatCheckboxModule,

RouterModule.forRoot(routers)

\],

providers: \[\],

bootstrap: \[AppComponent\]

\})

exportclass AppModule \{ \}

14、配置路由插座：app.component.html

15、ng g c blog/components/sidenav

16、ng g c blog/components/toolbar

17、 导入图标：blog-app.component.ts

export classBlogAppComponent implements OnInit \{

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) \{

iconRegistry.addSvgIcon('baseline-more\_vert', sanitizer.bypassSecurityTrustResourceUrl('/assets/baseline-more\_vert-24px.svg'));

iconRegistry.addSvgIcon('baseline-menu', sanitizer.bypassSecurityTrustResourceUrl('/assets/baseline-menu-24px.svg'));

ngOnInit() \{

18、在app.module.ts 中添加   HttpClientModule

angular6 mysql_Angular6项目搭建

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 angular项目搭建注意事项

相关 6_2Bootstrap项目搭建

相关 6_2Bootstrap项目搭建

相关搭建Angular 2 TypeScript 项目

相关 Angular入门项目 6篇

相关 angular6 mysql_Angular6项目搭建

相关【Angular】如何快速搭建Angular2/4/6/7环境

相关 angular6学习(二)：angular项目目录文件说明

相关 Angular6学习笔记1：搭建开发环境

相关 Angular6学习笔记1：搭建开发环境