cargdev/angular
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

docs(aio): update migrated content from anguar.io

Browse Source
This commit is contained in:
Peter Bacon Darwin
2017-03-27 16:08:53 +01:00
committed by Pete Bacon Darwin
parent ff82756415
commit fd72fad8fd
1901 changed files with 20145 additions and 45127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
aio/content/examples/toh-3/app/app.component.1.html Normal file
View File

@ -0,0 +1,12 @@
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<!-- #docregion hero-detail-binding -->
<hero-detail [hero]="selectedHero"></hero-detail>
<!-- #enddocregion hero-detail-binding -->

8
aio/content/examples/toh-3/ts/src/app/hero-detail.component.ts → aio/content/examples/toh-3/app/hero-detail.component.1.ts
View File

@ -1,7 +1,6 @@
// #docplaster
// #docregion
// #docregion v1
import { Component, Input } from '@angular/core';
import { Component } from '@angular/core';
// #enddocregion v1
// #docregion hero-import
@ -10,7 +9,7 @@ import { Hero } from './hero';
// #docregion v1
@Component({
selector: 'my-hero-detail',
selector: 'hero-detail',
// #enddocregion v1
// #docregion template
template: `
@ -28,12 +27,9 @@ import { Hero } from './hero';
})
export class HeroDetailComponent {
// #enddocregion v1
// #docregion hero-input
@Input()
// #docregion hero
hero: Hero;
// #enddocregion hero
// #enddocregion hero-input
// #docregion v1
}
// #enddocregion v1

2
aio/content/examples/toh-3/e2e-spec.ts
View File

@ -128,6 +128,6 @@ function getPageElts() {
return {
heroes: element.all(by.css('my-app li')),
selected: element(by.css('my-app li.selected')),
heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div'))
heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
};
}

0
aio/content/examples/toh-3/ts/example-config.json → aio/content/examples/toh-3/example-config.json
View File

3
aio/content/examples/toh-3/ts/plnkr.json → aio/content/examples/toh-3/plnkr.json
View File

@ -3,7 +3,8 @@
"basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js"
"!**/*.js",
"!**/*.[1].*"
],
"tags": ["tutorial", "tour", "heroes"]
}

2
aio/content/examples/toh-3/ts/src/app/app.component.ts → aio/content/examples/toh-3/src/app/app.component.ts
View File

@ -31,7 +31,7 @@ const HEROES: Hero[] = [
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
<hero-detail [hero]="selectedHero"></hero-detail>
`,
// #enddocregion hero-detail-template
styles: [`

6
aio/content/examples/toh-3/ts/src/app/app.module.ts → aio/content/examples/toh-3/src/app/app.module.ts
View File

@ -3,22 +3,22 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppComponent } from './app.component';
// #docregion hero-detail-import
import { HeroDetailComponent } from './hero-detail.component';
// #enddocregion hero-detail-import
// #docregion declarations
@NgModule({
imports: [
BrowserModule,
FormsModule
],
// #docregion declarations
declarations: [
AppComponent,
HeroDetailComponent
],
// #enddocregion declarations
bootstrap: [ AppComponent ]
})
export class AppModule { }
// #enddocregion declarations

29
aio/content/examples/toh-3/src/app/hero-detail.component.ts Normal file
View File

@ -0,0 +1,29 @@
// #docregion
// #docregion import-input
import { Component, Input } from '@angular/core';
// #enddocregion import-input
import { Hero } from './hero';
// #docregion template
@Component({
selector: 'hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>
`
})
// #enddocregion template
// #docregion class
export class HeroDetailComponent {
// #docregion hero
@Input() hero: Hero;
// #enddocregion hero
}
// #enddocregion class

0
aio/content/examples/toh-3/ts/src/app/hero.ts → aio/content/examples/toh-3/src/app/hero.ts
View File

0
aio/content/examples/toh-3/ts/src/index.html → aio/content/examples/toh-3/src/index.html
View File

0
aio/content/examples/toh-3/ts/src/main.ts → aio/content/examples/toh-3/src/main.ts
View File

318
aio/content/examples/toh-3/ts/plnkr.no-link.html
View File

@ -1,318 +0,0 @@
<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
import { Hero } from './hero';
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' }
];
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class=&quot;heroes&quot;>
<li *ngFor=&quot;let hero of heroes&quot;
[class.selected]=&quot;hero === selectedHero&quot;
(click)=&quot;onSelect(hero)&quot;>
<span class=&quot;badge&quot;>{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<my-hero-detail [hero]=&quot;selectedHero&quot;></my-hero-detail>
`,
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.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;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
HeroDetailComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero-detail.component.ts]" value="import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'my-hero-detail',
template: `
<div *ngIf=&quot;hero&quot;>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]=&quot;hero.name&quot; placeholder=&quot;name&quot;/>
</div>
</div>
`
})
export class HeroDetailComponent {
@Input()
hero: Hero;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[app/hero.ts]" value="export class Hero {
id: number;
name: string;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
a {
cursor: pointer;
cursor: hand;
}
button {
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;
}
/* Navigation link styles */
nav a {
padding: 5px 10px;
text-decoration: none;
margin-right: 10px;
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;
}
/* items class */
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.items li.selected {
background-color: #CFD8DC;
color: white;
}
.items li.selected:hover {
background-color: #BBD8DC;
}
.items .text {
position: relative;
top: -3px;
}
.items .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;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
<html>
<head>
<title>Angular Tour of Heroes</title>
<script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
<meta charset=&quot;UTF-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
<!-- Polyfills -->
<script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
<script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
<script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
<script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="tutorial"><input type="hidden" name="tags[3]" value="tour"><input type="hidden" name="tags[4]" value="heroes"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Tour of Heroes: Part 3"></form><script>document.getElementById("mainForm").submit();</script></body></html>