现在应用开发多为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<any> {
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
<ul *ngFor="let item of admins;let i = index">
<li>{{i+1}}.{{item.userName}}</li>
</ul>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。