安裝工具：

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项目搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。