Fatal编程技术网
  • javascript/
  • Javascript 如何将angularjs添加到spring petclinic中，以便在web服务器上使用？

Javascript 如何将angularjs添加到spring petclinic中，以便在web服务器上使用？

javascript java angularjs spring spring-mvc

Javascript 如何将angularjs添加到spring petclinic中，以便在web服务器上使用？,javascript,java,angularjs,spring,spring-mvc,Javascript,Java,Angularjs,Spring,Spring Mvc,我正在分解以找出它是如何工作的。为此，我删除了的全部内容，并将其替换为： src/main/webapp/resources/css/bootstrap.cs src/main/webapp/resources/css/my.css src/main/webapp/js/lib/angular.js src/main/webapp/includes/index_testincl.html src/main/webapp/testController.js src/main/webapp/inde

我正在分解以找出它是如何工作的。为此，我删除了的全部内容，并将其替换为：

src/main/webapp/resources/css/bootstrap.cs
src/main/webapp/resources/css/my.css
src/main/webapp/js/lib/angular.js
src/main/webapp/includes/index_testincl.html
src/main/webapp/testController.js
src/main/webapp/index.html
除了上面列出的6个文件之外，没有其他文件。

spring配置文件保持不变，位于

当从
localhost:8080/appname
调用时，剥离和最小替换的版本在本地devbox上的eclipse中工作得非常好，但是当我将其捆绑到war文件并上传到远程服务器时，它无法提供javascript、css或html包含文件，这些文件是其功能的关键部分当有人在其浏览器中键入mydomain.com时，为了使angularjs功能在远程web服务器中正常工作，我需要在设置中更改什么？

在我的devbox上，主url在
localhost:8080/myapp
url上提供以下内容，没有错误：

然后，当我单击“包含文件”链接时，它会更改内容，如下所示：

但是，当我在eclipse中使用
runas…Maven Build.创建war文件时。。war:war
并在远程服务器中实施war，对mydomain.com的请求会导致以下结果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title of page</title>
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="resources/css/my.css">
</head>
<body ng-app="testApp">
    <script src="js/lib/angular.js"></script>
    <script type="text/javascript" src="testController.js"></script>

<div ng-controller="testController">  
<table width=100%>
    <tr>
        <td align=center>
            <table>
                <tr>
                    <th class="toc"> 
                        <a class="btn btn-success" role="button" ng-click="homeFunc()">Home</a>
                    </th>
                    <th class="toc">
                        <a class="btn btn-success" role="button" ng-click="testFunc()">Include file</a>
                    </th>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="center">
              <div ng-if="functype == 'home'">
                Home page.
              </div>
              <div ng-if="functype == 'test'">
                <div ng-include="'includes/index_testincl.html'"></div>
              </div>
        </td>
    </tr>
</table>
</div>
</body>
</html>   

// create angular app
var testApp = angular.module('testApp', []);

// create angular controller
testApp.controller('testController', ['$scope', '$http', function($scope, $http) {
    $scope.functype = 'home';

    //below functions handle navigation links
    $scope.homeFunc = function() {
        $scope.functype = 'home';
    }
    $scope.testFunc = function() {
        $scope.functype = 'test';
    }

}]);

远程web服务器提供的内容中没有css或javascript，因此没有链接。只有纯文本。当我在firefox中打开开发者工具的网络选项卡时，将显示以下输出：

上述任何请求都没有控制台选项卡输出

目标是更好地理解如何建立AngularJS和Spring MVC之间的连接。从这些简单文件构建的更复杂版本需要使用Java和Spring MVC进行数据库事务。因此，任何答案都需要与Java和SpringMVC兼容

在远程web服务器上为mydomain.com提供服务的tomcat服务器也成功地提供了其他仅使用jsp的war文件，因此问题与添加angularjs和html有关

注意：angularjs spring petclinic应用程序的精确克隆在捆绑到war中并部署在mydomain.com上时也不会运行，但此OP使用了一个大大简化的angularjs应用程序，以便更有效地隔离使tomcat、spring mvc和angularjs在web服务器上协同工作所需的特定机制

