参照 草根专栏- 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

Angular6项目搭建的更多相关文章

  1. Intellij IDEA Java web 项目搭建

    Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个 ...

  2. 项目搭建系列之一:使用Maven搭建SpringMVC项目

    约定电脑都安装了eclipse,且已配置好Maven以及eclipse插件. 1.Eclipse 2.maven 3.Eclipse 需要安装maven插件.url:maven - http://do ...

  3. maven项目搭建

    一.Maven简介 Maven是基于Java平台的项目构建(mvn clean install).依赖管理(中央仓库,Nexus)和项目信息管理的项目管理工具. Maven是基于项目对象模型(POM) ...

  4. maven3常用命令、java项目搭建、web项目搭建详细图解

    http://blog.csdn.net/edward0830ly/article/details/8748986 ------------------------------maven3常用命令-- ...

  5. Java web 项目搭建

    Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个 ...

  6. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  7. requirejs + vue 项目搭建

    以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界.所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑.当然在用的时候也有一些小坑和bug, ...

  8. Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建(转)

    这篇文章主要讲解使用eclipse对Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建过程,包括里面步骤和里面的配置文件如何配置等等都会详细说明. 如果还没有搭建好环境( ...

  9. freemarker + spring mvc + spring + mybatis + mysql + maven项目搭建

    今天说说搭建项目,使用freemarker + spring mvc + spring + mybatis + mysql + maven搭建web项目. 先假设您已经配置好eclipse的maven ...

随机推荐

  1. 设置UI控件的Layer属性(边框可见,边框颜色,边框宽度,边框圆角)

    设置UI控件的Layer属性 #import "ViewController.h" @interface ViewController () @property (strong, ...

  2. window 下创建软链接 mklink

    软链接是一种文件共享方式. 命令:mklink /d "C:\d" "C:\e" 有哪些坑: 1.此命名必须以管理员方式在cmd运行 2.文件必须不存在..通过 ...

  3. Reading Notes : 180212 冯诺依曼计算机

    读书<计算机组成原理>,百度百科 现在大部分接触过计算机的人,都会知道冯诺依曼计算机,但是这个概念是怎么来的呢?本节我们就通过聊一下计算机的存储程序控制,来认识”冯诺依曼”. 存储程序控制 ...

  4. Objective-C 中的 assign, copy,retain,strong,weak 详解

    在IOS开发中,经常会使用   @property(nonatomic,copy)NSString * name;   语句来快速设置set get 方法,在此依次说明atomic .nonatomi ...

  5. Layered Architecture 分层架构

    分层的价值在于每一层都只代表程序中的某一特定方面.这种限制使每个方面的设计都更具有内聚性,更容易解释. 大多数成功的架构使用的都是包括下面这四个概念层的某个版本

  6. Spring知识点小结(四)

    一.JdbcTemplate(jdbc模版--抽取的工具) web阶段DBUtils:        QueryRunner runner = new QueryRunner(dataSource); ...

  7. python类的使用(类定义,构造器,类属性,方法)

    注:这里只描述使用方法,具体类的概念长篇大论就不要为难我这个懒人了. 总之一句话编程语言只是一个工具,会用就行,好用就行.打破砂锅问到底,我觉得有必要研究一下C,汇编,电子链路等. class clt ...

  8. Handshake Lemma

    - finite undirected gragh ∑deg(v) = 2|E| In a k-ary tree where every node has either 0 or k children ...

  9. chromium之ref_counted

    namespace subtle { class RefCountedBase { protected: RefCountedBase(); ~RefCountedBase(); void AddRe ...

  10. python学习笔记(3)---cookie & session

    一.cookie & session 1.cookie: cookie 就是由服务器发送给客户端的特殊信息,而这些信息以文本的方式存放在客户端,然后客户端每次向服务器发送请求都会带上这些特殊信 ...