iot前臺開發環境：搭建 SpringBoot+angularJs2

參考網站

Angular 中文官網：https://angular.cn/

參考代碼：https://ng.ant.design/#/components/dropdown 

npm install -g @angular/cli  ->  npm install -> ng build -> 普通angular工程：ng server  

npm install -g @angular/cli  ->  npm install -> ng build -> 增長跨域配置工程啓動： npm start 

1、安裝軟件

一、安裝nodejs 和 angularjs/cli

          https://nodejs.org/en/

        安裝 nodejs

          

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

        執行 npm install

 

         執行 ng build，編譯前臺代碼輸出到 spring boot 資源目錄

二、安裝augury

在google網上應用商店添加插件augury ，用來調試前端代碼

三、新建普通的 angular 項目 - ng new hello

經過命令 ng new hello 生成一個新項目以及應用的骨架代碼

經過命令 ng server 啓動項目，默認端口4200。 

2、Spring boot 和 angular 集成

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

 

一、在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

 

二、啓動工程

一、啓動Spring boot 

二、啓動前端angular工程調試：npm  start 

三、訪問服務

http://localhost:8080

http://localhost:4200

 

 

3、附錄 - 常見問題

一、解決跨域問題

加一個這樣的文件

 

同時修改package.json中的start

二、熱部署調試工程

、

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')}