所以,我正在通过打字稿在他们的网站上关注角度2指南,并且我陷入了http api集成.我正在尝试创建一个简单的应用程序,可以通过soundcloud api搜索一首歌,但是我很难实现和理解如何开始,而且在线资源以很多不同的方式完成它(我相信快速的角度2语法更改)早些时候).
所以目前我的项目看起来像这样
app
components
home
home.component.ts
...
search
search.component.ts
...
app.ts
...
services
soundcloud.ts
bootstrap.ts
index.html
Run Code Online (Sandbox Code Playgroud)
在示例中没有任何花哨的东西,主要文件将是
app.ts
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 { }
Run Code Online (Sandbox Code Playgroud)
bootstrap.ts
import {App} from './components/app';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router'; …Run Code Online (Sandbox Code Playgroud) 在执行POST请求时我无法更改标头.我尝试了几件事:
简单的课程:
export class HttpService {
constructor(http: Http) {
this._http = http;
}
}
Run Code Online (Sandbox Code Playgroud)
我试过了:
testCall() {
let body = JSON.stringify(
{ "username": "test", "password": "abc123" }
)
let headers = new Headers();
headers.append('Content-Type', 'application/json'); // also tried other types to test if its working with other types, but no luck
this._http.post('http://mybackend.local/api/auth', body, {
headers: headers
})
.subscribe(
data => { console.log(data); },
err => { console.log(err); },
{} => { console.log('complete'); }
);
}
Run Code Online (Sandbox Code Playgroud)
2:
testCall() {
let body …Run Code Online (Sandbox Code Playgroud) 我正在使用Angular2从Java Spring后端应用程序获取访问令牌.我可以通过CURL获取令牌,但不能通过Angular形式获取.
curl localhost:8085/uaa/oauth/token --data "grant_type=password&scope=write&username=MY-USERNAME&password=MY-PASSWORD" --user user:pwd
Run Code Online (Sandbox Code Playgroud)
我在这样的Java后端启用了Cors:
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
final HttpServletResponse response = (HttpServletResponse) servletResponse;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE, GET, HEAD, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, If-Modified-Since");
chain.doFilter(servletRequest, servletResponse);
}
Run Code Online (Sandbox Code Playgroud)
我的Angular代码如下所示:
import {Injectable, Component} from 'angular2/core';
import {Observable} from 'rxjs/Rx';
import {Http, HTTP_PROVIDERS, Headers} from 'angular2/http';
@Component({
viewProviders: [HTTP_PROVIDERS]
})
@Injectable()
export class Authentication {
token:string;
http:Http;
constructor(http:Http) {
this.token = …Run Code Online (Sandbox Code Playgroud)