Merge pull request #7 from opiepj/feature/6-homecomponent

Feature/6 homecomponent

Author: opiepj

README.md

@@ -58,5 +58,8 @@ then
 $ npm rune e2e
 ```
 
+# Angular 2.0 API
+reference: https://angular.io/docs/js/latest/api/
+
 # License
   [MIT](/LICENSE)

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>

src/app/directives/directives.ts

@@ -1,6 +1,9 @@
 /// <reference path="../../typings/_custom.d.ts" />
 /*
  * Angular 2
+ * @coreDirectives: collection of Angular core directives
+ * @formDirectives: list of all the form directives
+ * @routerDirectives: list of all the router directives
  */
 import {coreDirectives, formDirectives} from 'angular2/angular2';
 import {routerDirectives} from 'angular2/router';

src/app/directives/directives/auto-focus.ts

@@ -0,0 +1,19 @@
+/// <reference path="../../../typings/_custom.d.ts" />
+/*
+ * Angular 2
+ * @Directive: factory function
+ * @ElementRef: class, reference to the element
+ */
+import {Directive, ElementRef} from 'angular2/angular2';
+// Simple example directive that fixes autofocus problem with multiple views
+@Directive({
+  selector: '[autofocus]' // using [ ] means selecting attributes
+})
+export class Autofocus {
+  constructor(public el: ElementRef) {
+    // autofocus fix for multiple views
+    if (this.el.nativeElement.focus) {
+      this.el.nativeElement.focus();
+    }
+  }
+}