angular的hero例子(5)
来源:互联网 发布:windows版本更新 编辑:程序博客网 时间:2024/06/06 09:07
route的使用
ng generate module app-routing –flat –module=app
ng generate component dashboard
代码:
heroes.component.ts
import { Component, OnInit } from '@angular/core';import { Hero } from '../hero';import { HeroService } from '../hero.service';@Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css']})export class HeroesComponent implements OnInit { heroes: Hero[]; constructor(private heroService: HeroService) { } ngOnInit() { this.getHeroes(); } getHeroes(): void { this.heroService.getHeroes() .subscribe(heroes => this.heroes = heroes); }}
heroes.component.html
<h2>My Heroes</h2><ul class="heroes"> <li *ngFor="let hero of heroes"> <a routerLink="/detail/{{hero.id}}"> <span class="badge">{{hero.id}}</span> {{hero.name}} </a> </li></ul>
app.component.html
<h1>{{title}}</h1><app-heroes></app-heroes><app-messages></app-messages>
app.component.ts
<h1>{{title}}</h1><nav> <a routerLink="/dashboard">Dashboard</a> <a routerLink="/heroes">Heroes</a></nav><router-outlet></router-outlet><app-messages></app-messages>
app.component.css
h1 { font-size: 1.2em; color: #999; margin-bottom: 0;}h2 { font-size: 2em; margin-top: 0; padding-top: 0;}nav a { padding: 5px 10px; text-decoration: none; margin-top: 10px; display: inline-block; background-color: #eee; border-radius: 4px;}nav a:visited, a:link { color: #607D8B;}nav a:hover { color: #039be5; background-color: #CFD8DC;}nav a.active { color: #039be5;}
app.module.ts
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component';import { DashboardComponent } from './dashboard/dashboard.component';import { HeroDetailComponent } from './hero-detail/hero-detail.component';import { HeroesComponent } from './heroes/heroes.component';import { HeroService } from './hero.service';import { MessageService } from './message.service';import { MessagesComponent } from './messages/messages.component';import { AppRoutingModule } from './app-routing.module';@NgModule({ imports: [ BrowserModule, FormsModule, AppRoutingModule ], declarations: [ AppComponent, DashboardComponent, HeroesComponent, HeroDetailComponent, MessagesComponent ], providers: [ HeroService, MessageService ], bootstrap: [ AppComponent ]})export class AppModule { }
hero.ts
export class Hero { id: number; name: string;}
mock-heroes.ts
/** * Created by gmy on 2017/12/4. */import { Hero } from './hero';export const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' }];
heroes.component.css
.heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;}.heroes li { position: relative; cursor: pointer; background-color: #EEE; margin: .5em; padding: .3em 0; height: 1.6em; border-radius: 4px;}.heroes li:hover { color: #607D8B; background-color: #DDD; left: .1em;}.heroes a { color: #888; text-decoration: none; position: relative; display: block; width: 250px;}.heroes a:hover { color:#607D8B;}.heroes .badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; background-color: #607D8B; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; min-width: 16px; text-align: right; margin-right: .8em; border-radius: 4px 0 0 4px;}
hero-detail.component.ts
import { Component, OnInit, Input } from '@angular/core';import { ActivatedRoute } from '@angular/router';import { Location } from '@angular/common';import { Hero } from '../hero';import { HeroService } from '../hero.service';@Component({ selector: 'app-hero-detail', templateUrl: './hero-detail.component.html', styleUrls: [ './hero-detail.component.css' ]})export class HeroDetailComponent implements OnInit { @Input() hero: Hero; constructor( private route: ActivatedRoute, private heroService: HeroService, private location: Location ) {} ngOnInit(): void { this.getHero(); } getHero(): void { const id = +this.route.snapshot.paramMap.get('id'); this.heroService.getHero(id) .subscribe(hero => this.hero = hero); } goBack(): void { this.location.back(); }}
hero-detail.component.html
<div *ngIf="hero"> <h2>{{ hero.name | uppercase }} Details</h2> <div><span>id: </span>{{hero.id}}</div> <div> <label>name: <input [(ngModel)]="hero.name" placeholder="name"/> </label> </div> <button (click)="goBack()">go back</button></div>
hero.service.ts
import { Injectable } from '@angular/core';import { Observable } from 'rxjs/Observable';import { of } from 'rxjs/observable/of';import { Hero } from './hero';import { HEROES } from './mock-heroes';import { MessageService } from './message.service';@Injectable()export class HeroService { constructor(private messageService: MessageService) { } getHeroes(): Observable<Hero[]> { // Todo: send the message _after_ fetching the heroes this.messageService.add('HeroService: fetched heroes'); return of(HEROES); }}
message.service.ts
import { Injectable } from '@angular/core';import { Observable } from 'rxjs/Observable';import { of } from 'rxjs/observable/of';import { Hero } from './hero';import { HEROES } from './mock-heroes';import { MessageService } from './message.service';@Injectable()export class HeroService { constructor(private messageService: MessageService) { } getHeroes(): Observable<Hero[]> { // Todo: send the message _after_ fetching the heroes this.messageService.add('HeroService: fetched heroes'); return of(HEROES); } getHero(id: number): Observable<Hero> { // Todo: send the message _after_ fetching the hero this.messageService.add(`HeroService: fetched hero id=${id}`); return of(HEROES.find(hero => hero.id === id)); }}
message.component.ts
import { Component, OnInit } from '@angular/core';import { MessageService } from '../message.service';@Component({ selector: 'app-messages', templateUrl: './messages.component.html', styleUrls: ['./messages.component.css']})export class MessagesComponent implements OnInit { constructor(public messageService: MessageService) {} ngOnInit() { }}
message.component.html
<div *ngIf="messageService.messages.length"> <h2>Messages</h2> <button class="clear" (click)="messageService.clear()">clear</button> <div *ngFor='let message of messageService.messages'> {{message}} </div></div>
message.component.css
h2 { color: red; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;}body { margin: 2em;}body, input[text], button { color: crimson; font-family: Cambria, Georgia;}button.clear { font-family: Arial; background-color: #eee; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; cursor: hand;}button:hover { background-color: #cfd8dc;}button:disabled { background-color: #eee; color: #aaa; cursor: auto;}button.clear { color: #888; margin-bottom: 12px;}
app-routing.module.ts
import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { DashboardComponent } from './dashboard/dashboard.component';import { HeroesComponent } from './heroes/heroes.component';import { HeroDetailComponent } from './hero-detail/hero-detail.component';const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: 'dashboard', component: DashboardComponent }, { path: 'detail/:id', component: HeroDetailComponent }, { path: 'heroes', component: HeroesComponent }];@NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ]})export class AppRoutingModule {}
dashboard.component.html
<h3>Top Heroes</h3><div class="grid grid-pad"> <a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}"> <div class="module hero"> <h4>{{hero.name}}</h4> </div> </a></div>
dashboard.component.ts
import { Component, OnInit } from '@angular/core';import { Hero } from '../hero';import { HeroService } from '../hero.service';@Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: [ './dashboard.component.css' ]})export class DashboardComponent implements OnInit { heroes: Hero[] = []; constructor(private heroService: HeroService) { } ngOnInit() { this.getHeroes(); } getHeroes(): void { this.heroService.getHeroes() .subscribe(heroes => this.heroes = heroes.slice(1, 5)); }}
dashboard.component.css
[class*='col-'] { float: left; padding-right: 20px; padding-bottom: 20px;}[class*='col-']:last-of-type { padding-right: 0;}a { text-decoration: none;}*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}h3 { text-align: center; margin-bottom: 0;}h4 { position: relative;}.grid { margin: 0;}.col-1-4 { width: 25%;}.module { padding: 20px; text-align: center; color: #eee; max-height: 120px; min-width: 120px; background-color: #607D8B; border-radius: 2px;}.module:hover { background-color: #EEE; cursor: pointer; color: #607d8b;}.grid-pad { padding: 10px 0;}.grid-pad > [class*='col-']:last-of-type { padding-right: 20px;}@media (max-width: 600px) { .module { font-size: 10px; max-height: 75px; }}@media (max-width: 1024px) { .grid { margin: 0; } .module { min-width: 60px; }}
hero-detail.component.css
label { display: inline-block; width: 3em; margin: .5em 0; color: #607D8B; font-weight: bold;}input { height: 2em; font-size: 1em; padding-left: .4em;}button { margin-top: 20px; font-family: Arial; background-color: #eee; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; cursor: hand;}button:hover { background-color: #cfd8dc;}button:disabled { background-color: #eee; color: #ccc; cursor: auto;}
阅读全文
0 0
- angular的hero例子(5)
- angular的hero例子(1)
- angular的hero例子(2)
- angular的hero例子(3)
- angular的hero例子(4)
- Angular入门-Hero Editor抽丝
- 使用angular完成TodoMVC的例子(1)
- ACM大牛(曾经的hero)
- angular js指令(directives)及其例子
- hero的动作效果
- Angular简单例子
- angular指令例子
- angular例子之ngFOr
- 神奇的angularJS——简单的angular例子
- 一个Angular的双向数据绑定的例子
- 神奇的angularJS——简单的angular例子
- Hero(Mariah Carey)
- hdu4310 Hero(贪心)
- 一篇清华博士的美赛心得 | 参加世界最牛数学建模竞赛是一种怎样的体验?
- TIOBE编程语言排行榜,Python遥遥领先
- php自带的函数获取ip等信息
- java 完美的单例模式
- ngrepeart重复
- angular的hero例子(5)
- [转]spring boot 在Eclipse上正常运行,打成jar包后能访问方法,无法访问jsp页面
- Ripple游戏水波模拟算法实现
- Mysql Workbench 创建函数总是提示语法错误
- 【XML】用途
- python 安装 MySQLdb模块
- Spring Boot:构建 Spring 应用程序的现代方式
- 动态变化的自定义Title
- 科普 | 知识图谱相关的名词解释