Merge pull request #13 from opiepj/feature/12-dashboard

Feature/12 dashboard

Author: opiepj

src/app/components/app.ts

@@ -27,7 +27,7 @@ import {appPipes} from '../pipes/pipes';
 // We use a folder if we want separate files
 import {Home} from './home/home';
 // Otherwise we only use one file for a component
-import {Dashboard} from './dashboard';
+import {Dashboard} from './dashboard/dashboard';
 
 // Example modules
 import {ExampleModules} from './example-modules/example-modules';

src/app/components/dashboard/dashboard.ts

@@ -0,0 +1,38 @@
+/// <reference path="../../../typings/_custom.d.ts" />
+
+/*
+ * Angular 2
+ */
+import {Component, View, Directive, ElementRef} from 'angular2/angular2';
+
+let view = require('./views/dashboard.html');
+
+/*
+ * TODO: refactor
+ * simple example directive that should be in `/directives` folder
+ */
+@Directive({
+  selector: '[x-large]' // using [ ] means selecting attributes
+})
+class XLarge {
+  constructor(public el: ElementRef) {
+    // simple dom manipulation to set font size to x-large
+    if (this.el.nativeElement.style) {
+      this.el.nativeElement.style.fontSize = 'x-large';
+    }
+  }
+}
+
+// Simple component with custom directive example
+@Component({
+  selector: 'dashboard'
+})
+@View({
+  directives: [ XLarge ],
+  template: view
+})
+export class Dashboard {
+  constructor() {
+
+  }
+}

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

@@ -0,0 +1,9 @@
+<style>
+  span[x-large] {
+    color: red;
+  }
+</style>
+<div>
+  <h2>Dashboard</h2>
+  <span x-large>Extra Large Font Directive</span>
+</div>

src/app/components/example-modules/example-modules.ts

@@ -1,27 +1,28 @@
-/// <reference path="../../../typings/_custom.d.ts" />
-
-// Angular 2
-import {Component, View, CSSClass} from 'angular2/angular2';
-import {RouteConfig, routerDirectives} from 'angular2/router';
-// Modules
-import {Tictactoe} from './tictactoe-module/tictactoe';
-// View
-let template = require('./example-modules.html');
-let styles = require('./example-modules.css')
-@Component({
-  selector: 'example-modules'
-})
-@RouteConfig([
-  { path: '/',              redirectTo: '/search' },
-  { path: '/search',        as: 'search',        component: Search },
-  { path: '/tictactoe',     as: 'tictactoe',     component: Tictactoe }
-])
-@View({
-  directives: [ routerDirectives, CSSClass ],
-  // include our .css file
-  styles: [ styles ], // Use webpack's `require` to get files as a raw string using raw-loader
-  template: template
-})
-export class ExampleModules {
-  active: number = 0;
-}
+/// <reference path="../../../typings/_custom.d.ts" />
+
+// Angular 2
+import {Component, View, CSSClass} from 'angular2/angular2';
+import {RouteConfig, routerDirectives} from 'angular2/router';
+// Modules
+import {Tictactoe} from './tictactoe-module/tictactoe';
+import {Search} from '.search-module/search';
+// View
+let template = require('./example-modules.html');
+let styles = require('./example-modules.css')
+@Component({
+  selector: 'example-modules'
+})
+@RouteConfig([
+  { path: '/',              redirectTo: '/search' },
+  { path: '/search',        as: 'search',        component: Search },
+  { path: '/tictactoe',     as: 'tictactoe',     component: Tictactoe }
+])
+@View({
+  directives: [ routerDirectives, CSSClass ],
+  // include our .css file
+  styles: [ styles ], // Use webpack's `require` to get files as a raw string using raw-loader
+  template: template
+})
+export class ExampleModules {
+  active: number = 0;
+}

src/app/components/example-modules/search-module/directives/autosuggest.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../../typings/_custom.d.ts" />
+/// <reference path="../../../../../typings/_custom.d.ts" />
 
 // Angular 2
 import {Directive, View, EventEmitter, ElementRef, LifecycleEvent} from 'angular2/angular2';

src/app/components/example-modules/search-module/services/github.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../../typings/_custom.d.ts" />
+/// <reference path="../../../../../typings/_custom.d.ts" />
 
 import {bind, Injectable, Http} from 'angular2/angular2'
 

src/app/components/example-modules/search-module/services/searchable.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../../typings/_custom.d.ts" />
+/// <reference path="../../../../../typings/_custom.d.ts" />
 
 export interface ISearchable<T> {
   search(query: string): Rx.Observable<string[]>;