javascript - AngularJS(路由)在Eclipse中的Maven SpringBoot项目中找不到.html模板

标签 javascript java angularjs eclipse spring-boot

我正在使用 Spring Boot 学习 AngularJS。我创建了一个 SpringBoot 项目并将其导入到 Eclipse 中,并且在不编写任何 Java 代码的情况下尝试使 AngularJS 前端模板与路由一起使用。我在项目中包含了必要的 Angular 脚本,并且我正在按照 w3schools 和 spring 网站上的教程中的方式进行所有操作。如果我仅使用 html 和 js 而不使用任何 IDE 创建一个非常简单的应用程序,那么相同的代码可以正常工作,但在 Eclipse 中会失败。

Eclipse中的项目目录:

-src/main/java
|-com.package
|---Application.java
|---ViewController.java
-src/main/resources
|---static
|-----app
|------app.module.js
|-----angular-route.min.js
|-----angular.min.js
|-----angular.min.js.map
|-----style.css
|---templates
|-----first.html
|-----index.html
|-----main.html
|-----second.html

index.html 中的导航:

<body ng-app="app">
    <header class="header">
        <a ng-href="#/!">Main</a>
        <a ng-href="#!first">First</a>
    </header>   
    <div>   
        <ng-view></ng-view>         
    </div>
</body>

app.module.js

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        template: 'main.html'
    })
    .when("/first", {
        templateUrl: "first.html"
    })
    .when('/second', {
        templateUrl: 'second.html'
    })
    .otherwise({redirectTo: '/'});
});

就像 app.config 中的第一条路线一样,如果我使用 template 而不是 templateUrl ,它在每种情况下都会正常工作。

对于每个 .html 模板,它们都包含一些虚拟代码,例如:

<p>first</p>

当我检查开发工具时,在“网络”选项卡中,我可以看到 404 作为模板请求的响应。在控制台中我可以看到如下错误消息。

Error: "[$templateRequest:tpload] http://errors.angularjs.org/1.7.8/$templateRequest/tpload?p0=%2Fsrc%2Fmain%2Fresources%2Ftemplates%2Ffirst.html&p1=404&p2="

从 AngularJS 网站我了解到这意味着路径有问题。我尝试修改路径,如 "/first.html""./first.html""/templates/first.html" 但结果是一样的。

我不明白问题是什么。任何帮助将不胜感激。

编辑:我认为添加 ViewController.java 的代码可能会有用:

@Controller
public class ViewController {

    @RequestMapping("/")
    public String index() {
        return "index";
    }

}

感谢您的任何建议。

最佳答案

一切工作正常 - 我的意思是导航 - 一旦我将所有 html 文件移动到 Eclipse 项目内的 src/main/resource/static 文件夹中。

所以项目结构应该是这样的:

-src/main/java
|-com.package
|--Application.java
|--ViewController.java
-src/main/resources
|-static
|--app
|----app.module.js
|--angular-route.min.js
|--angular.min.js
|--angular.min.js.map
|--first.html
|--index.html
|--main.html
|--second.html
|--style.css
|-templates

关于javascript - AngularJS(路由)在Eclipse中的Maven SpringBoot项目中找不到.html模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56206538/

相关文章:

javascript - 启用基于单选按钮选中的单个或多个复选框

javascript - JavaScript 文件中的 URL 是相对于 JavaScript 位置还是浏览器?

java - 在 Android 的 SQLite 数据库中保存 ArrayList

javascript - ng-idle 无法读取属性

javascript - 如何用javascript代码删除缓存?

javascript - 参数如何通过 Ionic Modal 传递?

java - 如何获取动态创建的微调器 android java 的选定值

java - 使用Java解析Json错误

javascript - 如何在 Angular .js 中显示下拉菜单(已应用选择它而不显示)

javascript - AngularJS ngClick 触发服务但没有