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项目搭建的更多相关文章
- Intellij IDEA Java web 项目搭建
Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个 ...
- 项目搭建系列之一:使用Maven搭建SpringMVC项目
约定电脑都安装了eclipse,且已配置好Maven以及eclipse插件. 1.Eclipse 2.maven 3.Eclipse 需要安装maven插件.url:maven - http://do ...
- maven项目搭建
一.Maven简介 Maven是基于Java平台的项目构建(mvn clean install).依赖管理(中央仓库,Nexus)和项目信息管理的项目管理工具. Maven是基于项目对象模型(POM) ...
- maven3常用命令、java项目搭建、web项目搭建详细图解
http://blog.csdn.net/edward0830ly/article/details/8748986 ------------------------------maven3常用命令-- ...
- Java web 项目搭建
Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个 ...
- requirejs + vue 项目搭建2
上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...
- requirejs + vue 项目搭建
以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界.所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑.当然在用的时候也有一些小坑和bug, ...
- Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建(转)
这篇文章主要讲解使用eclipse对Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建过程,包括里面步骤和里面的配置文件如何配置等等都会详细说明. 如果还没有搭建好环境( ...
- freemarker + spring mvc + spring + mybatis + mysql + maven项目搭建
今天说说搭建项目,使用freemarker + spring mvc + spring + mybatis + mysql + maven搭建web项目. 先假设您已经配置好eclipse的maven ...
随机推荐
- 下载安装Redis+使用
Window 下安装 第一步:安装 下载地址:https://github.com/MSOpenTech/redis/releases 第二步:解压(盘符) 第三步:打开一个 cmd 窗口 使用 cd ...
- 上传组件uploadify在spring中返回406 / Not Acceptable 问题解决
这个问题在chrome中正常.在火狐和ie中就会报这个错误. 原因就是chrome的accept是*/* 火狐和ie的accept是text/* 但是spring的accept清单中是没有text/* ...
- OC中property方法的使用
我们直入主题,关于property方法,我们先来了解一下相关的知识,首先是成员变量,实例变量,属性变量. 我们定义一个类来看一下 @interface Person :NSObject{ NSInte ...
- CF1066A Vova and Train(模拟)
大水题... 题目要求你求能看到的灯笼数,我们可以分为3部分 总共的灯笼数——————1 在 l 左面的灯笼数(不包括lll)——————2 在 r 左面的灯笼数(包括rrr)——————3 我们知道 ...
- ORACLE GOLDEN GATE oracle同步数据至kafka
一.服务器信息 ip 软件版本 ogg版本 软件包 操作系统版本 OGG安装路径 10.1.50.52 源 oracle11.2.0.4 12.2.0.1.1 V100692-01.zip cen ...
- IIS网站的应用程序与虚拟目录的区别及应用
IIS网站 一个网站可以新建无数个应用程序和目录 应用程序 同一域名下程序的独立开发,独立部署的最佳应用策略. 应用程序的应用场景: 1. 域名的分布 比如:www.baidu.com,对于后台,我们 ...
- Docker环境搭建以及基本操作
Docker环境搭建以及基本操作 Docker环境基本搭建: 基础环境:Centos 7.4 IP:192.168.30.117 [root@docker ~]# cat /etc/re ...
- js新开窗口避免浏览器拦截解决方案
Ajax回调函数中,打开新窗口解决方案 var w = window.open(); $.post("GetHomToTestPaper", {homeworkName:homew ...
- PHP基础2--基本语法
主要: 标记符,注释 变量 常量 数据类型 运算符 流程控制 标记符,注释 4种标记符号: 1. 默认形式: <?php php语句 ?> 如果<?php ... ...
- 一图看懂mybatis执行过程
一图看懂mybatis执行过程,不再懵B了