806 lines
58 KiB
HTML
806 lines
58 KiB
HTML
|
<html lang="en"><head></head><body>
|
||
|
|
<form id="mainForm" method="post" action="https://run.stackblitz.com/api/angular/v1?file=src/app/app.component.html" target="_self"><input type="hidden" name="files[src/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 Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/app/app.component.ts]" value="import { Component } from '@angular/core';
|
||
|
|
|
||
|
|
import { MovieService } from './movie.service';
|
||
|
|
import { IMovie } from './movie';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-root',
|
||
|
|
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 = '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 Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/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 Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/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({
|
||
|
|
selector: 'app-movie-list',
|
||
|
|
templateUrl: './movie-list.component.html',
|
||
|
|
styleUrls: [ './movie-list.component.css' ],
|
||
|
|
})
|
||
|
|
export class MovieListComponent {
|
||
|
|
favoriteHero: string;
|
||
|
|
showImage = 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 Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/app/movie.service.ts]" value="import { Injectable } from '@angular/core';
|
||
|
|
|
||
|
|
import { IMovie } from './movie';
|
||
|
|
|
||
|
|
@Injectable()
|
||
|
|
export class MovieService {
|
||
|
|
getMovies(): IMovie[] {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
hero: 'Celeritas',
|
||
|
|
imageurl: 'assets/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: 'Dr Nice',
|
||
|
|
imageurl: 'assets/images/villain.png',
|
||
|
|
movieId: 2,
|
||
|
|
mpaa: 'pg-13',
|
||
|
|
releaseDate: '2015-12-18T00:00:00',
|
||
|
|
title: 'No More Dr Nice',
|
||
|
|
price: 14.95,
|
||
|
|
starRating: 4.6,
|
||
|
|
approvalRating: .94
|
||
|
|
},
|
||
|
|
{
|
||
|
|
hero: 'Angular',
|
||
|
|
imageurl: 'assets/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 Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/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 Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/environments/environment.prod.ts]" value="export const environment = {
|
||
|
|
production: true
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
Copyright Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/environments/environment.ts]" value="// This file can be replaced during build by using the `fileReplacements` array.
|
||
|
|
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||
|
|
// The list of file replacements can be found in `angular.json`.
|
||
|
|
|
||
|
|
export const environment = {
|
||
|
|
production: false
|
||
|
|
};
|
||
|
|
|
||
|
|
/*
|
||
|
|
* For easier debugging in development mode, you can import the following file
|
||
|
|
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||
|
|
*
|
||
|
|
* This import should be commented out in production mode because it will have a negative impact
|
||
|
|
* on performance if an error is thrown.
|
||
|
|
*/
|
||
|
|
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
Copyright Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/main.ts]" value="import { enableProdMode } from '@angular/core';
|
||
|
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||
|
|
|
||
|
|
import { AppModule } from './app/app.module';
|
||
|
|
import { environment } from './environments/environment';
|
||
|
|
|
||
|
|
if (environment.production) {
|
||
|
|
enableProdMode();
|
||
|
|
}
|
||
|
|
|
||
|
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
Copyright Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/polyfills.ts]" value="/**
|
||
|
|
* This file includes polyfills needed by Angular and is loaded before the app.
|
||
|
|
* You can add your own extra polyfills to this file.
|
||
|
|
*
|
||
|
|
* This file is divided into 2 sections:
|
||
|
|
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||
|
|
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||
|
|
* file.
|
||
|
|
*
|
||
|
|
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||
|
|
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||
|
|
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||
|
|
*
|
||
|
|
* Learn more in https://angular.io/guide/browser-support
|
||
|
|
*/
|
||
|
|
|
||
|
|
/***************************************************************************************************
|
||
|
|
* BROWSER POLYFILLS
|
||
|
|
*/
|
||
|
|
|
||
|
|
/** IE11 requires the following for NgClass support on SVG elements */
|
||
|
|
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Web Animations `@angular/platform-browser/animations`
|
||
|
|
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||
|
|
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||
|
|
*/
|
||
|
|
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||
|
|
|
||
|
|
/**
|
||
|
|
* By default, zone.js will patch all possible macroTask and DomEvents
|
||
|
|
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||
|
|
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||
|
|
* will put import in the top of bundle, so user need to create a separate file
|
||
|
|
* in this directory (for example: zone-flags.ts), and put the following flags
|
||
|
|
* into that file, and then add the following code before importing zone.js.
|
||
|
|
* import './zone-flags';
|
||
|
|
*
|
||
|
|
* The flags allowed in zone-flags.ts are listed here.
|
||
|
|
*
|
||
|
|
* The following flags will work for all browsers.
|
||
|
|
*
|
||
|
|
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch
|
||
|
|
* requestAnimationFrame
|
||
|
|
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||
|
|
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch
|
||
|
|
* specified eventNames
|
||
|
|
*
|
||
|
|
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||
|
|
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||
|
|
*
|
||
|
|
* (window as any).__Zone_enable_cross_context_check = true;
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/***************************************************************************************************
|
||
|
|
* Zone JS is required by default for Angular itself.
|
||
|
|
*/
|
||
|
|
import 'zone.js'; // Included with Angular CLI.
|
||
|
|
|
||
|
|
/***************************************************************************************************
|
||
|
|
* APPLICATION IMPORTS
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
Copyright Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/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 Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/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;
|
||
|
|
|
||
|
|
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 {
|
||
|
|
border-bottom-left-radius:3px;
|
||
|
|
}
|
||
|
|
table tr:last-child td:last-child {
|
||
|
|
border-bottom-right-radius:3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
Copyright Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/styles.css]" value="/* Global Styles */
|
||
|
|
* {
|
||
|
|
font-family: Arial, Helvetica, sans-serif;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: #264D73;
|
||
|
|
font-size: 2.5rem;
|
||
|
|
}
|
||
|
|
h2, h3 {
|
||
|
|
color: #444;
|
||
|
|
font-weight: lighter;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
padding: .5rem;
|
||
|
|
max-width: 1000px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
@media (min-width: 600px) {
|
||
|
|
body {
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
body, input[text] {
|
||
|
|
color: #333;
|
||
|
|
font-family: Cambria, Georgia, serif;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
background-color: #eee;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
color: black;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
padding: 1rem;
|
||
|
|
margin-right: 1rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
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: #e8e8e8;
|
||
|
|
color: #3d3d3d;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a:hover {
|
||
|
|
color: white;
|
||
|
|
background-color: #42545C;
|
||
|
|
}
|
||
|
|
nav a.active {
|
||
|
|
background-color: black;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
hr {
|
||
|
|
margin: 1.5rem 0;
|
||
|
|
}
|
||
|
|
input[type="text"] {
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
padding: .5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
Copyright Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
*/"><input type="hidden" name="files[src/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 Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
-->"><input type="hidden" name="files[src/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 Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
-->"><input type="hidden" name="files[src/index.html]" value="<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<base href="/">
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>AngularJS to Angular Quick Reference</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<app-root></app-root>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Copyright Google LLC. All Rights Reserved.
|
||
|
|
Use of this source code is governed by an MIT-style license that
|
||
|
|
can be found in the LICENSE file at https://angular.io/license
|
||
|
|
-->"><input type="hidden" name="files[angular.json]" value="{
|
||
|
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||
|
|
"version": 1,
|
||
|
|
"newProjectRoot": "projects",
|
||
|
|
"projects": {
|
||
|
|
"angular.io-example": {
|
||
|
|
"projectType": "application",
|
||
|
|
"schematics": {
|
||
|
|
"@schematics/angular:application": {
|
||
|
|
"strict": true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"root": "",
|
||
|
|
"sourceRoot": "src",
|
||
|
|
"prefix": "app",
|
||
|
|
"architect": {
|
||
|
|
"build": {
|
||
|
|
"builder": "@angular-devkit/build-angular:browser",
|
||
|
|
"options": {
|
||
|
|
"outputPath": "dist",
|
||
|
|
"index": "src/index.html",
|
||
|
|
"main": "src/main.ts",
|
||
|
|
"polyfills": "src/polyfills.ts",
|
||
|
|
"tsConfig": "tsconfig.app.json",
|
||
|
|
"aot": true,
|
||
|
|
"assets": [
|
||
|
|
"src/favicon.ico",
|
||
|
|
"src/assets"
|
||
|
|
],
|
||
|
|
"styles": [
|
||
|
|
"src/styles.css"
|
||
|
|
],
|
||
|
|
"scripts": []
|
||
|
|
},
|
||
|
|
"configurations": {
|
||
|
|
"production": {
|
||
|
|
"fileReplacements": [
|
||
|
|
{
|
||
|
|
"replace": "src/environments/environment.ts",
|
||
|
|
"with": "src/environments/environment.prod.ts"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"optimization": true,
|
||
|
|
"outputHashing": "all",
|
||
|
|
"sourceMap": false,
|
||
|
|
"namedChunks": false,
|
||
|
|
"extractLicenses": true,
|
||
|
|
"vendorChunk": false,
|
||
|
|
"buildOptimizer": true,
|
||
|
|
"budgets": [
|
||
|
|
{
|
||
|
|
"type": "initial",
|
||
|
|
"maximumWarning": "500kb",
|
||
|
|
"maximumError": "1mb"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"type": "anyComponentStyle",
|
||
|
|
"maximumWarning": "2kb",
|
||
|
|
"maximumError": "4kb"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"serve": {
|
||
|
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||
|
|
"options": {
|
||
|
|
"browserTarget": "angular.io-example:build"
|
||
|
|
},
|
||
|
|
"configurations": {
|
||
|
|
"production": {
|
||
|
|
"browserTarget": "angular.io-example:build:production"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"extract-i18n": {
|
||
|
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||
|
|
"options": {
|
||
|
|
"browserTarget": "angular.io-example:build"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"test": {
|
||
|
|
"builder": "@angular-devkit/build-angular:karma",
|
||
|
|
"options": {
|
||
|
|
"main": "src/test.ts",
|
||
|
|
"polyfills": "src/polyfills.ts",
|
||
|
|
"tsConfig": "tsconfig.spec.json",
|
||
|
|
"karmaConfig": "karma.conf.js",
|
||
|
|
"assets": [
|
||
|
|
"src/favicon.ico",
|
||
|
|
"src/assets"
|
||
|
|
],
|
||
|
|
"styles": [
|
||
|
|
"src/styles.css"
|
||
|
|
],
|
||
|
|
"scripts": []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"lint": {
|
||
|
|
"builder": "@angular-devkit/build-angular:tslint",
|
||
|
|
"options": {
|
||
|
|
"tsConfig": [
|
||
|
|
"tsconfig.app.json",
|
||
|
|
"tsconfig.spec.json",
|
||
|
|
"e2e/tsconfig.json"
|
||
|
|
],
|
||
|
|
"exclude": [
|
||
|
|
"**/node_modules/**"
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"e2e": {
|
||
|
|
"builder": "@angular-devkit/build-angular:protractor",
|
||
|
|
"options": {
|
||
|
|
"protractorConfig": "e2e/protractor.conf.js",
|
||
|
|
"devServerTarget": "angular.io-example:serve"
|
||
|
|
},
|
||
|
|
"configurations": {
|
||
|
|
"production": {
|
||
|
|
"devServerTarget": "angular.io-example:serve:production"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"defaultProject": "angular.io-example"
|
||
|
|
}
|
||
|
|
"><input type="hidden" name="files[tsconfig.json]" value="{
|
||
|
|
"compileOnSave": false,
|
||
|
|
"compilerOptions": {
|
||
|
|
"baseUrl": "./",
|
||
|
|
"outDir": "./dist/out-tsc",
|
||
|
|
"forceConsistentCasingInFileNames": true,
|
||
|
|
"noImplicitReturns": true,
|
||
|
|
"noFallthroughCasesInSwitch": true,
|
||
|
|
"sourceMap": true,
|
||
|
|
"declaration": false,
|
||
|
|
"downlevelIteration": true,
|
||
|
|
"experimentalDecorators": true,
|
||
|
|
"moduleResolution": "node",
|
||
|
|
"importHelpers": true,
|
||
|
|
"target": "es2015",
|
||
|
|
"module": "es2020",
|
||
|
|
"lib": [
|
||
|
|
"es2018",
|
||
|
|
"dom"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"angularCompilerOptions": {
|
||
|
|
"strictInjectionParameters": true,
|
||
|
|
"strictInputAccessModifiers": true,
|
||
|
|
"strictTemplates": true,
|
||
|
|
"enableIvy": true
|
||
|
|
}
|
||
|
|
}"><input type="hidden" name="files[src/assets/images/hero.base64.png]" value="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
|
||
|
|
<script>
|
||
|
|
var embedded = 'ctl=1';
|
||
|
|
var isEmbedded = window.location.search.indexOf(embedded) > -1;
|
||
|
|
|
||
|
|
if (isEmbedded) {
|
||
|
|
var form = document.getElementById('mainForm');
|
||
|
|
var action = form.action;
|
||
|
|
var actionHasParams = action.indexOf('?') > -1;
|
||
|
|
var symbol = actionHasParams ? '&' : '?'
|
||
|
|
form.action = form.action + symbol + embedded;
|
||
|
|
}
|
||
|
|
document.getElementById("mainForm").submit();
|
||
|
|
</script>
|
||
|
|
</body></html>
|