Angular6項目搭建

參照 草根專欄- ASP.NET Core + Ng6 實戰：https://v.qq.com/x/page/b076702elvw.html

安裝工具：

1. Nodejs, npm     最新版, https://nodejs.org/en/
2. Angular CLI,    npm install -g @angular/cli
3. Visual Studio Code,    https://code.visualstudio.com/

Angular Cli

1. https://github.com/angular/angular-cli
2. https://cli.angular.io/
3. ng new
4. ng generate
5. ng serve
6. Test, Lint, Format
7. 要看文檔!!!

項目搭建

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],
  ...
})
export class PizzaPartyAppModule { }

5、在 app.module.ts 中添加

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

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class 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: []
})
export class 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]
})
export class 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]
})
export class AppModule { }

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

<router-outlet></router-outlet>

15、ng g c blog/components/sidenav   

16、ng g c blog/components/toolbar

17、 導入圖標：blog-app.component.ts

export class BlogAppComponent 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

 

圖標下載網站：https://material.io/tools/icons/?icon=more_vert&style=baseline