angular2 问题请教

angular2 通过http服务进行对后端api的远程调用?

我简单的尝试了一下,发现了几个问题,记录一下,以方便查找问题。

  1. angular2 http服务的跨域问题?跨域本身就是一个很复杂的问题,angular2对跨域的处理。
  2. angular2 如果在providers中加入http服务会出现什么问题?
  3. promise http服务会强迫我们使用Observerable,但是我们可以转换成promise,还是遵循官方指导,学习rxjs吧。

现在我们先看第二个问题?

 1 import { NgModule } from ‘@angular/core‘;
 2 import { Http, HttpModule } from ‘@angular/http‘;
 3 import { HeroListComponent } from ‘./hero-list.component‘;
 4
 5 @NgModule({
 6     imports: [HttpModule],
 7     declarations: [HeroListComponent],
 8     providers: [Http]
 9 })
10
11 export class HeroListModule
12 { }

我在providers中添加了http服务。如果此时我通过http获取远程url内容。

 1 import { Component } from ‘@angular/core‘;
 2 import { Http } from ‘@angular/http‘;
 3
 4 @Component({
 5     templateUrl: ‘./hero-list.component.html‘
 6 })
 7
 8 export class HeroListComponent {
 9     private baiduhtml: string;
10     constructor(private http: Http) {
11         this.http.get("http://localhost:8080/dashboard/datalist").toPromise().then((data) => {
12             this.baiduhtml = data.text();
13         }).catch(this.handleError);
14     }
15
16     private handleError(error: any): Promise<any> {
17         console.error(‘An error occurred‘, error); // for demo purposes only
18         return Promise.reject(error.message || error);
19     }
20
21 }

很不好意思?出现了错误

如果我们去掉providers中的http,执行正常。

这是不是提示我们,服务不能重复的在providers中添加呢?那么如果不能重复添加,我们该如何避免呢?暂时没想到好办法,希望有合适方法的指导一下??

因为团队开发,我们不能避免出现重复添加的问题。

关于跨域问题的研究,加入一个header就可以搞定,这涉及到了http的细节,不属于问题。

时间: 2024-08-05 19:04:02

angular2 问题请教的相关文章

angular2开发01

angular2开发01 1. angular2 开发准备 1.1. 安装node 1.2. 安装npm 1.3. 运行qickStart 1 angular2 开发准备 开发环境是linux mint 17.3 64位 1.1 安装node node在linux的部署主要有三种方式,第一种方式,使用apt-get install nodejs安装,这种方式有缺点,安装后的版本太低(0.10),官网都已经到4.5了; 第二种就是自己下载源码,手动编译二进制,这种方式要求有点高,属于高级用 户方式

[Step-By-Step Angular2](1)Hello World与自动化环境搭建

随着rc(release candidate,候选版本)版本的推出,万众瞩目的angular2终于离正式发布不远啦!五月初举办的ng-conf大会已经过去了整整一个月,大多数api都如愿保持在了相对稳定的状态——当然也有router这样的例外,在rc阶段还在大面积返工,让人颇为不解——不过总得说来,现在学习angular2不失为一个恰当的时机. Google为angular2准备了完善的文档和教程,按理说,官网(https://angular.io)自然是学习新框架的最好教材.略显遗憾的是,在B

新手请教个问题,有关cocos2d-x

============问题描述============ 最近玩上一款手游,部落站争,无意当中发现有个游戏助手,得知里面用lua脚本集成编写的,请教下大侠们,像这种漂浮在游戏内的游戏助手能用cocos2d开发么?小弟刚接触手机app开发,对这些还不太懂,请大侠们给指条路,用cocos2d开发手游辅助是否可行?该用cocos的哪个产品开发合适呢?小弟谢过了!- ============解决方案1============ cocos2d现在很多开发者都是用lua的,方便实现

浅谈angular2与angularJS的区别

简介 大家好,今天给大家介绍一下angular,相信做过前端的小伙伴们都知道angular的大名,angularJS自2012年发布起就受到了大家的广泛关注.他首次提出了双向绑定概念让所有人都耳目一新,2016年angular2正式被发布,那么angular2到底有什么值得期待的地方呢,接下来讲一下angular2吸引人的地方. 1.1.1  angularJS的困境以及angular2的新特性 首先呢我们讨论一下angularJS的一些不足之处: 1.饱受诟病的性能问题 通过检查进行数据更新,

angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流

大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子 例子的第一个程序,上节课已经讲过了.这节课我们学习第二个程序,从wiki的api中跨域获取数据,可实现300毫秒内中断和选择最近请求等炫酷功能,这些功能都来自于observable! 运行方法: 在http目录或者上级目录起个服务即可: http-server 没有则需要安装http-server: sudo npm install htt

迈向angularjs2系列(2):angular2组件和指令详解

<%= INIT %> 内容 一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l

从Angular2路由引发的前后端路由浅谈

笔者的学习进度比较慢,直到两年以前写的网站都还是以服务端为主导的,即网站的所有视图都由服务器视图模板来渲染,笔者使用的是 DotNet MVC,开发套路就是在Controller里面写Action,在Views里写对应的Action.cshtml,使用ajax发起请求已经是比较前端的事情了.这种时候由于DotNet MVC框架继承的微软风格的懒人模式,甚至不需要去知道其路由是如何实现的,给人一种感觉是只要在浏览器里敲进去Controller名与Action名,就访问到视图了. 后来笔者开始使用n

最好的Angular2表格控件

最好的Angular2表格控件 现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为

Angular2 - Starter - Pipes, Custom Pipes

在Angular2 模板中,我们在显示数据时,可以使用通道将数据转换成相应的格式的值的形式来显示,而且这不改变源数据.比如,我们可以使用date通道来转换时间显示的格式: {{date | date:'yyyy-MM-dd'}} ,(1) 以下是Angular提供的基本的通道. Basic Pipes Pipe Name Usage Parameters or Effection currency {{test.currency | currency }} 1234569678 > USD1,2