Angular2 learning notes service and http

Time:2021-2-22

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
Angular2 learning notes service and http

1、 Renderings

1. The effect shown

Angular2 learning notes service and http

2. MySQL data

Angular2 learning notes service and http

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>