1

Mavenを使用してMVCプロジェクトに取り組んでいます。

バックエンド: Spring Boot フレームワーク (Tomcat サーバー)、MySQL db、db バインディング用の hibernate、dao extends CrudeRepository、NO SERVICE (不要、小さなアプリ)、4 つのクラス (モデル)、および 4 つのコントローラー。ここまでは問題ありませんでした。しかし、フロントエンドの仕事を始めたとき、1 つ以上の問題を経験しました。

フロントエンド: 私の index.html ページには、AngularJS と (Angular) UI Bootsrap を cdn、app.js、および userController.js 経由で含めました (私のファイル、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 (SpringApplication.run(Application.class, args) を使用してメイン関数が配置されているバックエンドのクラス) で「Run As Java Application」を実行すると、サーバーが起動し、休止状態がエラーや警告なしでデータベースに接続します.

Chrome を開いて localhost:8095 と入力すると (私のマシンでは 8080 がブロックされていたので、application.properties ファイルを介して意図的にポートを通常の 8080 から 8095 に変更しましたが、これは問題ではないと思います)、アドレス バーに次のように入力します。白紙のページのみを参照してください。

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 に答える