0

私は分度器が初めてです。アプリ用に Gulp と分度器を構成しました。私のアプリの構造は次のようになります:-

my_app
  |
  ---WebContent
         |
         ----css folder
         ----3rd party folder
         ----e2e tests folder
         ----css folder
         ----js folder
         ----css folder
         ----WEB-INF folder
         ----META-INF folder
         ----**index.html**

私のgulpタスクは次のようになります

gulp.task('connect', function() {
   connect.server({
       root: '../',
       port: 8000
   });
});

私のindex.html見た目はこんな感じ

<!DOCTYPE html>
<html ng-app="app"ng-controller="appController">
<link rel="stylesheet" type="text/css" href="/my_app/3rd-party-js/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/theme/css/uigrid/ui-bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/3rd-party-js/angularjs/ui-grid.min.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/theme/css/uigrid/loading-bar.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/3rd-party-js/angularjs/slider/slider.css"/>

<link rel="stylesheet" type="text/css" href="/my_app/css/app.css"/>


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

<body>
<header>
	<div class ="header-panel"><span class="glyphicon glyphicon-info-sign"></span> Environment:{{constants.environment}} </div>
    <div id="logo"><a href="/my_app/"> <img src="/my_app/images/logo.gif" alt="Logo"/></a></div>
    <div class="menu">
        // some stuff here
    </div>

</header>
<div class="full-fit" ng-view></div>

<script src="/my_app/3rd-party-js/jquery/jquery-1.9.1.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-idle.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/lodash.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-animate.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-animate.min.js.map"></script>
<script src="/my_app/3rd-party-js/angularjs/ui-bootstrap.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular.min.js.map"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-route.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-resource.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/loading-bar.js"></script>
<script src="/my_app/3rd-party-js/angularjs/ui-grid.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/momentjs.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/slider/slider.js"></script>
<script src="/my_app/3rd-party-js/angularjs/multiselect/multiselect.js"></script>
<script src="/my_app/3rd-party-js/angularjs/multiselect/multiselectsingle.js"></script>
<script src="/my_app/3rd-party-js/bootstrap/bootstrap.min.js"></script>
<script src="/my_app/dist/app.min.js"></script>

</body>
</html>

問題: gulp Web サーバーを実行すると、ディレクトリの一覧が表示されます。ここでわかりましたが、index.html ( http://localhost:8000/my_app/WebContent/index.html )にアクセスしたい場合、それは AngularJs アプリとして認識されず、css やその他の埋め込み html のない粗い html ページをロードすることを拒否します. 私の index.html はルートの相対 URL を参照し、Tomcat またはその他のサーバーで正常に動作しますが、gulp を使用してこれを動作させることはできません。最終的な目標は、いくつかの分度器 e2e テストを作成することですが、接続は確立されています。ポインタはありますか？

4

0 に答える 0