2017-01-23 3 views
0

это мой index.htmlAngular2 Получить Ошибка 404 Не найдено

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Learn AngularJS2 </title> 
    <meta charset="utf-8"> 
    <!-- bootstrap --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <!-- fonts --> 
    <link href='https://fonts.googleapis.com/css?family=Lato:700,400,100,200,300' rel='stylesheet' type='text/css'> 
    <!-- css link --> 
    <link rel="stylesheet" href="css/style.css"> 
    <!-- Source files --> 
    <script src="js/lib/angular2/es6-shim.min.js"></script> 
    <script src="js/lib/angular2/system-polyfills.js"></script> 

    <script src="js/lib/angular2/angular2-polyfills.js"></script> 
    <script src="js/lib/angular2/system.src.js"></script> 
    <script src="js/lib/angular2/Rx.js"></script> 
    <script src="js/lib/angular2/angular2.dev.js"></script> 

    <script src='https://code.angularjs.org/2.0.0-beta.0/http.dev.js'></script> 


    <!-- config --> 

    <script> 
     System.config({ 
     packages: { 
      js: { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } 
     }); 
     System.import('js/boot') 
     .then(null, console.error.bind(console)); 
    </script> 
    </head> 
    <!-- Body --> 
<body> 
<div class="container"> 

    <httptest>Loading...</httptest> 

</div> 
</body> 
</html> 

и это HTTP-компонент

import {Component} from 'angular2/core'; 
import {httpService} from './http_service'; 

@Component({ 
    selector: 'httptest', 
    template:` 
    <button (click)="onGet()">getData</button> 
    <p>Output : {{getData}}</p> 
    `, 
    providers:[httpService] 
}) 


export class httpComp{ 

    getData:string; 
    constructor(
    private httpService:httpService){} 
    onGet(){ 
    this.httpService.getData() 
    .subscribe(
     data => this.getData=JSON.stringfy(data), 
     error => alert(error), 
     () => console.log("finish") 
    ); 
    } 

} и это мой HTTP-служба

import {Injectable} from '@angular2/core'; 
import {Http} from 'angular2/http'; 
import 'rxjs/add/operator/map'; 


@Injectable() 

export class httpService{ 
constructor (private _http:Http){ 
    getData(){ 
     return 
this._http.get('http://localhost:3000/blahblah') 
     .map(res => res.json()) 
     } 

    } 

    } 

, который является boot.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './app.component'; 

import {httpComp} from './http.component'; 

bootstrap(httpComp); 

когда я бегу я получил эти ошибки

system.src.js: 1049 ПОЛУЧИТЬ http://localhost:8000/@angular2/core 404 (Not Found) и эта ошибка

angular2-polyfills.js: 138 Ошибка: ошибка XHR (404 Не найден) загрузка http://localhost:8000/@angular2/core (...)

+0

Какая версия angular2 вы используете? – echonax

+0

«angular2»: «2.0.0-beta.2», – flower

+0

http://imgur.com/QymsbpI – flower

ответ

2

@angular/core обозначение пришло с версией 2.0.0.rc.0 в beta и alpha импорте походило angular2/core. Вы перепутали свой импорт.

Источник: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc0-2016-05-02

import {Component} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS} from 'angular2/http'; 
import {httpService} from './http_service'; 


@Component({ 
    selector: 'httptest', 
    template:` 
    <button (click)="onGet()">getData</button> 
    <p>Output : {{getData}}</p> 
    `, 
    providers:[Http, HTTP_PROVIDERS, httpService] 
}) 


export class httpComp{ 

    getData:string; 
    constructor(
    private httpService:httpService){} 
    onGet(){ 
    this.httpService.getData() 
    .subscribe(
     data => this.getData=JSON.stringfy(data), 
     error => alert(error), 
     () => console.log("finish") 
    ); 
    } 
+0

его работа сейчас и визуализировать данные, но у меня есть простой вопрос, что он визуализирует данные в светлом цвете, как этот http: // imgur. com/qUVH93z – flower

+0

@flower Ваш вопрос не включает в себя необходимую информацию для проблемы цвета:/ – echonax

+0

, так как сделать дизайн для этого? – flower

 Смежные вопросы

  • Нет связанных вопросов^_^