Question

AngularJS中是否有办法编写API。实际上我需要根据外部Web请求在我的应用程序（AngularJS和Java）中加载HTML页面。

当我从服务器端的Web API（如

）执行此操作时

@RequestMapping(value="/test")
public ModelAndView apiTest( HttpServletRequest request, HttpServletResponse response) {
    System.out.println("Request comming from outside");
    HttpSession session = request.getSession(true);
    System.out.println("Api session"+session.getId());
    ModelAndView newModel = null;
    newModel = new ModelAndView("somepage.html");
    return loginModel;
}

以上代码加载页面，但是在请求浏览器上，即从API调用的位置。反过来，我希望页面加载到当前正在运行的应用程序上。

我该怎么做？

Answer 1

我在Angular应用程序中为两种不同类型的HTML内容加载创建了DEMO。

1）使用ng-include我们提供HTML文件URL路径并请求angular去获取html内容以加载特定DOM。

2）使用ng-bind-html我们可以通过服务器调用从API发送html内容，并将其作为html加载到我们的DOM中（这是OP的场景）。

在示例中，我们请求两个html模板，并以两种不同的方式加载我们的DOM，通过使用html文件路径设置范围变量来加载一个模板，ng-include用来加载该html内容。

在第二种情况下，我们通过$http GET调用请求另一个html并获取数据中的模板内容并将其分配给范围变量，然后ng-bind-html将该字符串转换为实际的HTML内容。

下面是JS中的示例代码

 $scope.requestHTML = function(reqstType) {

                if (reqstType === 'server') {
                    $scope.reqstType = 'server';
                    $http.get('dummy.html').success(function(data) {
                        console.log(data);

                        $scope.htmldata = $sce.trustAsHtml(data);
                    }).error(function(res) {
                        alert('request Failed Idiot !!');
                    });
                } else if (reqstType === 'client') {
                    $scope.reqstType = 'client';
                    $scope.contentURL = 'load.html';
                }
            };

在HTML中

<div> 
        <button ng-click="requestHTML('client')"> Request Client HTML </button>
        </div>
        <div>
        <br> 
         <button ng-click="requestHTML('server')"> Request Server HTML</button>
       </div>
        <div ng-include="contentURL"> </div>

        <div ng-bind-html="htmldata"></div>
    </div>

Answer 2

我建议您使用ngResource。这是一个角度whay，它允许您与 RESTful 服务器端数据源进行交互。 Here您可以阅读更多相关信息。这是一个如何使用的小型演示：

(function () {
    'use strict';

    angular
        .module('app')
        .factory('apiService', apiService);

    /** @ngInject */
    function apiService($resource) {
        var api = {};
        api.file = {
            getSomeFile: $resource('http://example.com/api/:file', {id: '@file'}, {
                get: {
                     method: 'GET',
                     params: {
                         getFooter: true
                     }
                }
            })
        }
        return api;
    }

})();

这只是一个例子，可以使用ngResource。您将使用此工厂（服务）作为正常工厂，您可以在页面控制器或任何需要的地方注入，并在需要包含该HTML文件时调用getSomeFile。

有没有办法在AngularJS中编写API？

2 个答案: