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