1

我正在使用 Maven 开发 MVC 项目。

后端：Spring Boot 框架（Tomcat 服务器）、MySQL db、用于 db 绑定的 hibernate、dao 扩展 CrudeRepository、NO SERVICE（不需要，小应用程序）、4 个类（模型）和 4 个控制器。到目前为止，这里没有问题。但是，当我开始从事前端工作时，我遇到了一个或多个问题。

前端：在我的 index.html 页面中，我通过 cdn、app.js 和 userController.js 包含了 AngularJS 和（Angular）UI Bootsrap（我认为我的文件 userControll 对我的问题并不重要，但我必须指出它存在于index.html)、data-ng-app="collectionsApp"（collectionApp 是通过 app.js 创建的应用程序）和 data-ng-view（此文件应在文件夹视图中加载另一个名为 login.html 的 html 文件）。

在文件 app.js (/webapp/scripts/app.js) 中，我创建了 collectionsApp 应用程序和函数 ($routeProvider)。

当我在 Application.java 上执行“作为 Java 应用程序运行”时（在 SpringApplication.run(Application.class, args) 程序运行的情况下主函数所在的后端类中，服务器启动并且休眠连接到数据库而没有错误或警告.

当我打开 Chrome 并在地址栏中输入 localhost:8095 （我通过 application.properties 文件故意将端口从通常的 8080 更改为 8095，因为在我的机器上 8080 被阻止，我想这不是问题）我可以只看到空白页。

这是问题，因为 data-ng-view 应该加载 login.html 而我没有！

我的 index.html 文件：

<!DOCTYPE html>
<html data-ng-app="collectionsApp">
    <head>
        <meta charset="UTF-8">
        <title>Collections</title>
        <link
        href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
        rel="stylesheet">
    </head>
        <body>
        <div data-ng-view></div>
    </body>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
        <script src="/scripts/app.js"></script>
        <script src="/scripts/controller/indexController.js"></script>
</html>

我的 login.html 文件：

<div class="container">
   <form class="form-signin" role="form">
      <h1 class="form-signin-heading">Please sign in</h1>
      <input type="email" class="form-control" placeholder="Email address"
         required autofocus> <input type="password"
         class="form-control" placeholder="Password" required>
      <div class="checkbox">
         <label> <input type="checkbox" value="remember-me">
         Remember me
         </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign
      in</button>
   </form>
</div>

我的 app.js 文件：

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

collectionsApp.config(function($routeProvider) {
    $routeProvider.when('/login', {
        templateUrl : '/view/login.html',
        controller : 'loginController'
    }).

    otherwise({
        redirectTo : '/login'
    });
});

我的文件夹结构。

4

1 回答 1

1

您必须包括//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js 才能注入$routeProvider和使用路由。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"></script>
于 2014-07-25T21:31:01.143 回答