(#6) Home Component

Author: opiepj

src/app/components/home/home.ts

@@ -0,0 +1,37 @@
+/// <reference path="../../../typings/_custom.d.ts" />
+
+/*
+ * Angular 2
+ * @Component: factory function
+ * @View: factory function
+ * @ViewEncapsulation: ENUM How the template and styles of a view should be encapsulated.
+ */
+import {Component, View, ViewEncapsulation} from 'angular2/angular2';
+
+/*
+ * Directives
+ * @angularDirectives: Angular's core/form/router directives
+ * @appDirectives: Our collection of directives from /directives
+ */
+import {appDirectives, angularDirectives} from 'app/directives/directives';
+
+// Webpack's `require` to get files
+let styles   = require('./styles/home.css');
+let template = require('./views/home.html');
+
+// Simple external file component example
+@Component({
+  selector: 'home'
+})
+@View({
+  directives: [ angularDirectives, appDirectives ],
+  encapsulation: ViewEncapsulation.EMULATED, // EMULATED: Emulate scoping of styles by preprocessing the style rules and adding additional attributes to elements.
+  // include .html and .css file
+  styles: [ styles ],
+  template: template
+})
+export class Home {
+  constructor() {
+
+  }
+}

src/app/components/home/styles/home.css

@@ -0,0 +1,3 @@
+.home {
+  background-color: #F8F8F8;
+}

src/app/components/home/test/home.spec.ts

@@ -0,0 +1,27 @@
+/// <reference path="../../../../typings/_custom.d.ts" />
+import {Component, View} from 'angular2/angular2';
+import {Home} from './home';
+
+@Component({
+  selector: 'test-cmp'
+})
+@View({
+  directives: [ Home ]
+})
+class TestComponent {
+
+}
+
+describe('Home', () => {
+  var home;
+
+  beforeEach(() => {
+    home = new Home();
+  });
+
+  it('should work', () => {
+    expect(home).toBeDefined();
+  });
+
+});
+

src/app/components/home/views/home.html

@@ -0,0 +1,3 @@
+<div class="home">
+  <h2>Home</h2>
+</div>