在浏览器中使用常规JS的Angular 2服务

我有一个Angular 2服务，意思是一些组件正在使用的打字稿类，它通过http从Web服务获取数据。 ng服务使用Angular的http和rxjs Observable和可观察的运算符。我需要在完全不同的应用程序中重新使用这个ng服务，这是一个香草JS（没有角度，没有打字稿）。在浏览器中使用常规JS的Angular 2服务

是否可以仅编译ng服务及其依赖关系（http，rxjs）并将其打包为可在浏览器中使用的独立自给式JavaScript模块？

来源

2017-04-19 itaysk

我不明白为什么它可能无法正常工作 –

任何原因，我该怎么办呢？我只是采取service.ts文件的JS输出，并尝试在Angular上下文外使用它？这肯定不会工作，因为它依赖于Angular的东西，问题是我需要的其他角度的东西，如果有一个简单的方法来打包它 – itaysk

如果你使用模块，你已经知道你需要通过检查导入。你的服务使用依赖注入吗？ –

您仍然可以使用现代 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：

构建您Angular2 http服务的等效在ECMAScript6有用的文档（ JavaScript）：

来源

2017-04-19 08:20:09 SrAxi

这是一个在Angular应用程序中使用JS的例子吗？因为我的情况恰恰相反（在JS应用程序中使用TS \ NG服务） – itaysk

@itaysk这是使用ECMAScript6（JavaScript）作为模块构建HTTP请求的示例。没有Angular envolved。我以为这是你问的问题...... – SrAxi

不知道我理解这个解决方案。你是否打算用这个实现来替换ng服务中的@ angular/http？或者，也许你打算使用这个而不是重用我现有的ng服务？ – itaysk

在浏览器中使用常规JS的Angular 2服务

回答

相关问题