Skip to content

Commit cb4055b

Browse files
houkohouko
committed
英雄编辑器
1 parent 5d88ab0 commit cb4055b

31 files changed

+411
-160
lines changed

Diff for: ‎index.html

+24-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,37 @@
22
<html lang="zh-CN">
33
<head>
44
<meta charset="utf-8">
5-
<title>witdor——纬度空间后台管理系统</title>
6-
<link rel="icon" href="images/logo.png"/>
5+
<title>angular2-tour-of-heroes</title>
76
<base href="/">
7+
<script>document.write('<base href="' + document.location + '" />');</script>
88
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">
99
<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
1010
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
1111
{% for (var css in o.htmlWebpackPlugin.files.css) { %}
1212
<link href=".{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
1313
{% } %}
14+
<style>
15+
h1 {
16+
color: #369;
17+
font-family: Arial, Helvetica, sans-serif;
18+
font-size: 250%;
19+
}
20+
h2, h3 {
21+
color: #444;
22+
font-family: Arial, Helvetica, sans-serif;
23+
font-weight: lighter;
24+
}
25+
body {
26+
margin: 2em;
27+
}
28+
body, input[text], button {
29+
color: #888;
30+
font-family: Cambria, Georgia;
31+
}
32+
* {
33+
font-family: Arial, Helvetica, sans-serif;
34+
}
35+
</style>
1436
</head>
1537
<body>
1638

Diff for: ‎src/app.html

+13-15
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
<div class="container">
2-
<div class="row">
3-
<!-- 左侧导航 -->
4-
<div class="col-md-2">
5-
<ul class="nav nav-list">
6-
<li class="list-group-item"><a [routerLink]="['']">后台首页<i class="glyphicon glyphicon-chevron-right"></i></a></li>
7-
<li class="list-group-item"><a [routerLink]="['admin']">权限管理 <i class="glyphicon glyphicon-chevron-right"></i></a></li>
8-
</ul>
9-
</div>
10-
<!-- 右侧内容 -->
11-
<div class="col-md-10">
12-
<router-outlet></router-outlet>
13-
</div>
14-
</div>
15-
</div>
1+
<nav class="navbar navbar-light bg-faded">
2+
<a class="navbar-brand" [routerLink]="['Dashboard']">{{title}}</a>
3+
<ul class="nav navbar-nav">
4+
<li class="nav-item active">
5+
<a class="nav-link" [routerLink]="['Dashboard']">Top Heroes<span class="sr-only">(current)</span></a>
6+
</li>
7+
<li class="nav-item">
8+
<a class="nav-link" [routerLink]="['Heroes']">My Heroes</a>
9+
</li>
10+
</ul>
11+
</nav>
12+
<hr>
13+
<router-outlet></router-outlet>

Diff for: ‎src/app.routes.ts

-12
This file was deleted.

Diff for: ‎src/app.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
h1 {
2+
font-size: 1.2em;
3+
color: #999;
4+
margin-bottom: 0;
5+
}
6+
h2 {
7+
font-size: 2em;
8+
margin-top: 0;
9+
padding-top: 0;
10+
}
11+
nav a {
12+
padding: 5px 10px;
13+
text-decoration: none;
14+
margin-top: 10px;
15+
display: inline-block;
16+
background-color: #eee;
17+
border-radius: 4px;
18+
}
19+
nav a:visited, a:link {
20+
color: #607D8B;
21+
}
22+
nav a:hover {
23+
color: #039be5;
24+
background-color: #CFD8DC;
25+
}
26+
nav a.router-link-active {
27+
color: #039be5;
28+
}

Diff for: ‎src/app.ts

+35-23
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,43 @@
1-
/*
2-
* Angular
3-
*/
4-
import {Component} from '@angular/core';
5-
import {bootstrap} from '@angular/platform-browser-dynamic';
6-
import { ROUTER_DIRECTIVES } from '@angular/router';
7-
import { BasicComponent} from './component/Demo/Basic';
8-
import { APP_ROUTER_PROVIDERS} from './app.routes';
9-
import { HTTP_PROVIDERS } from '@angular/http';
1+
import { Component } from '@angular/core';
2+
import { bootstrap } from '@angular/platform-browser-dynamic';
3+
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
104

5+
import { DashboardComponent } from './component/DashBoard/DashBoard';
6+
import { HeroesComponent } from './component/Heroes/Heroes';
7+
import { HeroDetailComponent } from './component/HeroDetail/HeroDetail';
8+
import { HeroService } from './service/HeroService';
119

1210
@Component({
1311
selector: 'app',
14-
directives: [
15-
ROUTER_DIRECTIVES,
16-
BasicComponent
17-
],
18-
template: require('./app.html')
12+
template: require('./app.html'),
13+
styles: [require('./app.scss')],
14+
directives: [ROUTER_DIRECTIVES],
15+
providers: [
16+
ROUTER_PROVIDERS,
17+
HeroService
18+
]
1919
})
20-
20+
@RouteConfig([
21+
{
22+
path: '/dashboard',
23+
name: 'Dashboard',
24+
component: DashboardComponent,
25+
useAsDefault: true
26+
},
27+
{
28+
path: '/detail/:id',
29+
name: 'HeroDetail',
30+
component: HeroDetailComponent
31+
},
32+
{
33+
path: '/heroes',
34+
name: 'Heroes',
35+
component: HeroesComponent
36+
}
37+
])
2138
export class AppComponent {
22-
title: 'Tour of Heros';
23-
hero:'windstom';
39+
title:string = 'Tour of Heroes';
2440
}
2541

