Question

我正在使用angular js 2 beta来使用Web服务。我的网络服务如下，

时，这是我的浏览器输出

[{ “名称”： “Bhasker”}，{ “名称”： “亚伦”}]

以下是我的代码，

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>

我在浏览器的控制台中获得以下内容，

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

我的春季网络服务，

@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;

}

但是，如果我将http://localhost:8080/test更改为people.json，这是一个本地文件。

由于

Answer 1

看起来您正在从其他服务器请求数据。您的脚本在端口3000上运行，并且您尝试从端口8080获取数据。这是一个安全问题。

您正在尝试跨域HTTP请求： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

无法在angularjs 2 beta中看到json数据

1 个答案: