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

【问题标题】：Is there a way to write an API in AngularJS?有没有办法在 AngularJS 中编写 API？
【发布时间】：2016-09-24 06:52:48
【问题描述】：

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。反过来，我希望页面加载到当前正在运行的应用程序上。

我该怎么做？

【问题讨论】：

您的HTML 文件在哪里？
在我编写 java API 的服务器上
一种解决方法是在客户端移动这些 HTML 文件，比如 templates 文件夹，您可以将 HTML 获取为 $http.get('templates/somepage.html').then(function(response){//response.data contains your HTML file's content}) 然后您可以使用 ng-bind- 操作原始 HTML 内容页面内的html。
你的意思是：角度可以从API消费html吗？
让我更清楚我的问题（忘记问题中提到的角度 API），我有一个使用（角度和 java）的应用程序，并且用户正在登录该应用程序。现在，每当有人点击特定的 API（来自外部的 url）时，我想在用户端加载一个 html 页面，该页面登录到应用程序而不是在点击 api 的一侧

标签： javascript java html angularjs spring-mvc

【解决方案1】：

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

1) 使用ng-include，我们提供 HTML 文件 url 路径并要求 angular 去获取要加载到特定 DOM 的 html 内容。

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

在示例中，我们请求两个 html 模板并以两种不同的方式加载到我们的 DOM 中，通过使用 html 文件路径设置范围变量来加载一个模板，ng-include 反过来又使用该 html 文件来加载该 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>

【讨论】：

【解决方案2】：

我建议您使用ngResource。这是 angular 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。

【讨论】：