feat: project setup

Author: adriancarriger

package.json

@@ -36,6 +36,7 @@
     "karma-cli": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-remap-istanbul": "^0.2.1",
+    "node-sass": "^3.10.0",
     "protractor": "4.0.5",
     "ts-node": "1.2.1",
     "tslint": "3.13.0",

src/app/app.component.css

@@ -1,3 +1,5 @@
-<h1>
-  {{title}}
-</h1>
+<header class="header"><h1>Title here</h1></header>
+<app-navbar></app-navbar>
+<div class="content-container">
+  <router-outlet></router-outlet>
+</div>

src/app/app.component.html

@@ -0,0 +1,20 @@
+@import './styles/variables';
+html, body {
+  height: 100%;
+}
+.header {
+  position: fixed;
+  top: 0;
+  left: $navWidth;
+  right: 0;
+  width: 100%;
+  background-color: yellow;
+  height: $headerHeight;
+  h1 {
+    margin: 0;
+  }
+}
+.content-container {
+  margin-left: $navWidth;
+  margin-top: $headerHeight; 
+}

src/app/app.component.scss

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   title = 'app works!';

src/app/app.component.spec.ts

@@ -1,18 +1,26 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import { routes } from './app.routes';
+
+import { SharedModule } from './shared/shared.module';
+import { HomeComponent } from './home/home.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    RouterModule.forRoot(routes),
+    SharedModule.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Routes } from '@angular/router';
+
+import { homeRoutes } from './home/index';
+
+export const routes: Routes = [
+  ...homeRoutes
+];