597 lines
49 KiB
HTML
597 lines
49 KiB
HTML
|
<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-routing.module.ts]" value="import { NgModule } from '@angular/core';
|
||
|
|
import { Routes, RouterModule } from '@angular/router';
|
||
|
|
|
||
|
|
import { MovieListComponent } from './movie-list.component';
|
||
|
|
|
||
|
|
const routes: Routes = [
|
||
|
|
{ path: '', redirectTo: '/movies', pathMatch: 'full' },
|
||
|
|
{ path: 'movies', component: MovieListComponent }
|
||
|
|
];
|
||
|
|
|
||
|
|
@NgModule({
|
||
|
|
imports: [RouterModule.forRoot(routes)],
|
||
|
|
exports: [RouterModule]
|
||
|
|
})
|
||
|
|
export class AppRoutingModule {}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
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.component.ts]" value="import { Component } from '@angular/core';
|
||
|
|
|
||
|
|
import { MovieService } from './movie.service';
|
||
|
|
import { IMovie } from './movie';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
moduleId: module.id,
|
||
|
|
selector: 'my-app',
|
||
|
|
templateUrl: './app.component.html',
|
||
|
|
styleUrls: [ './app.component.css' ],
|
||
|
|
providers: [ MovieService ]
|
||
|
|
})
|
||
|
|
export class AppComponent {
|
||
|
|
|
||
|
|
angularDocsUrl = 'https://angular.io/';
|
||
|
|
colorPreference = 'red';
|
||
|
|
eventType = '<not clicked yet>';
|
||
|
|
isActive = true;
|
||
|
|
isImportant = true;
|
||
|
|
movie: IMovie = null;
|
||
|
|
movies: IMovie[] = [];
|
||
|
|
showImage = true;
|
||
|
|
title: string = 'AngularJS to Angular Quick Ref Cookbook';
|
||
|
|
toggleImage(event: UIEvent) {
|
||
|
|
this.showImage = !this.showImage;
|
||
|
|
this.eventType = (event && event.type) || 'not provided';
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor(movieService: MovieService) {
|
||
|
|
this.movies = movieService.getMovies();
|
||
|
|
this.movie = this.movies[0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
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 { MovieListComponent } from './movie-list.component';
|
||
|
|
import { AppRoutingModule } from './app-routing.module';
|
||
|
|
|
||
|
|
@NgModule({
|
||
|
|
imports: [
|
||
|
|
BrowserModule,
|
||
|
|
FormsModule,
|
||
|
|
AppRoutingModule
|
||
|
|
],
|
||
|
|
declarations: [
|
||
|
|
AppComponent,
|
||
|
|
MovieListComponent
|
||
|
|
],
|
||
|
|
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/date.pipe.ts]" value="import { Injectable, Pipe, PipeTransform } from '@angular/core';
|
||
|
|
import { DatePipe } from '@angular/common';
|
||
|
|
|
||
|
|
@Injectable()
|
||
|
|
@Pipe({name: 'date', pure: true})
|
||
|
|
export class StringSafeDatePipe extends DatePipe implements PipeTransform {
|
||
|
|
transform(value: any, format: string): string {
|
||
|
|
value = typeof value === 'string' ?
|
||
|
|
Date.parse(value) : value;
|
||
|
|
return super.transform(value, format);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
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/movie-list.component.ts]" value="/* tslint:disable:no-unused-variable */
|
||
|
|
import { Component } from '@angular/core';
|
||
|
|
import { IMovie } from './movie';
|
||
|
|
import { MovieService } from './movie.service';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
moduleId: module.id,
|
||
|
|
selector: 'movie-list',
|
||
|
|
templateUrl: './movie-list.component.html',
|
||
|
|
styleUrls: [ './movie-list.component.css' ],
|
||
|
|
})
|
||
|
|
export class MovieListComponent {
|
||
|
|
favoriteHero: string;
|
||
|
|
showImage: boolean = false;
|
||
|
|
movies: IMovie[];
|
||
|
|
|
||
|
|
constructor(movieService: MovieService) {
|
||
|
|
this.movies = movieService.getMovies();
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleImage(): void {
|
||
|
|
this.showImage = !this.showImage;
|
||
|
|
}
|
||
|
|
|
||
|
|
checkMovieHero(value: string): boolean {
|
||
|
|
return this.movies.filter(movie => movie.hero === value).length > 0 ;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
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/movie.service.ts]" value="import { Injectable } from '@angular/core';
|
||
|
|
|
||
|
|
import { IMovie } from './movie';
|
||
|
|
|
||
|
|
@Injectable()
|
||
|
|
export class MovieService {
|
||
|
|
getMovies(): IMovie[] {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
hero: 'Celeritas',
|
||
|
|
imageurl: 'images/hero.png',
|
||
|
|
movieId: 1,
|
||
|
|
mpaa: 'pg-13',
|
||
|
|
releaseDate: '2015-12-19T00:00:00',
|
||
|
|
title: 'Celeritas Reigns',
|
||
|
|
price: 12.95,
|
||
|
|
starRating: 4.925,
|
||
|
|
approvalRating: .97
|
||
|
|
},
|
||
|
|
{
|
||
|
|
hero: 'Mr. Nice',
|
||
|
|
imageurl: 'images/villain.png',
|
||
|
|
movieId: 2,
|
||
|
|
mpaa: 'pg-13',
|
||
|
|
releaseDate: '2015-12-18T00:00:00',
|
||
|
|
title: 'No More Mr. Nice Guy',
|
||
|
|
price: 14.95,
|
||
|
|
starRating: 4.6,
|
||
|
|
approvalRating: .94
|
||
|
|
},
|
||
|
|
{
|
||
|
|
hero: 'Angular',
|
||
|
|
imageurl: 'images/ng-logo.png',
|
||
|
|
movieId: 3,
|
||
|
|
mpaa: 'pg-13',
|
||
|
|
releaseDate: '2015-12-17T00:00:00',
|
||
|
|
title: 'Angular to the Rescue',
|
||
|
|
price: 15.95,
|
||
|
|
starRating: 4.98,
|
||
|
|
approvalRating: .9995
|
||
|
|
}
|
||
|
|
];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
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/movie.ts]" value="/* Defines the movie entity */
|
||
|
|
export interface IMovie {
|
||
|
|
approvalRating: number;
|
||
|
|
hero: string;
|
||
|
|
imageurl: string;
|
||
|
|
movieId: number;
|
||
|
|
mpaa: string;
|
||
|
|
price: number;
|
||
|
|
releaseDate: string;
|
||
|
|
starRating: number;
|
||
|
|
title: 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[app/app.component.css]" value=".active {font-style: italic;}
|
||
|
|
.shazam {font-weight: bold;}
|
||
|
|
|
||
|
|
img {height: 100px;}
|
||
|
|
|
||
|
|
table td {
|
||
|
|
padding: 4px;
|
||
|
|
border: 1px solid #e0e0e0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
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/movie-list.component.css]" value="div {
|
||
|
|
font-family:Arial, Helvetica, sans-serif;
|
||
|
|
margin:20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
font-family:Arial, Helvetica, sans-serif;
|
||
|
|
color:#666;
|
||
|
|
font-size:14px;
|
||
|
|
text-shadow: 1px 1px 0 #fff;
|
||
|
|
margin:20px;
|
||
|
|
border:#ccc 1px solid;
|
||
|
|
|
||
|
|
-moz-border-radius:3px;
|
||
|
|
-webkit-border-radius:3px;
|
||
|
|
border-radius:3px;
|
||
|
|
}
|
||
|
|
table th {
|
||
|
|
padding:21px 25px 22px 25px;
|
||
|
|
border-top:1px solid #fafafa;
|
||
|
|
border-bottom:1px solid #e0e0e0;
|
||
|
|
border-left: 1px solid #e0e0e0;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
table th:first-child {
|
||
|
|
text-align: left;
|
||
|
|
padding-left:20px;
|
||
|
|
border-left: 0;
|
||
|
|
}
|
||
|
|
table tr {
|
||
|
|
text-align: center;
|
||
|
|
padding-left:20px;
|
||
|
|
}
|
||
|
|
table td:first-child {
|
||
|
|
text-align: left;
|
||
|
|
padding-left:20px;
|
||
|
|
border-left: 0;
|
||
|
|
}
|
||
|
|
table td {
|
||
|
|
padding:18px;
|
||
|
|
border-top: 1px solid #ffffff;
|
||
|
|
border-bottom:1px solid #e0e0e0;
|
||
|
|
border-left: 1px solid #e0e0e0;
|
||
|
|
}
|
||
|
|
table tr:last-child td {
|
||
|
|
border-bottom:0;
|
||
|
|
}
|
||
|
|
table tr:last-child td:first-child {
|
||
|
|
-moz-border-radius-bottomleft:3px;
|
||
|
|
-webkit-border-bottom-left-radius:3px;
|
||
|
|
border-bottom-left-radius:3px;
|
||
|
|
}
|
||
|
|
table tr:last-child td:last-child {
|
||
|
|
-moz-border-radius-bottomright:3px;
|
||
|
|
-webkit-border-bottom-right-radius:3px;
|
||
|
|
border-bottom-right-radius:3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
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[app/app.component.html]" value="<h1>{{title}}</h1>
|
||
|
|
|
||
|
|
<h3>Routed Movies</h3>
|
||
|
|
<nav>
|
||
|
|
<a [routerLink]="['/movies']">Movies</a>
|
||
|
|
</nav>
|
||
|
|
<router-outlet></router-outlet>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h1>Example Snippets</h1>
|
||
|
|
|
||
|
|
<div [ngClass]="{active: isActive}">
|
||
|
|
[ngClass] active
|
||
|
|
</div>
|
||
|
|
<div [ngClass]="{active: isActive,
|
||
|
|
shazam: isImportant}">
|
||
|
|
[ngClass] active and boldly important
|
||
|
|
</div>
|
||
|
|
<div [class.active]="isActive">
|
||
|
|
[class.active]
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<a [href]="angularDocsUrl">Angular Docs</a>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<div>
|
||
|
|
<button (click)="toggleImage()">
|
||
|
|
Image Toggle #1</button>
|
||
|
|
<button (click)="toggleImage($event)">
|
||
|
|
Image Toggle #2</button>
|
||
|
|
<p>Image toggle event type was {{eventType}}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<div *ngIf="showImage">
|
||
|
|
<img [src]="movie.imageurl">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<div [ngStyle]="{color: colorPreference}">
|
||
|
|
color preference #1
|
||
|
|
</div>
|
||
|
|
<div [style.color]="colorPreference">
|
||
|
|
color preference #2
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Movie as JSON</h3>
|
||
|
|
<pre>{{movie | json}}</pre>
|
||
|
|
|
||
|
|
<h3>Movie Titles via local variable</h3>
|
||
|
|
<table>
|
||
|
|
<tr *ngFor="let movie of movies">
|
||
|
|
<td>{{movie.title}}</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Sliced Movies with pipes</h3>
|
||
|
|
<table>
|
||
|
|
<tr *ngFor="let movie of movies | slice:0:2">
|
||
|
|
|
||
|
|
<td>{{movie.title | uppercase}}</td>
|
||
|
|
|
||
|
|
<td>{{movie.title | lowercase}}</td>
|
||
|
|
|
||
|
|
<td>{{movie.releaseDate | date}}</td>
|
||
|
|
|
||
|
|
<td>{{movie.price | currency:'USD':true}}</td>
|
||
|
|
|
||
|
|
<td>{{movie.starRating | number}}</td>
|
||
|
|
<td>{{movie.starRating | number:'1.1-2'}}</td>
|
||
|
|
<td>{{movie.approvalRating | percent: '1.0-2'}}</td>
|
||
|
|
|
||
|
|
</tr></table>
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
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/movie-list.component.html]" value="<!-- Filter the Movie Title -->
|
||
|
|
<div>
|
||
|
|
<h2>Movie List</h2>
|
||
|
|
<div>Who is your favorite hero?</div>
|
||
|
|
<div>
|
||
|
|
<input [(ngModel)]="favoriteHero" />
|
||
|
|
|
||
|
|
<span [ngSwitch]="favoriteHero &&
|
||
|
|
checkMovieHero(favoriteHero)">
|
||
|
|
<p *ngSwitchCase="true">
|
||
|
|
Excellent choice!
|
||
|
|
</p>
|
||
|
|
<p *ngSwitchCase="false">
|
||
|
|
No movie, sorry!
|
||
|
|
</p>
|
||
|
|
<p *ngSwitchDefault>
|
||
|
|
Please enter your favorite hero.
|
||
|
|
</p>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 [hidden]="!favoriteHero">
|
||
|
|
Your favorite hero is: {{favoriteHero}}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<table *ngIf="movies.length">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>
|
||
|
|
<button (click)="toggleImage()">
|
||
|
|
{{showImage ? "Hide" : "Show"}} Poster
|
||
|
|
</button>
|
||
|
|
</th>
|
||
|
|
<th>Title</th>
|
||
|
|
<th>Hero</th>
|
||
|
|
<th>Release Date</th>
|
||
|
|
<th>Rating</th>
|
||
|
|
<th>Price</th>
|
||
|
|
<th>Star rating</th>
|
||
|
|
<th>Approval rating</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr *ngFor="let movie of movies">
|
||
|
|
<td>
|
||
|
|
<img [hidden]="!showImage || !movie.imageurl"
|
||
|
|
[style.height.px]="50"
|
||
|
|
[style.margin.px]="2"
|
||
|
|
[src]="movie.imageurl"
|
||
|
|
[title]="movie.title">
|
||
|
|
</td>
|
||
|
|
<td>{{movie.title}}</td>
|
||
|
|
<td>{{movie.hero}}</td>
|
||
|
|
<td>{{movie.releaseDate | date}}</td>
|
||
|
|
<td>{{movie.mpaa | uppercase}}</td>
|
||
|
|
<td>{{movie.price | currency:'USD':true}}</td>
|
||
|
|
<td>{{movie.starRating | number:'1.1-2'}}</td>
|
||
|
|
<td>{{movie.approvalRating | percent: '1.0-0'}}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
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>
|
||
|
|
<script>document.write('<base href="' + document.location + '" />');</script>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>AngularJS to Angular Quick Reference</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
|
||
|
|
<!-- Polyfills -->
|
||
|
|
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
|
||
|
|
|
||
|
|
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
|
||
|
|
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
|
||
|
|
|
||
|
|
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
|
||
|
|
<script>
|
||
|
|
System.import('main.js').catch(function(err){ console.error(err); });
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<my-app>Loading app...</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="files[images/hero.base64.png]" value="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
|