我是否可以在同一应用程序中运行RESTful服务和angularJS以避免交叉浏览器

Question

i've done a simple RESTful service using Resteasy and JAXRS in Java. And then i'm trying to call to the service from the "front-end" by using angularJS $http.get.

By the way, using tomcat 7 to run this.

For some reason, with my current web.xml i can't access to the angularJS view with a 404 not found error, but i can access the restful service.

Now, if i add a simple default web.xml, the restful service will no longer work, but the angularJS view will be found.

Can you guys tell me what's wrong? been looking for this for hours.

This is my pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>angular-js</groupId>
    <artifactId>angular-js</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <java-version>1.7</java-version>
    </properties>

    <repositories>
        <repository>
            <id>org.jboss.resteasy</id>
            <url>http://repository.jboss.org/maven2/</url>
        </repository>
        <repository>
            <id>jboss</id>
            <url>http://repository.jboss.org/nexus/content/groups/public-jboss/</url>
        </repository>
    </repositories>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                    <webXml>src\main\webapp\WEB-INF\web.xml</webXml>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <dependencies>
        <dependency>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>2.3.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-surefire-plugin</artifactId>
            <version>2.10</version>
        </dependency>
        <dependency>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.1.1</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>

        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-jaxrs</artifactId>
            <version>2.3.6.Final</version>
        </dependency>
        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-jackson-provider</artifactId>
            <version>2.3.6.Final</version>
        </dependency>
        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-jettison-provider</artifactId>
            <version>2.3.6.Final</version>
        </dependency>
        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-multipart-provider</artifactId>
            <version>2.3.6.Final</version>
        </dependency>
        <dependency>
            <groupId>net.sf.scannotation</groupId>
            <artifactId>scannotation</artifactId>
            <version>1.0.2</version>
        </dependency>
        <dependency>
            <groupId>javassist</groupId>
            <artifactId>javassist</artifactId>
            <version>3.12.1.GA</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jettison</groupId>
            <artifactId>jettison</artifactId>
            <version>1.3.4</version>
        </dependency>

        <dependency>
            <groupId>javax.ws.rs</groupId>
            <artifactId>jsr311-api</artifactId>
            <version>0.11</version>
        </dependency>
    </dependencies>

</project>

This is my web.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>AngularJS Application</display-name>

    <welcome-file-list>
        <welcome-file>index.htm</welcome-file>
    </welcome-file-list>

    <listener>
        <listener-class>org.jboss.resteasy.plugins.server.servlet.ResteasyBootstrap</listener-class>
    </listener>

    <servlet>
        <servlet-name>Resteasy</servlet-name>
        <servlet-class>org.jboss.resteasy.plugins.server.servlet.HttpServletDispatcher</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>Resteasy</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>

    <context-param>
        <param-name>resteasy.scan</param-name>
        <param-value>true</param-value>
    </context-param>

    <context-param>
        <param-name>resteasy.servlet.mapping.prefix</param-name>
        <param-value>/</param-value>
    </context-param>
</web-app>     

This is my angularJS code, pretty basic:

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

teamsApp.config(function($routeProvider) {
    $routeProvider
    .when('/view', {
        controller: 'testCtrl',
        templateUrl: 'partials/view1.htm'
    })
    .otherwise({redirectTo: '/view'});
});

teamsApp.controller('testCtrl', function($scope, $http) {
    $scope.title = "This is a testing title";

    $http({
        url: '/service/getAllPersonsJSON',
        method: "GET",
    }).success(function (data, status) {
            $scope.data = data;
    }).error(function (data, status) {
            $scope.status = status;
    });
});

My index.htm is this one

<!DOCTYPE html>
    <html ng-app="teamsApp">
        <head>
            <title>Testing AngularJS</title>
            <!-- <link rel="stylesheet" type="text/css" href="style/main.css" media="screen" /> --> 
            <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" media="screen" /> 
        </head>
        <body>
            <div class="view-container">
                <!-- Place holder for views-->
                <div ng-view></div>

            </div>

        <script src="angular/angular.min.js" type="text/javascript"></script>
        <script src="angular/angular-route.js" type="text/javascript"></script>

        <script src="scripts/controllers/controllers.js" type="text/javascript"></script>
        </body>
    </html>

view1.htm is only a div container with {{title}} value in it.

This is my project structure http://puu.sh/5GEuu.png

Thanks in advance.

Answer 1

I think the problem is that the RestEasy servlet is trying to handle your request for index.htm.

Try changing your web.xml as follows (adding a prefix):

<servlet-mapping>
    <servlet-name>Resteasy</servlet-name>
    <url-pattern>/service/*</url-pattern>
</servlet-mapping>

and your controller:

teamsApp.controller('testCtrl', function($scope, $http) {
    $scope.title = "This is a testing title";

    $http({
        url: '/getAllPersonsJSON',
        method: "GET",
    }).success(function (data, status) {
            $scope.data = data;
    }).error(function (data, status) {
            $scope.status = status;
    });
});

This should put index.htm outside of the controller.