/app.module.ts

## app.module.ts
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';
import { AppComponent }         from './app.component';
import './rxjs-extensions';
import {LoginService} from "../login/login.service";
import {Login} from "../login/login";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        Login

    ],

    providers: [LoginService ],
    bootstrap: [ AppComponent,]
})
export class AppModule { }


login.service.ts
---------------------------------------------

import {Injectable} from "@angular/core";
import {Router} from "@angular/router";
import {Http} from "@angular/http";


@Injectable()
export class LoginService{

    constructor(public router: Router, public http: Http) {
    }

    getMandat(){
        console.log("test");
        var json = this.http.get(' http://date.jsontest.com ').map(res => res.json());

        console.log(json);
        return json;
    }

}


## index.html
<html>
<head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
  <!--  <script src="node_modules/@angular/bundles/http.dev.js"></script> -->
    <script>
        System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

## login.service.ts
import {Injectable} from "@angular/core";
import {Router} from "@angular/router";
import {Http} from "@angular/http";


@Injectable()
export class LoginService{

    constructor(public router: Router, public http: Http) {
    }

    getMandat(){
        console.log("test");
        var json = this.http.get(' http://date.jsontest.com ').map(res => res.json());

        console.log(json);
        return json;
    }

}

## login.ts
import { Component } from '@angular/core';

import {LoginService} from "./login.service";


@Component({
    selector: 'login',
   // templateUrl: 'login.html',
  //  styleUrls: [ 'login.css' ]
    template: `<button (click)="onTestGet()"> get Test</button>
               <p>Output : {{getData}}</p>
            `
})
export class Login {
    getData: String;
    postData: String;

    constructor(private loginService:LoginService){}

    onTestGet(){
        this.loginService.getMandat().subscribe(data => this.getData = JSON.stringify(data), error =>alert(error),()=>console.log("Finished"));
    }


}
	import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
	import { InMemoryDataService } from './in-memory-data.service';
	import { AppComponent } from './app.component';
	import './rxjs-extensions';
	import {LoginService} from "../login/login.service";
	import {Login} from "../login/login";

	@NgModule({
	imports: [
	BrowserModule,
	FormsModule,
	HttpModule,
	InMemoryWebApiModule.forRoot(InMemoryDataService),
	AppRoutingModule
	],
	declarations: [
	AppComponent,
	Login

	],

	providers: [LoginService ],
	bootstrap: [ AppComponent,]
	})
	export class AppModule { }


	login.service.ts
	---------------------------------------------

	import {Injectable} from "@angular/core";
	import {Router} from "@angular/router";
	import {Http} from "@angular/http";


	@Injectable()
	export class LoginService{

	constructor(public router: Router, public http: Http) {
	}

	getMandat(){
	console.log("test");
	var json = this.http.get(' http://date.jsontest.com ').map(res => res.json());

	console.log(json);
	return json;
	}

	}
	<html>
	<head>
	<script>document.write('<base href="' + document.location + '" />');</script>
	<title>Angular QuickStart</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<!-- 1. Load libraries -->
	<!-- Polyfill for older browsers -->
	<script src="node_modules/core-js/client/shim.min.js"></script>
	<script src="node_modules/zone.js/dist/zone.js"></script>
	<script src="node_modules/reflect-metadata/Reflect.js"></script>
	<script src="node_modules/systemjs/dist/system.src.js"></script>
	<!-- 2. Configure SystemJS -->
	<script src="systemjs.config.js"></script>
	<!-- <script src="node_modules/@angular/bundles/http.dev.js"></script> -->
	<script>
	System.import('app').catch(function(err){ console.error(err); });
	</script>
	</head>
	<!-- 3. Display the application -->
	<body>
	<my-app>Loading...</my-app>
	</body>
	</html>
	import { Component } from '@angular/core';

	import {LoginService} from "./login.service";


	@Component({
	selector: 'login',
	// templateUrl: 'login.html',
	// styleUrls: [ 'login.css' ]
	template: `<button (click)="onTestGet()"> get Test</button>
	<p>Output : {{getData}}</p>
	`
	})
	export class Login {
	getData: String;
	postData: String;

	constructor(private loginService:LoginService){}

	onTestGet(){
	this.loginService.getMandat().subscribe(data => this.getData = JSON.stringify(data), error =>alert(error),()=>console.log("Finished"));
	}


	}