angular使用service应用分层

step0:创建一个新项目

step1: 创建服务user和组件user

ng generate service user
ng generate component user

step2: 创建bean类 D:\vue\untitled2899\src\app\user.ts

export class User {id: number;name: string;address: string;constructor(id: number, name: string, address: string) {this.id = id;this.name = name;this.address = address;}
}

step3: 创建本地资源库 D:\vue\untitled2899\src\app\mock-users.ts

import {User} from "./user";export const USERS : User[] = [{id:11,name:'李明',address:'北京'},{id:12,name:'刘洪',address:'上海'},{id:13,name:'赵雄',address:'深圳'},{id:14,name:'楚飞',address:'郑州'},{id:15,name:'宋苗',address:'贵阳'},{id:16,name:'林峰',address:'周口'},{id:17,name:'周海',address:'洛阳'},{id:18,name:'洪涛',address:'楚雄'},{id:19,name:'毕畅',address:'荆州'},{id:20,name:'黄平',address:'怀化'},
];

step4: 自动添加组件 D:\vue\untitled2899\src\app\app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';@NgModule({declarations: [AppComponent,UserComponent],imports: [BrowserModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

step6: 将user组件集成到主界面 D:\vue\untitled2899\src\app\app.component.html

<h1>{{title}}</h1>
<app-user></app-user>

step7: 服务类user D:\vue\untitled2899\src\app\user.service.ts

import {Injectable} from '@angular/core';
import {Observable, of} from "rxjs";
import {User} from "./user";
import {USERS} from "./mock-users";@Injectable({providedIn: 'root'
})
export class UserService {constructor() {}getUsers(): Observable<User[]> {return of(USERS);}
}

step8: user组件类 D:\vue\untitled2899\src\app\user\user.component.ts

import { Component, OnInit } from '@angular/core';import {User} from "../user";
import {UserService} from "../user.service";@Component({selector: 'app-user',templateUrl: './user.component.html',styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {users:User[] | undefined;constructor(private userService:UserService) { }ngOnInit(): void {this.getUsers();}getUsers():void{this.userService.getUsers().subscribe(users => this.users = users);}}

step9: user组件布局 D:\vue\untitled2899\src\app\user\user.component.html

<h2>我的用户</h2>
<ul class="users"><li *ngFor="let user of users"><span class="badge">{{user.id}}</span> {{user.name}}</li>
</ul>

run，发现可以展示一个列表数据

end

angular使用service应用分层相关推荐

angular中service、provice、factor区别
provider, factory和service都是写Angularjs的service中常用的关键字,很容易混淆,写了一个简单的例子显示他们之间的区别: 分别用service,factory和pr ...
angular的service服务使用
文章目录一.service服务(当vueX使用) 二.第二种方法使用service 1.定义获取user服务- user.service.ts 2.全局注册使用 3. 使用的组件这里为kk.comp ...
Service层在分层中的作用
在通用的J2EE应用分层结构中,经常发现有一个叫Service的分层,那么这个Service层到底是用来做什么的呢 ?简单地就字面理解来说, Service,即服务,那我们可以叫它为服务层.既然作为服 ...
获取Angular中的AngularJS功能
介绍 ( Introduction ) If you have solid experience with AngularJS 1.x, you're well aware of the framew ...
【必备】VSCode开发Angular的必备插件
[热门]AutoScssStruct4Vue:自动构建SCSS代码 [推荐]Angular File Changer (Supporting Touch Bar and NgRx)→用于快速切换同名H ...
Angular 服务
服务的概念服务是在多个"互相不知道"的类之间共享信息的好办法.-- 官方文档可以理解为组件中需要的数据源是由服务提供的,也可以理解为组件类中的方法通过调用服务中的方法向服务器请 ...
如何找到Angular应用的某个directive是属于哪一个Angular module
Suppose I would like to use SAP Spartacus directive cxComponentWrapper in my custom Component,and er ...
在Angular里使用rxjs的异步API - Observable
在Angular的service类里,导入Observable和of: of(HEROES) returns an Observable<Hero[]> that emits a sing ...
angular 模块构建_通过构建全栈应用程序学习Angular 6
angular 模块构建 Angular 6 is out! The new features include better performance, new powerful CLI additio ...

angular使用service应用分层

angular使用service应用分层相关推荐

最新文章

热门文章