Skip to content

Commit 4f92c43

Browse files
opiepjopiepj
committed
Merge pull request #28 from opiepj/optimization/27-demo
Optimization/27 demo
2 parents a31d953 + ac65332 commit 4f92c43

File tree

13 files changed

+242
-141
lines changed

13 files changed

+242
-141
lines changed

‎src/app/components/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<img src="angularjs-logo_patrick.png" alt="AngularP" height="54" width="54">
55
</a>
66
<span class="logo">{{ name | capitalize }} + Patrick + Webpack</span>
7-
<ul>
7+
<ul class="nav nav-tabs">
88
<li class="l-left">
99
<a [router-link]=" ['/home'] "class="top-nav-button ac-default-theme">Home</a>
1010
</li>

‎src/app/components/dashboard/dashboard.ts‎

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,43 @@
1-
/// <reference path="../../../typings/_custom.d.ts" />
2-
3-
/*
4-
* Angular 2
5-
*/
6-
import {Component, View, Directive, ElementRef} from 'angular2/angular2';
7-
8-
let view = require('./views/dashboard.html');
9-
10-
/*
11-
* TODO: refactor
12-
* simple example directive that should be in `/directives` folder
13-
*/
14-
@Directive({
15-
selector: '[x-large]' // using [ ] means selecting attributes
16-
})
17-
class XLarge {
18-
constructor(public el: ElementRef) {
19-
// simple dom manipulation to set font size to x-large
20-
if (this.el.nativeElement.style) {
21-
this.el.nativeElement.style.fontSize = 'x-large';
22-
}
23-
}
24-
}
25-
26-
// Simple component with custom directive example
27-
@Component({
28-
selector: 'dashboard'
29-
})
30-
@View({
31-
directives: [ XLarge ],
32-
template: view
33-
})
34-
export class Dashboard {
35-
constructor() {
36-
37-
}
38-
}
1+
/// <reference path="../../../typings/_custom.d.ts" />
2+
3+
/*
4+
* Angular 2
5+
*/
6+
import {Component, View, Directive, coreDirectives, ElementRef} from 'angular2/angular2';
7+
8+
// Directives
9+
import {Structure} from './directives/structure';
10+
11+
// View
12+
let view = require('./views/dashboard.html');
13+
14+
// Styles
15+
let styles = require('./styles/dashboard.css');
16+
17+
18+
@Directive({
19+
selector: '[x-large]' // using [ ] means selecting attributes
20+
})
21+
class XLarge {
22+
constructor(public el: ElementRef) {
23+
// simple dom manipulation to set font size to x-large
24+
if (this.el.nativeElement.style) {
25+
this.el.nativeElement.style.fontSize = 'x-large';
26+
}
27+
}
28+
}
29+
30+
// Simple component with custom directive example
31+
@Component({
32+
selector: 'dashboard'
33+
})
34+
@View({
35+
directives: [ coreDirectives, XLarge, Structure ],
36+
template: view,
37+
styles: [styles]
38+
})
39+
export class Dashboard {
40+
constructor() {
41+
42+
}
43+
}

‎src/app/components/dashboard/directives/structure.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/// <reference path="../../../../typings/_custom.d.ts" />
2+
3+
// Angular 2
4+
import {Component, View, EventEmitter, coreDirectives} from 'angular2/angular2';
5+
6+
let style = require('../styles/structure.css');
7+
let template = require('../views/structure.html');
8+
9+
@Component({
10+
selector: 'structure',
11+
properties: [ 'structure' ]
12+
})
13+
@View({
14+
directives: [ coreDirectives ],
15+
styles: [style],
16+
template: template
17+
})
18+
export class Structure {
19+
select: EventEmitter = new EventEmitter();
20+
}

‎src/app/components/dashboard/styles/dashboard.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
span[x-large] {
2+
color: red;
3+
}

‎src/app/components/dashboard/styles/structure.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
ul {
2+
list-style-type: none;
3+
}

‎src/app/components/dashboard/views/dashboard.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<style>
2-
span[x-large] {
3-
color: red;
4-
}
5-
</style>
6-
<div>
7-
<h2>Dashboard</h2>
8-
<span x-large>This is a useless dashboard!</span>
9-
</div>
1+
<div>
2+
<h2>Dashboard</h2>
3+
<div class="panel panel-primary">
4+
<div class="panel-heading">This is a useless dashboard!</div>
5+
<div class="panel-body">
6+
<structure></structure>
7+
</div>
8+
</div>
9+
</div>

‎src/app/components/dashboard/views/structure.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div>
2+
<div class="well">
3+
<h3>TypeScript File Structure</h3>
4+
<div>
5+
<ul>
6+
<li>Component:
7+
<ul>
8+
<li><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>directives/</li>
9+
<li><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>services/</li>
10+
<li><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>styles/</li>
11+
<li><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>views/</li>
12+
<li>model.ts</li>
13+
</ul>
14+
</li>
15+
</ul>
16+
</div>
17+
</div>
18+
</div>

‎src/app/components/example-modules/example-modules.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<li>
1313
<a class="ac-button md-default-theme"
1414
[router-link]=" ['./tictactoe'] "
15-
(click)="active = 2"
15+
(click)="active = 1"
1616
[class.active]="active === 2">Tic tac toe</a>
1717
</li>
1818
<li>

‎src/app/components/example-modules/memory-module/views/memory.html‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1-
<div>Pairs left to match: {{game.unmatchedPairs}}</div>
2-
<div>Matching: {{game.firstPick.title}}</div>
3-
<table>
4-
<tr *ng-for="#row of game.grid" class="row">
5-
<td *ng-for="#tile of row">
6-
<div class="card">
7-
<img class="back" (click)="game.flipTile(tile)" [hidden]="tile.flipped" src="img/memory_game/back.png">
8-
<img class="front" (click)="game.flipTile(tile)" [hidden]="!tile.flipped" src="img/memory_game/{{tile.title}}.png">
9-
</div>
10-
</td>
11-
</tr>
12-
</table>
13-
<div class="message">{{game.message}}</div>
1+
<div style="padding: 0 16px;">
2+
<h2>Memory Game</h2>
3+
<div class="panel panel-default">
4+
<div class="panel-body">
5+
<div>Pairs left to match: {{game.unmatchedPairs}}</div>
6+
<div>Matching: {{game.firstPick.title}}</div>
7+
<table>
8+
<tr *ng-for="#row of game.grid" class="row">
9+
<td *ng-for="#tile of row">
10+
<div class="card">
11+
<img class="back" (click)="game.flipTile(tile)" [hidden]="tile.flipped" src="img/memory_game/back.png">
12+
<img class="front" (click)="game.flipTile(tile)" [hidden]="!tile.flipped" src="img/memory_game/{{tile.title}}.png">
13+
</div>
14+
</td>
15+
</tr>
16+
</table>
17+
<div class="message">{{game.message}}</div>
18+
</div>
19+
</div>
20+
</div>

‎src/app/components/example-modules/search-module/views/search.html‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
<div style="padding: 0 16px;">
2-
<h2>Search Github repos</h2>
3-
4-
<section>
5-
6-
<input autosuggest (term)="showResults($event)" (loading)="loading = $event" type="text" autofocus>
7-
<img style="width: 20px;position: absolute;" [hidden]="!loading" src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
8-
9-
</section>
10-
11-
<section>
12-
13-
<div *ng-for="#repo of repos" style="padding: 0.5em 0.5em 0.5em 0;">
14-
<a [href]="repo.html_url" target="_blank">
15-
{{ repo.owner.login }}/<b>{{ repo.name }}</b>
16-
</a>
17-
</div>
18-
19-
</section>
20-
</div>
1+
<div style="padding: 0 16px;">
2+
<h2>Search Github repos</h2>
3+
4+
<div class="panel panel-default">
5+
<div class="panel-body">
6+
<form class="navbar-form navbar-left" role="search">
7+
<div class="form-group">
8+
<input autosuggest class="form-control" placeholder="Search" (term)="showResults($event)" (loading)="loading = $event" type="text" autofocus><img style="width: 20px;position: absolute;" [hidden]="!loading" src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
9+
</div>
10+
</form>
11+
</div>
12+
<div class="panel-footer">
13+
<div *ng-for="#repo of repos" style="padding: 0.5em 0.5em 0.5em 0;">
14+
<a [href]="repo.html_url" target="_blank">
15+
{{ repo.owner.login }}/<b>{{ repo.name }}</b>
16+
</a>
17+
</div>
18+
</div>
19+
</div>
20+
21+
</div>

0 commit comments

Comments
 (0)