Skip to content

Commit 2b1c45d

Browse files
quantuminformationquantuminformation
committed
angular slides
1 parent 31d110b commit 2b1c45d

File tree

10 files changed

+183
-2
lines changed

10 files changed

+183
-2
lines changed

‎examples/angular/angular-cli.json

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"project": {
3+
"version": "1.0.0-beta.24",
4+
"name": "angular-seed"
5+
},
6+
"apps": [
7+
{
8+
"root": "src",
9+
"outDir": "dist",
10+
"assets": [
11+
"assets",
12+
"favicon.ico"
13+
],
14+
"index": "index.html",
15+
"main": "main.ts",
16+
"test": "test.ts",
17+
"tsconfig": "tsconfig.json",
18+
"prefix": "app",
19+
"mobile": false,
20+
"styles": [
21+
"styles.css"
22+
],
23+
"scripts": [],
24+
"environments": {
25+
"source": "environments/environment.ts",
26+
"dev": "environments/environment.ts",
27+
"prod": "environments/environment.prod.ts"
28+
}
29+
}
30+
],
31+
"addons": [],
32+
"packages": [],
33+
"e2e": {
34+
"protractor": {
35+
"config": "./protractor.conf.js"
36+
}
37+
},
38+
"test": {
39+
"karma": {
40+
"config": "./karma.conf.js"
41+
}
42+
},
43+
"defaults": {
44+
"styleExt": "css",
45+
"prefixInterfaces": false,
46+
"inline": {
47+
"style": false,
48+
"template": false
49+
},
50+
"spec": {
51+
"class": false,
52+
"component": true,
53+
"directive": true,
54+
"module": false,
55+
"pipe": true,
56+
"service": true
57+
}
58+
}
59+
}

‎examples/angular/app.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<h1>
2+
{{title}}
3+
</h1>

‎examples/angular/app.component.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-root',
5+
templateUrl: './app.component.html',
6+
styleUrls: ['./app.component.css']
7+
})
8+
export class AppComponent {
9+
title = 'app works!';
10+
}

‎examples/angular/app.module.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { BrowserModule } from '@angular/platform-browser';
2+
import { NgModule } from '@angular/core';
3+
import { FormsModule } from '@angular/forms';
4+
import { HttpModule } from '@angular/http';
5+
6+
import { AppComponent } from './app.component';
7+
8+
@NgModule({
9+
declarations: [
10+
AppComponent
11+
],
12+
imports: [
13+
BrowserModule,
14+
FormsModule,
15+
HttpModule
16+
],
17+
providers: [],
18+
bootstrap: [AppComponent]
19+
})
20+
export class AppModule { }

‎examples/angular/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularSeed</title>
6+
<base href="/">
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="icon" type="image/x-icon" href="favicon.ico">
10+
</head>
11+
<body>
12+
<app-root>Loading...</app-root>
13+
</body>
14+
</html>

‎examples/angular/main.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import './polyfills.ts';
2+
3+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4+
import { enableProdMode } from '@angular/core';
5+
import { environment } from './environments/environment';
6+
import { AppModule } from './app/app.module';
7+
8+
if (environment.production) {
9+
enableProdMode();
10+
}
11+
12+
platformBrowserDynamic().bootstrapModule(AppModule);

‎examples/angular/setup.sh

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/usr/bin/env bash
2+
npm install -g angular-cli
3+
ng init

‎images/basic-angular.png

17.3 KB
Loading

‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<script src="https://cdn.jsdelivr.net/prism/1.3.0/components/prism-jsx.min.js" type="text/javascript"></script>
1515
<script src="https://cdn.jsdelivr.net/prism/1.3.0/components/prism-typescript.min.js" type="text/javascript"></script>
1616
<script src="https://cdn.jsdelivr.net/prism/1.3.0/components/prism-bash.min.js" type="text/javascript"></script>
17+
<script src="https://cdn.jsdelivr.net/prism/1.3.0/components/prism-html.min.js" type="text/javascript"></script>
1718
<script src="./dist/bundle.js"></script>
1819
</body>
1920
</html>

‎presentation/index.js

+61-2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ require("./custom.css");
4141
const slideTransition = ["slide"];
4242
const images = mapValues({
4343
basicReactTypescript: require("../images/basic-react-typescript.png"),
44+
basicAngular: require("../images/basic-angular.png"),
4445
logo: require("../images/qi.png"),
4546
usageStats: require("../images/usage.png"),
4647
ts: require("../images/ts.png"),
@@ -221,7 +222,7 @@ export default class Presentation extends React.Component {
221222
<TableRow>
222223
<TableHeaderItem>V1.8</TableHeaderItem>
223224
<TableHeaderItem>V1.8 (cont)</TableHeaderItem>
224-
<TableHeaderItem>V1.7</TableHeaderItem>
225+
<TableHeaderItem>V1.8 (cont)</TableHeaderItem>
225226
</TableRow>
226227
</thead>
227228
<tbody>
@@ -273,6 +274,9 @@ export default class Presentation extends React.Component {
273274
/>
274275
</Slide>
275276

277+
278+
{/*REACT SECTION*/}
279+
276280
<Slide transition={slideTransition}>
277281
<Heading size={4}>
278282
Typescript with React
@@ -313,8 +317,63 @@ export default class Presentation extends React.Component {
313317
</Slide>
314318

315319

320+
{/*angular SECTION*/}
316321

317-
322+
<Slide transition={slideTransition}>
323+
<Heading size={4}>
324+
Typescript with Angular 2
325+
</Heading>
326+
<h3>Creating an app with angular-cli</h3>
327+
<CodePane
328+
lang="bash"
329+
source={require("raw!../examples/angular/setup.sh")}
330+
margin="20px auto"
331+
/>
332+
<p>This will create a bunch of files (or update existing project) and then run <code>npm i</code></p>
333+
</Slide>
334+
<Slide transition={slideTransition}>
335+
<h3>Basic component</h3>
336+
<p>app.component.ts</p>
337+
<CodePane
338+
lang="typescript"
339+
source={require("raw!../examples/angular/app.component.ts")}
340+
margin="20px auto"
341+
/>
342+
<p>app.component.html</p>
343+
<CodePane
344+
lang="html"
345+
source={require("raw!../examples/angular/app.component.html")}
346+
margin="20px auto"
347+
/>
348+
</Slide>
349+
<Slide transition={slideTransition}>
350+
<h3>Using the component in an Angular2 app (@NgModule)</h3>
351+
<CodePane
352+
lang="typescript"
353+
source={require("raw!../examples/angular/app.module.ts")}
354+
margin="20px auto"
355+
/>
356+
</Slide>
357+
<Slide transition={slideTransition}>
358+
<h3>Bootstrapping the module</h3>
359+
<CodePane
360+
lang="typescript"
361+
source={require("raw!../examples/angular/main.ts")}
362+
margin="20px auto"
363+
/>
364+
</Slide>
365+
<Slide transition={slideTransition}>
366+
<h3>angular-cli ties all this together</h3>
367+
<CodePane
368+
lang="js"
369+
source={require("raw!../examples/angular/angular-cli.json")}
370+
margin="20px auto"
371+
/>
372+
</Slide>
373+
<Slide transition={slideTransition}>
374+
<heading>End result:</heading>
375+
<Image src={images.basicAngular} margin="0px auto 40px" height="524px"/>
376+
</Slide>
318377
<Slide transition={slideTransition}>
319378
<Heading size={4}>
320379
Gotchas

0 commit comments

Comments
 (0)