重新创建此问题的步骤：

按照以下步骤重新创建问题可能需要5分钟：

1.）导航到
/home/username/git

2.）git克隆

3.）Eclipse->File->Import->Maven->现有Maven项目

4.）Eclipse->Project Explorer->Rt单击Project->Maven->下载源代码

5.）Eclipse->Project Explorer->Rt单击Project->Maven->Update Project

6.）删除
src/main/webapp
中的所有内容，保留除外：
src/main/webapp/js/lib/angular.js

7.）从此url下载
bootstrap.css
version 3.3.5:（它位于zip文件中。）（或者，您可以通过谷歌bootstrap.css 3.3.5下载。）下载后，将其复制到项目中的以下位置：
src/main/webapp/resources/css/bootstrap.cs
（您需要创建
src/main/webapp/resources/
和
src/main/webapp/resources/css
目录。）

8.）创建
src/main/webapp/resources/css/my.css
以包含所需的任何最小样式

9.）创建
src/main/webapp/index.html
并添加以下内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title of page</title>
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="resources/css/my.css">
</head>
<body ng-app="testApp">
    <script src="js/lib/angular.js"></script>
    <script type="text/javascript" src="testController.js"></script>

<div ng-controller="testController">  
<table width=100%>
    <tr>
        <td align=center>
            <table>
                <tr>
                    <th class="toc"> 
                        <a class="btn btn-success" role="button" ng-click="homeFunc()">Home</a>
                    </th>
                    <th class="toc">
                        <a class="btn btn-success" role="button" ng-click="testFunc()">Include file</a>
                    </th>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="center">
              <div ng-if="functype == 'home'">
                Home page.
              </div>
              <div ng-if="functype == 'test'">
                <div ng-include="'includes/index_testincl.html'"></div>
              </div>
        </td>
    </tr>
</table>
</div>
</body>
</html>   

// create angular app
var testApp = angular.module('testApp', []);

// create angular controller
testApp.controller('testController', ['$scope', '$http', function($scope, $http) {
    $scope.functype = 'home';

    //below functions handle navigation links
    $scope.homeFunc = function() {
        $scope.functype = 'home';
    }
    $scope.testFunc = function() {
        $scope.functype = 'test';
    }

}]);
11.）创建
src/main/webapp/testController.js
，并包括以下内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title of page</title>
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="resources/css/my.css">
</head>
<body ng-app="testApp">
    <script src="js/lib/angular.js"></script>
    <script type="text/javascript" src="testController.js"></script>

<div ng-controller="testController">  
<table width=100%>
    <tr>
        <td align=center>
            <table>
                <tr>
                    <th class="toc"> 
                        <a class="btn btn-success" role="button" ng-click="homeFunc()">Home</a>
                    </th>
                    <th class="toc">
                        <a class="btn btn-success" role="button" ng-click="testFunc()">Include file</a>
                    </th>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="center">
              <div ng-if="functype == 'home'">
                Home page.
              </div>
              <div ng-if="functype == 'test'">
                <div ng-include="'includes/index_testincl.html'"></div>
              </div>
        </td>
    </tr>
</table>
</div>
</body>
</html>   

// create angular app
var testApp = angular.module('testApp', []);

// create angular controller
testApp.controller('testController', ['$scope', '$http', function($scope, $http) {
    $scope.functype = 'home';

    //below functions handle navigation links
    $scope.homeFunc = function() {
        $scope.functype = 'home';
    }
    $scope.testFunc = function() {
        $scope.functype = 'test';
    }

}]);
12.）Eclipse->Project Explorer->Rt单击Project->RunAs..Maven Build

13.）Eclipse->Project Explorer->Rt单击项目->刷新

14.）将路径复制到某个远程tomcat服务器，并通过键入anydomain.com尝试从web浏览器加载它

就是这样。应该重新创建问题

当向anydomain.com发出请求时，为了使上述最小AngularJS应用程序在远程tomcat web服务器上正常运行，需要进行哪些更改？