Question

嗨，我是使用angular.js来恢复春季服务的新手，我需要显示从弹簧控制器通过角度js返回的数据。在这里，我hava附上了代码

控制器文件： -

        @Controller
        public class Control {
        @RequestMapping(value="/getContent",method = RequestMethod.GET,produces =                  {"application/json"})
        public @ResponseBody String show(){
        String msg = "welcome to spring angular js";
        return msg;

        }}

servlet文件：

          <context:component-scan base-package="spring" />

            <mvc:annotation-driven content-negotiation-manager="contentManager"/>
          <bean id="contentManager"
            class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
            <property name="favorPathExtension" value="true"/>
            <property name="ignoreAcceptHeader" value="true" />
            <property name="defaultContentType" value="text/html" />
            <property name="useJaf" value="false"/>
            <property name="mediaTypes">
                <map>
                    <entry key="html" value="text/html" />
                    <entry key="json" value="application/json" />
                    <entry key="xml" value="application/xml" />
                </map>
            </property>
           </bean>
        <bean id="jspViewResolver"
          class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        </bean>
        </beans>

index.jsp文件：

         <head>
           <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
           <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.js"></script>
           <script type="text/javascript" src="script.js"></script>
           <script type="text/javascript" src="controller.js"></script>

           </head>
          <body>
          <h1>Index file</h1>

           <a href="#/nextfile">Click</a>

           <div ng-view></div>

            </body>
           </html>

index1.jsp文件：

            <html>
            <head>
             <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
             <title>Insert title here</title>
             <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js">                      </script>
             <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.js"></script>
             <script type="text/javascript" src="script.js"></script>
             <script type="text/javascript" src="controller.js"></script>

             </head>
            <body>
            <h1>Index1 file</h1>

              <div ng-controller="routeController">

              <p>Message is:{{$scope.Data}} </p>
              <script type="text/javascript" src="script.js"></script>
              <script type="text/javascript" src="controller.js"></script>
              </div>
              </body>
             </html>

Script.js文件：

             var app = angular.module("sample",['ngRoute']);
             app.config(['$routeProvider',function($routeProvider){
            $routeProvider.when("/nextfile",{
            templateUrl: 'index1.jsp',
           controller: 'routeController'
           });
            }]);

Controller.js文件：

            app.controller('routeController',function ($scope,$http){
             $http.get('http://domainname:8080/sample/getContent.json').success(function(data) {alert("success");$scope.Data =data;}).error(function(data){alert("failure");});

}）;

请指明一个建议，提前致谢。

Answer 1

只需以这种方式返回：

        @Controller
        public class Control {
           @RequestMapping(value="/getContent",method = RequestMethod.GET,produces =                  {"application/json"})
           public @ResponseBody String show(){
                HashMap hash = new HashMap();
                hash.put("msg", "welcome to spring angular js");
                return hash; // should print {msg=welcome to spring angular js} 
           }                 // in eclipse console
        }

和您的Controller.js：

     app.controller('routeController',function ($scope, $http){
     $http.get('http://domainname:8080/sample/getContent').
            success(function(data) {
                  alert("success");
                  $scope.Data = data;
            }).
            error(function(data){
                 alert("failure");
            });
    });

Answer 2

@Rameshbabu您是否已查看此网址http://www.javabeat.net/spring-mvc-angularjs-integration/它可能会对您有所帮助

如何通过Angularjs控制器调用弹簧控制器

2 个答案: