java - SpringBoot 和 AngularJs - 在 Intellij 中更新修改的静态文件 (js/html/css)

问题描述

我正在使用 Intellij 开发 SpringBoot 和 AngularJs 应用程序。每当我修改静态文件 (html/js/css) 时，我必须重新启动应用程序才能应用更改。如何在不重新启动应用程序的情况下做到这一点。这真的占用了我的开发时间。

注意：我Recompile <my-file> (Ctrl+Shift+F9)在Build菜单下尝试过，但它不起作用。

这是一个示例应用程序

结构体

文件

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.8.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<groupId>org.example</groupId>
<artifactId>SampleAngularJs</artifactId>
<version>1.0-SNAPSHOT</version>


<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator-core</artifactId>
    </dependency>

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>angularjs</artifactId>
        <version>1.7.9</version>
    </dependency>

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>angular-router</artifactId>
        <version>0.5.3</version>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

主类（Application.java）

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

   @Controller
   public static class Contr {
    @GetMapping("/welcome")
    public String welcome() {
        return "welcome";
    }

    @GetMapping("/templates/dashboard.html")
    public String dashboard() {
        return "dashboard";
    }
  }
}

索引.html

<!DOCTYPE html >
<html lang="en">
  <head>
  <meta charset="UTF-8">
<title>Title</title>
 </head>
<body ng-app="my-app">
    <div ng-controller="LoginController">
        <label>Username</label>
        <input type="text" name="username"/>

        <label>Password</label>
        <input type="text" name="password"/>
        <button ng-click="login()">Login</button>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>

<!--Angular Core-->
<script src="/webjars/angularjs/angular.min.js" type="text/javascript"></script>
<!--Angular router-->
<script src="/webjars/angularjs/angular-route.min.js" type="text/javascript"></script>

<script type="text/javascript">
angular.module('my-app', ['ngRoute'])
    .controller('LoginController', function ($scope, $window) {
        $scope.login = function () {
            $window.location.href = '/welcome';
        }
    });
</script>
</body>
</html>

欢迎.html

<!DOCTYPE html>
<html lang="en" ng-app="my-app">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<div>
    <p>Main page with ng-view</p>
</div>

<div ng-view="" autoscroll="true"></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>

<!--Angular Core-->
<script src="/webjars/angularjs/angular.min.js" type="text/javascript"></script>
<!--Angular router-->
<script src="/webjars/angularjs/angular-route.min.js" type="text/javascript"></script>

<script type="text/javascript">
var app = angular.module('my-app', ['ngRoute']);

app.config(function ($httpProvider, $routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider
        .when('/', {
            templateUrl: 'templates/dashboard.html',
            controller: ''
        })
        .otherwise(
            {redirectTo: '/'}
        );
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
});
</script>
</body>
</html>

仪表板.html

<div>
    <h1>Dashboard View</h1>
</div>

唯一可更新 ( Build > Recompile 'index.html') 的文件是index.html。如果我尝试重新编译（更新）welcome.html或dashboard.html，它会失败。

标签： javaangularjsintellij-idea

java - SpringBoot 和 AngularJs - 在 Intellij 中更新修改的静态文件 (js/html/css)

问题描述

解决方案

推荐阅读