<!DOCTYPE html>
<html>
<head>
<title>Angular Material Plunker</title>
<!-- Load common libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.6/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.7.2/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System
.import('main.ts')
.catch(console.error.bind(console));
</script>
<!-- Load the Angular Material stylesheet -->
<link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<style>body { font-family: Roboto, Arial, sans-serif; margin: 0 }</style>
</head>
<body class="mat-app-background">
<material-app>Loading the Angular Material App...</material-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
-->
import {Component, ViewChild} from '@angular/core';
import {Http} from '@angular/http'
import {bootstrap} from '@angular/platform-browser-dynamic';
import {MdSidenav} from "@angular/material";
@Component({
selector: 'material-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
private version: any;
public items: number[] = [];
@ViewChild(MdSidenav) sideNav: MdSidenav;
constructor(http: Http) {
// Display the currently used Material 2 version.
this.version = http
.get('https://api.github.com/repos/angular/material2-builds/commits/HEAD')
.map(res => res.json());
for(let i = 1; i < 10; ++i) {
this.items.push(i);
}
}
ngAfterViewInit() {
this.sideNav.open();
}
}
/*
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
*/
<md-toolbar color="primary">
Angular Material 2 App
</md-toolbar>
<md-sidenav-container>
<md-sidenav mode="over">
<md-list>
<md-list-item *ngFor="let i of items"><a href="#">Item {{i}}</a></md-list-item>
</md-list>
</md-sidenav>
<div class="content">
<p>
<button md-button>Basic Button</button>
<md-slide-toggle>Slide Toggle</md-slide-toggle>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus mauris nunc, a aliquet
augue
porta at. In imperdiet nisi id pulvinar elementum. Aliquam sodales euismod arcu, ac volutpat
libero
elementum vel. Cras scelerisque vulputate ultrices. Nunc quis sapien non enim volutpat
ullamcorper
nec eget sem. Vestibulum libero diam, placerat id ligula vitae, faucibus venenatis urna.
Curabitur
sagittis ex id libero tempus sollicitudin. Donec efficitur ipsum mauris. Vivamus auctor metus
nec
tortor volutpat ultrices ut vitae mi. Cras in aliquam justo, quis scelerisque lacus. Sed et
lacus
erat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus mauris nunc, a aliquet
augue
porta at. In imperdiet nisi id pulvinar elementum. Aliquam sodales euismod arcu, ac volutpat
libero
elementum vel. Cras scelerisque vulputate ultrices. Nunc quis sapien non enim volutpat
ullamcorper
nec eget sem. Vestibulum libero diam, placerat id ligula vitae, faucibus venenatis urna.
Curabitur
sagittis ex id libero tempus sollicitudin. Donec efficitur ipsum mauris. Vivamus auctor metus
nec
tortor volutpat ultrices ut vitae mi. Cras in aliquam justo, quis scelerisque lacus. Sed et
lacus
erat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus mauris nunc, a aliquet
augue
porta at. In imperdiet nisi id pulvinar elementum. Aliquam sodales euismod arcu, ac volutpat
libero
elementum vel. Cras scelerisque vulputate ultrices. Nunc quis sapien non enim volutpat
ullamcorper
nec eget sem. Vestibulum libero diam, placerat id ligula vitae, faucibus venenatis urna.
Curabitur
sagittis ex id libero tempus sollicitudin. Donec efficitur ipsum mauris. Vivamus auctor metus
nec
tortor volutpat ultrices ut vitae mi. Cras in aliquam justo, quis scelerisque lacus. Sed et
lacus
erat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus mauris nunc, a aliquet
augue
porta at. In imperdiet nisi id pulvinar elementum. Aliquam sodales euismod arcu, ac volutpat
libero
elementum vel. Cras scelerisque vulputate ultrices. Nunc quis sapien non enim volutpat
ullamcorper
nec eget sem. Vestibulum libero diam, placerat id ligula vitae, faucibus venenatis urna.
Curabitur
sagittis ex id libero tempus sollicitudin. Donec efficitur ipsum mauris. Vivamus auctor metus
nec
tortor volutpat ultrices ut vitae mi. Cras in aliquam justo, quis scelerisque lacus. Sed et
lacus
erat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus mauris nunc, a aliquet
augue
porta at. In imperdiet nisi id pulvinar elementum. Aliquam sodales euismod arcu, ac volutpat
libero
elementum vel. Cras scelerisque vulputate ultrices. Nunc quis sapien non enim volutpat
ullamcorper
nec eget sem. Vestibulum libero diam, placerat id ligula vitae, faucibus venenatis urna.
Curabitur
sagittis ex id libero tempus sollicitudin. Donec efficitur ipsum mauris. Vivamus auctor metus
nec
tortor volutpat ultrices ut vitae mi. Cras in aliquam justo, quis scelerisque lacus. Sed et
lacus
erat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus mauris nunc, a aliquet
augue
porta at. In imperdiet nisi id pulvinar elementum. Aliquam sodales euismod arcu, ac volutpat
libero
elementum vel. Cras scelerisque vulputate ultrices. Nunc quis sapien non enim volutpat
ullamcorper
nec eget sem. Vestibulum libero diam, placerat id ligula vitae, faucibus venenatis urna.
Curabitur
sagittis ex id libero tempus sollicitudin. Donec efficitur ipsum mauris. Vivamus auctor metus
nec
tortor volutpat ultrices ut vitae mi. Cras in aliquam justo, quis scelerisque lacus. Sed et
lacus
erat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus mauris nunc, a aliquet
augue
porta at. In imperdiet nisi id pulvinar elementum. Aliquam sodales euismod arcu, ac volutpat
libero
elementum vel. Cras scelerisque vulputate ultrices. Nunc quis sapien non enim volutpat
ullamcorper
nec eget sem. Vestibulum libero diam, placerat id ligula vitae, faucibus venenatis urna.
Curabitur
sagittis ex id libero tempus sollicitudin. Donec efficitur ipsum mauris. Vivamus auctor metus
nec
tortor volutpat ultrices ut vitae mi. Cras in aliquam justo, quis scelerisque lacus. Sed et
lacus
erat.
</p>
</div>
</md-sidenav-container>
<div style="padding: 7px">
</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
-->
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
},
'vendor': {
defaultExtension: 'js'
}
}
});
System.config({
map: {
'main': 'main.js',
// Angular specific mappings.
'@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
'@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
'@angular/animations': "https://unpkg.com/@angular/animations/bundles/animations.umd.js",
'@angular/animations/browser': 'https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js',
'@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js',
'@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
'@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/material': 'https://rawgit.com/angular/material2-builds/master/bundles/material.umd.js',
// Rxjs mapping
'rxjs': 'https://unpkg.com/rxjs',
},
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
}
});
/*
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
*/
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpModule} from '@angular/http';
import {AppComponent} from './app.component';
import {MaterialModule} from '@angular/material';
@NgModule({
imports: [
BrowserModule,
CommonModule,
HttpModule,
MaterialModule,
BrowserAnimationsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
/*
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
*/