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