I am using angular js 2 beta to consume a web service. My web service is as follows,
This is my browser output when I hit http://localhost:8080/test
[{"name":"Bhasker"},{"name":"Aaron"}]
Following is my code,
app.component.ts
import {Component} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map'
@Component({
selector: 'my-app',
viewProviders: [HTTP_PROVIDERS],
template: `<h1>My First Angular 2</h1>
<div>
<h1>People</h1>
<ul>
<li *ngFor="#person of people">
{{person.name}}
</li>
</ul>
</div>`
})
export class AppComponent {
people: Object[];
constructor(http: Http) {
//working with plain json file but not with ws
http.get('http://localhost:8080/test')
.map(res => res.json())
.subscribe(people => this.people = people);
}
}
boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
I get the following in my browser's console,
The connection to ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=WJv1vqSBu7HYFxTmAAAA was interrupted while the page was loading. browser-sync-client.2.11.1.js:3:0
ReferenceError: require is not defined http.js:7:5
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. angular2.dev.js:351:5
EXCEPTION: [object Object] angular2.dev.js:23524
EXCEPTION: [object Object] angular2.dev.js:23514:9
STACKTRACE: angular2.dev.js:23514:9
-----async gap-----
_getStacktraceWithUncaughtError@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26
[2]</</module.exports.$fork/<@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40
[2]</</Zone.prototype.bind@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:109:43
patchEventTargetMethods/obj.addEventListener@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1089:1
XHRConnection/this.response<@https://code.angularjs.org/2.0.0-beta.0/http.dev.js:674:9
my spring web service ,
@RequestMapping(value = { "/test" },method = RequestMethod.GET,headers="Accept=application/json")
public List<People> testSetvice(){
System.out.println("hello");
List<People> li=new ArrayList<>();
li.add(new People("Bhasker"));
li.add(new People("Aaron"));
return li;
}
However if I change http://localhost:8080/test to people.json which is a local file it works.
Thanks
