Angular2 learning notes service and http

At present, the application development is mostly based on the separation of the front and back of spa, and the front and back communication uses the HTTP interface to interact through JSON.angular2-demo

1、 Renderings

1. The effect shown

2. MySQL data

2、 Code instance

1. Serviceservice

import {Injectable} from '@angular/core';
import { Http }from '@angular/http';
import * as api from './../api/Api';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class UserService {
    data:any;

    constructor(public http:Http) {
        this.http = http;
    }

    findAll():Observable<any> {
        return this.http.get(api.findAll).map((res:any)=> {
            return res.json();
        });
    }
}

2. ComponentsHttpService

import {Component,OnInit} from '@angular/core';
import { UserService } from './../../service/UserService';


@Component({
    selector: 'http-service',
    styles:[require('./HttpService.scss')],
    template: require('./HttpService.html'),
    providers: [UserService]
})

export class HttpServiceComponent implements OnInit {

    admins:Object;
    data:Object;

    constructor(public userService:UserService) {
        this.userService = userService;
    }


    ngOnInit():void{
        this.userService.findAll().subscribe((data:any) => {
            this.admins = data.adminUsers.content;
            console.log('in component : ',this.admins);
        });
        console.log(' HttpServiceComponent ngOnInit :', 'enter');
    }

}

3. FormworkHttpService.html

<ul *ngFor="let item of admins;let i = index">
    <li>{{i+1}}.{{item.userName}}</li>
</ul>