26-
bootstrap(AppComponent, [
27-
APP_ROUTER_PROVIDERS,
28-
HTTP_PROVIDERS
29-
]).catch((err:any) => {
30-
console.log(err);
31-
});
42+
43+
bootstrap(AppComponent);

Diff for: ‎src/component/DashBoard/DashBoard.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<h3>Top Heroes</h3>
2+
<div class="grid grid-pad">
3+
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
4+
<div class="module hero">
5+
<h4>{{hero.name}}</h4>
6+
</div>
7+
</div>
8+
</div>

Diff for: ‎src/component/DashBoard/DashBoard.scss

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
[class*='col-'] {
2+
float: left;
3+
}
4+
*, *:after, *:before {
5+
-webkit-box-sizing: border-box;
6+
-moz-box-sizing: border-box;
7+
box-sizing: border-box;
8+
}
9+
h3 {
10+
text-align: center; margin-bottom: 0;
11+
}
12+
[class*='col-'] {
13+
padding-right: 20px;
14+
padding-bottom: 20px;
15+
}
16+
[class*='col-']:last-of-type {
17+
padding-right: 0;
18+
}
19+
.grid {
20+
margin: 0;
21+
}
22+
.col-1-4 {
23+
width: 25%;
24+
}
25+
.module {
26+
padding: 20px;
27+
text-align: center;
28+
color: #eee;
29+
max-height: 120px;
30+
min-width: 120px;
31+
background-color: #607D8B;
32+
border-radius: 2px;
33+
}
34+
h4 {
35+
position: relative;
36+
}
37+
.module:hover {
38+
background-color: #EEE;
39+
cursor: pointer;
40+
color: #607d8b;
41+
}
42+
.grid-pad {
43+
padding: 10px 0;
44+
}
45+
.grid-pad > [class*='col-']:last-of-type {
46+
padding-right: 20px;
47+
}
48+
@media (max-width: 600px) {
49+
.module {
50+
font-size: 10px;
51+
max-height: 75px; }
52+
}
53+
@media (max-width: 1024px) {
54+
.grid {
55+
margin: 0;
56+
}
57+
.module {
58+
min-width: 60px;
59+
}
60+
}

Diff for: ‎src/component/DashBoard/DashBoard.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router-deprecated';
3+
4+
import { Hero } from './../../model/Hero';
5+
import { HeroService } from './../../service/HeroService';
6+
7+
@Component({
8+
selector: 'my-dashboard',
9+
template: require('./DashBoard.html'),
10+
styles:[require('./DashBoard.scss')]
11+
})
12+
export class DashboardComponent implements OnInit {
13+
14+
heroes: Hero[] = [];
15+
16+
constructor(
17+
private router: Router,
18+
private heroService: HeroService) {
19+
}
20+
21+
ngOnInit():void {
22+
this.heroService.getHeroes()
23+
.then((heroes:Hero[]) => this.heroes = heroes.slice(1, 5));
24+
}
25+
26+
gotoDetail(hero: Hero):void {
27+
let link:any = ['HeroDetail', { id: hero.id }];
28+
this.router.navigate(link);
29+
}
30+
}

Diff for: ‎src/component/Demo/Basic.html

-5
This file was deleted.

Diff for: ‎src/component/Demo/Basic.png

-7.3 KB
Binary file not shown.

Diff for: ‎src/component/Demo/Basic.scss

-3
This file was deleted.

Diff for: ‎src/component/Demo/Basic.ts

-19
This file was deleted.

Diff for: ‎src/component/Demo2/Basic.html

-5
This file was deleted.

Diff for: ‎src/component/Demo2/Basic.png

-7.3 KB
Binary file not shown.

Diff for: ‎src/component/Demo2/Basic.scss

-3
This file was deleted.

Diff for: ‎src/component/Demo2/Basic.ts

-19
This file was deleted.

Diff for: ‎src/component/HeroDetail/HeroDetail.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div *ngIf="hero">
2+
<h2>{{hero.name}} details!</h2>
3+
<div>
4+
<label>id: </label>{{hero.id}}</div>
5+
<div>
6+
<label>name: </label>
7+
<input [(ngModel)]="hero.name" placeholder="name" />
8+
</div>
9+
<button (click)="goBack()" class="btn btn-primary">Back</button>
10+
</div>

Diff for: ‎src/component/HeroDetail/HeroDetail.scss

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
label {
2+
display: inline-block;
3+
width: 3em;
4+
margin: .5em 0;
5+
color: #607D8B;
6+
font-weight: bold;
7+
}
8+
input {
9+
height: 2em;
10+
font-size: 1em;
11+
padding-left: .4em;
12+
}
13+
button {
14+
margin-top: 20px;
15+
font-family: Arial;
16+
background-color: #eee;
17+
border: none;
18+
padding: 5px 10px;
19+
border-radius: 4px;
20+
cursor: pointer; cursor: hand;
21+
}
22+
button:hover {
23+
background-color: #cfd8dc;
24+
}
25+
button:disabled {
26+
background-color: #eee;
27+
color: #ccc;
28+
cursor: auto;
29+
}

0 commit comments

Comments
 (0)