在浏览器中使用来自常规 JS 的 Angular 2 服务答案

【问题标题】：Use Angular 2 service from regular JS in browser在浏览器中使用来自常规 JS 的 Angular 2 服务
【发布时间】：2017-04-19 07:52:37
【问题描述】：

我有一个 Angular 2 服务，意思是一些组件正在使用的打字稿类，它通过 http 从 Web 服务获取数据。 ng 服务使用 Angular 的 http、rxjs Observables 和 observable 操作符。我需要在一个完全不同的应用程序中重新使用这个 ng 服务，它是 vanilla JS（没有角度，没有打字稿）。

是否可以只编译 ng 服务及其依赖项（http、rxjs）并将其打包成一个独立的、自给自足的 JavaScript 模块，可以在浏览器中使用？

【问题讨论】：

我看不出它可能不起作用的任何原因
我该怎么做？我是否只是获取 service.ts 文件的 JS 输出并尝试在 Angular 上下文之外使用它？这肯定行不通，因为它依赖于 Angular 的东西，问题是我需要什么其他的 Angular 东西，以及是否有一种简单的方法来打包它
如果您使用模块，您已经通过检查导入知道您需要什么。你的服务使用依赖注入吗？
是的。我只注入@angular/http，但也使用其他模块，如rxjs，以及一些模型类。我知道我的服务依赖于什么，但我不知道如何在没有 Angular 应用程序的其余部分（并且不需要 Angular 作为依赖项）的情况下引导 just 我的服务
如何引导我的服务 - 你是什么意思引导？此外，如果您的其他应用程序没有实现它，您可以使用 DI。您可以导入@angular/http 并在类中自己实例化它

标签： angular typescript

【解决方案1】：

您仍然可以使用现代 JavaScript。使用ECMAScript6。

模块化 HTTP 请求示例（可在整个应用中轻松重用）：

export default obj => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(obj.method || "GET", obj.url);
        if (obj.headers) {
            Object.keys(obj.headers).forEach(key => {
                xhr.setRequestHeader(key, obj.headers[key]);
            });
        }
        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send(obj.body);
    });
};

更新 1：

在 ECMAScript6 (JavaScript) 中构建等效的 Angular2 http 服务的有用文档：

【讨论】：

这是在 Angular 应用程序中使用 JS 的示例吗？因为我的情况正好相反（在 JS 应用中使用 TS\NG 服务）
@itaysk 这是一个使用 ECMAScript6 (JavaScript) 将 HTTP 请求构建为模块的示例。没有涉及角度。我以为这是你问的...
不确定我是否理解此解决方案。您是否建议用此实现替换 ng 服务中的 @angular/http ？或者，也许您打算使用它而不是重用我现有的 ng 服务？
@itaysk 我打算使用此（以及您在我的更新中找到的有用链接的解决方案），而不是服务。与基本的 NG/TS http 服务基本相同，但它完全是 JavaScript。我会采用这种方法，而不是仅仅创建它。如果您意识到，非常非常相似。
@itaysk 如果您检查这些链接（我认为这些链接解释得很好），您会发现一些示例。复制它们，你就完成了：没有 Angular，没有 TypeScript。使用模块化方法，您只需声明此 http 服务一次，然后在整个应用程序中重复使用它，就像 Angular 服务的行为一样。