因此,我正在通过打字稿在其网站上遵循angular2指南,并停留在httpapi集成中。我正在尝试制作一个可以通过soundcloudapi搜索一首歌曲的简单应用程序,但是我很难实现和理解如何入门,在线资源却以多种不同方式做到这一点(我相信可以快速进行角度2语法更改早些时候)。
所以目前我的项目看起来像这样
app
components
home
home.component.ts
...
search
search.component.ts
...
app.ts
...
services
soundcloud.ts
bootstrap.ts
index.html
在该示例中没有任何花哨的内容,主文件将是
应用程序
import {Component, View} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home/home.component';
import {SearchComponent} from './search/search.component';
@Component({
selector: 'app',
templateUrl: 'app/components/app.html',
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true},
{path: '/search', name: 'Search', component: SearchComponent}
])
export class App { }
bootstrap.ts
import {App} from './components/app';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
bootstrap(App, [
ROUTER_PROVIDERS
]);
而且我试图找出soundcloud.ts,但是无法执行,并且以下方法存在错误,即@Inject
找不到(我假设我在这里使用过时的语法)。本质上,我想在我的应用程序表单搜索组件中将soundcloud服务用于api调用。
import {Injectable} from 'angular2/core'
import {Http} from 'angular2/http'
@Injectable()
export class SoundcloudService {
http : Http
constructor(@Inject(Http) http) {
this.http = http;
}
}
这里不包括soundcloud api,因为我无法首先掌握基础知识。
提供的很好的答案,但是我想补充一点,所以发布作为答案。
首先,要使用Rest API,我们需要导入Http
和HTTP_PROVIDERS
模块。当我们谈论Http时,第一步显然是。
<script src="node_modules/angular2/bundles/http.dev.js"></script>
但是,是的HTTP_PROVIDERS
,在bootstrap文件中提供一个好习惯,因为通过这种方式,它是在全局级别提供的,并且可以像这样在整个项目中使用。
bootstrap(App, [
HTTP_PROVIDERS, some_more_dependencies
]);
和要包括的进口是…
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
有时我们需要Headers
在消耗API的同时提供发送access_token
信息,并通过这种方式完成更多工作:
this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))
现在到RequestMethods:基本上,我们使用GET,POST,但是您可以在此处引用更多选项…
我们可以使用requestmethods作为 RequestMethod.method_name
API还有更多选项,但现在我发布了一个POST请求示例,该示例将通过一些重要方法为您提供帮助:
PostRequest(url,data) {
this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))
this.requestoptions = new RequestOptions({
method: RequestMethod.Post,
url: url,
headers: this.headers,
body: JSON.stringify(data)
})
return this.http.request(new Request(this.requestoptions))
.map((res: Response) => {
if (res) {
return [{ status: res.status, json: res.json() }]
}
});
}
您也可以在这里参考以获取更多信息。
也可以看看 -
导入已从更改为
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
至
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
我试图创建一个数据网格——或者在angular2中用JSON对象创建一个表格。我的问题是我不知道表中有多少列,也不知道这些列的名称。 从我目前的理解我需要定义世界卫生大会 也许一个例子会让事情变得更清楚。。。 下面是我需要在同一个表中呈现的两个JSON示例... 示例1 示例 2 这里有我的组件… 表格: 应用程序字段映射行: 注意:这是我卡住的地方! 我如何创建正确的数量的细胞和h 我没能找到任
问题内容: 我是Angular2的新手,并试图将Angularjs中的owl-carousel转换为Angular2。 以下是owl-carousel实现的index.html文件: 这是app.js文件: 这是Angular1的实现,如何为Angular2实施呢? 问题答案: 更新资料 OwlCarousel2 + Angular2.3.0 旧版 以下是angular2猫头鹰轮播实现的app
我有一个restful web服务,支持HATEOAS链接。当我打电话时“http://localhost:8080/v1/bookings/1225380?lock=true“链接我得到了以下资源URL。我想将这些超媒体与我的Angular2应用程序(最近升级到最终版本)集成。我发现很少有资源是在Angular1支持下实现的(链接-https://paulcwarren.wordpress.co
我有2个API调用第二个调用使用第一个调用返回的东西。有了promise,这很容易: 我将如何使用可观测数据来实现这一点?
问题内容: 我正在使用带有自定义验证的Angular2的FormBuilder开发表单。问题:在customValidator中,我用来访问本地对象。执行验证时出现错误。 看起来customValidator是在其他对象中执行的,因此更改了引用 问题: 如何传递对customValidator 的引用? 问题答案: 使用箭头函数,以确保该函数绑定到此:
本文向大家介绍Material(包括Material Icon)在Angular2中的使用详解,包括了Material(包括Material Icon)在Angular2中的使用详解的使用技巧和注意事项,需要的朋友参考一下 1.引入material npm包 2.新建一个ebiz-material.module.ts方便管理引入material的module 3.在app的根module中引入eb
打印稿enum似乎是一个自然与盎 请注意,这不同于如何cre
即。在货币管道上完成一些额外的格式化。为此,我想在自定义管道的组件代码中使用现有管道。