Skip to content

Commit 17f0d9b

Browse files
opiepjopiepj
committed
(#27) Structure directive with bootstrap.
1 parent ba70423 commit 17f0d9b

File tree

7 files changed

+160
-96
lines changed

7 files changed

+160
-96
lines changed

‎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‎

Whitespace-only changes.

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

Whitespace-only changes.

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

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

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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>
19+
20+
<style>
21+
ul {
22+
list-style-type: none;
23+
}
24+
</style>

‎src/public/index.html‎

Lines changed: 57 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,57 @@
1-
<!DOCTYPE html>
2-
<html lang="">
3-
<head>
4-
<title>Angular 2.0 App</title>
5-
6-
<meta charset="utf-8">
7-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8-
<meta name="description" content="">
9-
<meta name="viewport" content="width=device-width, initial-scale=1">
10-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
11-
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
12-
13-
<base href="/">
14-
<!-- ignore: Aplha 32 router fix -->
15-
<script>baseElement = document.querySelector('base');baseElement.attr = baseElement.getAttribute;</script>
16-
<!-- styles -->
17-
<style>
18-
.loader {
19-
width: 75px;
20-
position: fixed;
21-
right: 50%;
22-
top: 50%;
23-
}
24-
25-
body {
26-
margin: 0;
27-
}
28-
</style>
29-
<!--
30-
Angular 2
31-
traceur-runtime: is only needed for ES6 browser polyfill
32-
this is not the full traceur only the polyfills
33-
-->
34-
<script src="/lib/traceur-runtime.min.js"></script>
35-
</head>
36-
<body>
37-
38-
<app (loading)="loading = $event" autofocus>
39-
<img class="loader" [hidden]="!loading" src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
40-
</app>
41-
42-
<!-- Commmon files to be cached -->
43-
<script src="/__build__/common.js"></script>
44-
<!-- Angular2 files -->
45-
<script src="/__build__/angular2.js"></script>
46-
<!-- App script -->
47-
<script src="/__build__/app.js"></script>
48-
</body>
49-
</html>
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<title>Angular 2.0 App</title>
5+
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta name="description" content="">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
11+
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
12+
<!-- Latest compiled and minified CSS -->
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
14+
15+
<!-- Optional theme -->
16+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
17+
18+
<!-- Latest compiled and minified JavaScript -->
19+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
20+
21+
<base href="/">
22+
<!-- ignore: Aplha 32 router fix -->
23+
<script>baseElement = document.querySelector('base');baseElement.attr = baseElement.getAttribute;</script>
24+
<!-- styles -->
25+
<style>
26+
.loader {
27+
width: 75px;
28+
position: fixed;
29+
right: 50%;
30+
top: 50%;
31+
}
32+
33+
body {
34+
margin: 0;
35+
}
36+
</style>
37+
<!--
38+
Angular 2
39+
traceur-runtime: is only needed for ES6 browser polyfill
40+
this is not the full traceur only the polyfills
41+
-->
42+
<script src="/lib/traceur-runtime.min.js"></script>
43+
</head>
44+
<body>
45+
46+
<app (loading)="loading = $event" autofocus>
47+
<img class="loader" [hidden]="!loading" src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
48+
</app>
49+
50+
<!-- Commmon files to be cached -->
51+
<script src="/__build__/common.js"></script>
52+
<!-- Angular2 files -->
53+
<script src="/__build__/angular2.js"></script>
54+
<!-- App script -->
55+
<script src="/__build__/app.js"></script>
56+
</body>
57+
</html>

0 commit comments

Comments
 (0)