Angular6项目搭建

参照草根专栏- ASP.NET Core + Ng6 实战：https://v.qq.com/x/page/b076702elvw.html

安装工具：

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],

  ...

})

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

巴特西

Angular6项目搭建

安装工具：

Angular Cli

项目搭建

最新文章

热门文章