Adding webpack 2 compile demo. · LouisYis/JavaScript-Demos@818eeaa · GitHub
Skip to content

Commit 818eeaa

Browse files
bennadelbennadel
committed
Adding webpack 2 compile demo.
1 parent 37fee54 commit 818eeaa

10,055 files changed

Lines changed: 1303990 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 1 addition & 0 deletions

‎demos/webpack-angular2/app/app.component.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 16px ;
5+
}
6+
7+
:host >>> a {
8+
color: red ;
9+
cursor: pointer ;
10+
text-decoration: underline ;
11+
user-select: none ;
12+
-moz-user-select: none ;
13+
-webkit-user-select: none ;
14+
}
15+
16+
:host >>> hr {
17+
margin: 30px 0px 30px 0px ;
18+
}
19+
20+
strong {
21+
background-color: gold ;
22+
}

‎demos/webpack-angular2/app/app.component.htm‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
<p>
3+
Best <strong>Helena Bonham Carter</strong> movies:
4+
</p>
5+
6+
<ul>
7+
<li *ngFor="let movie of movies | async">
8+
{{ movie }}
9+
</li>
10+
</ul>
11+
12+
<p>
13+
<em>This demo was built using webpack 2 and TypeScript 2.2.1.</em>
14+
</p>

‎demos/webpack-angular2/app/app.component.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
import { Observable } from "rxjs/Observable";
5+
import * as _ from "lodash";
6+
7+
// Import these modules to create side-effects.
8+
import "rxjs/add/observable/of";
9+
10+
@Component({
11+
selector: "my-app",
12+
styleUrls: [ "./app.component.css" ],
13+
templateUrl: "./app.component.htm"
14+
})
15+
export class AppComponent {
16+
17+
public movies: Observable<string[]>;
18+
19+
20+
// I initialize the app component.
21+
constructor() {
22+
23+
// NOTE: Neither the use of an RxJS stream nor the use of Lodash makes any real
24+
// sense in this scenario; I'm only using these libraries in order to ensure that
25+
// the imports work and result in the proper Vendor bundles.
26+
this.movies = Observable.of(
27+
_.map(
28+
[
29+
"Conversations with Other Women",
30+
"Planet of the Apes",
31+
"Fight Club",
32+
"The Theory of Flight"
33+
],
34+
( movie: string ) : string => {
35+
36+
return( movie + "." );
37+
38+
}
39+
)
40+
);
41+
42+
}
43+
44+
}

‎demos/webpack-angular2/app/app.module.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
6+
// Import the application components and services.
7+
import { AppComponent } from "./app.component";
8+
9+
@NgModule({
10+
bootstrap: [ AppComponent ],
11+
imports: [ BrowserModule ],
12+
declarations: [ AppComponent ]
13+
})
14+
export class AppModule {
15+
// ...
16+
}

‎demos/webpack-angular2/app/main.htm‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Building JavaScript Demos With TypeScript 2.2.1, Webpack 2, And Angular 2.4.9
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Building JavaScript Demos With TypeScript 2.2.1, Webpack 2, And Angular 2.4.9
14+
</h1>
15+
16+
<my-app>
17+
<p>
18+
<em>Loading files...</em>
19+
</p>
20+
21+
<p>
22+
npm Run Scripts:
23+
</p>
24+
25+
<ul>
26+
<li>
27+
<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
28+
</li>
29+
<li>
30+
<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
31+
</li>
32+
</ul>
33+
</my-app>
34+
35+
</body>
36+
</html>

‎demos/webpack-angular2/app/main.polyfill.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
// Import these libraries for their side-effects.
3+
import "core-js/client/shim.min.js";
4+
import "zone.js/dist/zone.js";
5+
import "reflect-metadata/Reflect.js";
6+
7+
// Load the Web Animations API polyfill for most browsers (basically any browser other than Chrome and Firefox).
8+
// import "web-animations-js/web-animations.min.js";

‎demos/webpack-angular2/app/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
// Import the core angular services.
3+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
4+
5+
// Import the root module for bootstrapping.
6+
import { AppModule } from "./app.module";
7+
8+
platformBrowserDynamic().bootstrapModule( AppModule );

‎demos/webpack-angular2/app/main.vendor.ts‎

Lines changed: 11 additions & 0 deletions

‎demos/webpack-angular2/build/main.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)