javascript - 运行 Spring Boot 应用程序时出现 AngularJs 错误

Question

我正在尝试来自 spring.io 的本教程（https://spring.io/guides/tutorials/spring-security-and-angular-js/），我收到了这个错误。

错误：[$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=hello%20&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.9%2F%24injector%2Fnomod%3Fp0%3Dhello%2520%0AM% 2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A85925%0Ahe%2F%3C%2F%3C%2F%3C%40http%3A%2F%2Flocalhost%3A8080% 2Fjs%2Fangular-bootstrap.js%3A4%3A1716%0Ab%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A4%3A1258%0Ahe%2F%3C%2F%3C%40http%3A% 2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A4%3A1501%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A5%3A4212%0An%40http% 3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A86371%0Ag%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A5%3A4060%0Adb%40http%3A% 2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap。js%3A5%3A5856%0Azc%2Fc%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A3%3A1485%0Azc%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap。 js%3A3%3A1798%0Ace%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A3%3A1105%0A%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js% 3A14%3A20478%0An.Callbacks%2Fi%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A27146%0An.Callbacks%2Fj.fireWith%40http%3A%2F%2Flocalhost%3A8080% 2Fjs%2Fangular-bootstrap.js%3A2%3A27914%0A.ready%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A29705%0AJ%40http%3A%2F%2Flocalhost%3A8080% 2Fjs%2Fangular-bootstrap.js%3A2%3A29890%0Ajs%3A3%3A1105%0A%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A14%3A20478%0An.Callbacks%2Fi%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular- bootstrap.js%3A2%3A27146%0An.Callbacks%2Fj.fireWith%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A27914%0A.ready%40http%3A%2F%2Flocalhost% 3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A29705%0AJ%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A29890%0Ajs%3A3%3A1105%0A%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A14%3A20478%0An.Callbacks%2Fi%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular- bootstrap.js%3A2%3A27146%0An.Callbacks%2Fj.fireWith%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A27914%0A.ready%40http%3A%2F%2Flocalhost% 3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A29705%0AJ%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular-bootstrap.js%3A2%3A29890%0A

我创建了一个 Spring Boot 应用程序。这是应用程序的结构

这是我的代码：

Pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" ...>
<modelVersion>4.0.0</modelVersion>

<groupId>com.skillupsoft</groupId>
<artifactId>estudent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

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

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
</properties>

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

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

        <plugin>
            <groupId>ro.isdc.wro4j</groupId>
            <artifactId>wro4j-maven-plugin</artifactId>
            <version>1.8.0</version>
            <executions>
                <execution>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>run</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
                <cssDestinationFolder>${project.build.directory}/classes/static/css</cssDestinationFolder>
                <jsDestinationFolder>${project.build.directory}/classes/static/js</jsDestinationFolder>
                <wroFile>${basedir}/src/main/wro/wro.xml</wroFile>
                <extraConfigFile>${basedir}/src/main/wro/wro.properties</extraConfigFile>
                <contextFolder>${basedir}/src/main/wro</contextFolder>
            </configuration>
            <dependencies>
                <dependency>
                    <groupId>org.webjars</groupId>
                    <artifactId>jquery</artifactId>
                    <version>2.2.4</version>
                </dependency>
                <dependency>
                    <groupId>org.webjars</groupId>
                    <artifactId>angularjs</artifactId>
                    <version>1.4.9</version>
                </dependency>
                <dependency>
                    <groupId>org.webjars</groupId>
                    <artifactId>bootstrap</artifactId>
                    <version>3.3.7-1</version>
                </dependency>
            </dependencies>
        </plugin>
    </plugins>
</build>

我正在使用 Wro4j 库，这是一个基于 java 的工具链，用于预处理和打包前端资产。它生成要嵌入到 JAR 文件中的 angularjs 库文件和引导文件。

index.hml (src/main/resources/static/index.html)

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Hello eStudent</title>
    <link href="css/angular-bootstrap.css" rel="stylesheet">
    <style type="text/css">
        [ng\:cloak], [ng-cloak], .ng-cloak {
            display: none !important;
        }
    </style>
   </head>

<body ng-app="hello ">
<div class="container">
    <h1>Greeting</h1>
    <div ng-controller="home" ng-cloak class="ng-cloak">
        <p>The ID is {{greeting.id}}</p>
        <p>The content is {{greeting.content}}</p>
    </div>
</div>

<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/hello.js"></script>

</body>
</html>

hello.js 应用程序文件 (src/main/resources/static/js/hello.js)

angular.module('hello',[])
    .controller('home', function($scope) {
        $scope.greeting = {id: 'xxx', content: 'Hello World!'}
    })

为了使 wro4j 正常工作，还需要设置一些属性文件。这些文件是：

• main.less
• 错误属性
• wro.xml

以下是这些“wro4j”配置文件的内容。

main.less 为空

错误属性

#List of preProcessors
preProcessors=lessCssImport
#List of postProcessors
postProcessors=less4j,jsMin

wro.xml

<groups xmlns="http://www.isdc.ro/wro">
  <group name="angular-bootstrap">
    <css>webjar:bootstrap/3.3.7-1/less/bootstrap.less</css>   
    <css>file:@project.basedir@/src/main/wro/main.less</css>
    <js>webjar:jquery/2.2.4/jquery.min.js</js>
    <js>webjar:angularjs/1.4.9/angular.min.js</js>
    <js>webjar:angularjs/1.4.9/angular-route.min.js</js>
    <js>webjar:angularjs/1.4.9/angular-cookies.min.js</js>
   </group>
</groups>

spring-boot应用的主应用文件如下

 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class EStudentApplication {

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

当我运行应用程序时，浏览器除了静态内容“问候”之外什么都没有显示。不显示动态内容。并且浏览器控制台以粗体显示上面显示的错误。

有人可以帮我解决这个问题吗？