angular2学习笔记之服务和http

现在应用开发多为spa的前后分离,前后端通讯则使用http的接口通过json进行交互。angular2-demo

一、 效果图

1. 展现出来的效果

2. mysql的数据

二、代码实例

1. 服务 service

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 {        return this.http.get(api.findAll).map((res:any)=> {            return res.json();        });    }}

2.组件 HttpService

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. 模板 HttpService.html

    1. {{i+1}}.{{item.userName}}

关键字：angularjs, angular2, http, import

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！