一、安装软件

　　1、安装nodejs 和 angularjs/cli

　　https://nodejs.org/en/

　　安装 nodejs

　　安装 angularjs/cli： npm install -g @angular/cli

　　执行 npm install

　　执行 ng build，编译前台代码输出到 spring boot 资源目录

　　2、安装augury

　　在google网上应用商店添加插件augury ，用来调试前端代码

　　3、新建普通的 angular 项目 - ng new hello

　　通过命令 ng new hello 生成一个新项目以及应用的骨架代码

　　通过命令 ng server 启动项目，默认端口4200。

　　二、Spring boot 和 angular 集成

　　Spring boot 需要修改的地方在angular-cli.json中：

　　1、在springboot项目中新建/复制 angular 项目

　　方法一： 在src 目录下通过命令添加angular项目 ： ng new angular

　　方法二： 将之前创建好的项目copy进来

　　设置angular项目的输出目录为springboot的资源目录

　　修改angular-cli.json 配置文件的name 和 outDir

　　该项目下name为 iot_hub

　　outDir 为../resources/static(静态资源路径，系统可以直接访问且路径下的所有文件均可被直接读取)

　　编译angular项目，产生输出到springboot资源目录

　　npm install

　　ng server --proxy-conf proxy.conf

　　ng build

　　2、启动工程

　　1、启动Spring boot

　　2、启动前端angular工程调试：npm start

　　3、访问服务

　　http://localhost:8080

　　http://localhost:4200

　　三、附录 - 常见问题

　　1、解决跨域问题

　　加一个这样的文件

　　同时修改package.json中的start

　　2、热部署调试工程

　　buildscript {

　　ext {

　　springBootVersion = '1.5.9.RELEASE'

　　}

　　repositories {

　　maven {

　　url "http://repo.iop.inspur.com:8081/nexus/content/groups/public"

　　}

　　}

　　dependencies {

　　classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")

　　}

　　}

　　apply plugin: 'java'

　　apply plugin: 'idea'

　　apply plugin: 'eclipse'

　　apply plugin: 'org.springframework.boot'

　　group = 'com.inspur.iot'

　　version = '0.0.1-SNAPSHOT'

　　sourceCompatibility = 1.8

　　repositories {

　　maven {

　　url "http://repo.iop.inspur.com:8081/nexus/content/groups/public"

　　}

　　}

　　bootRun {

　　addResources = true

　　}

　　configurations.all {

　　exclude module: 'google-collections'

　　}

　　dependencies {

　　compile('org.springframework.boot:spring-boot-starter')

　　compile('org.springframework.boot:spring-boot-starter-web')

　　compile('io.springfox:springfox-swagger2:2.6.1')

　　compile('io.springfox:springfox-swagger-ui:2.6.1')

　　compile('org.springframework.boot:spring-boot-starter-jdbc')

　　compile('org.springframework.boot:spring-boot-starter-data-jpa')

　　compile('mysql:mysql-connector-java:5.1.21')

　　compile('org.springframework.boot:spring-boot-starter-data-redis')

　　// compile("org.springframework:spring-orm")

　　compile("org.springframework.boot:spring-boot-devtools")

　　compile ("org.springframework.boot:spring-boot-maven-plugin:1.5.9.RELEASE")

　　testCompile('org.springframework.boot:spring-boot-starter-test')

　　}

　　作者：梁圣奇

　　职务：云服务集团云计算产品中心高级架构师

　　专业领域：微服务架构

　　专家简介：近二十年软件开发与架构设计经验，深入了解多种软件设计模式，在微服务架构治理、物联网服务平台设计研发等领域拥有丰富实战经验，同时专注技术分享，帮助开发者成长。