Angular 2: Tour of Heroes!

.gitignore

@@ -0,0 +1,66 @@
+
+# Created by https://www.gitignore.io/api/osx,node
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history

README.md

@@ -1,35 +1,14 @@
-# Angular2Assign
-This is an assignment to gain exposure to Angular 2.
 
-Angular is a complete framework for writing single page applications. When using Angular, you can use a few different languages that all get transpiled to es5 (for now). These include Javascript, Typescript and Dart. There is a focus on Typescript. For this assignment you will be using Typescript.
+Angular 2 Assignment - Tour of Heroes :cop:
 
-Learn more about Typescript [here.](http://www.typescriptlang.org/)
 
+Click here: [Angular tutorial.](https://angular.io/docs/ts/latest/tutorial/) and follow the Case Study: Tour of Heroes
+Add a .gitignore file to your project. 
 
-#Steps
-We will be stating from scratch on this assignment and pushing your finished code to you github account, and turning in a URL to the repo.
 
-# Assignment
+With this assignment I learned how important it is to be organized when you are coding. :angry:
 
-Your assignment is to work through the [Angular tutorial.](https://angular.io/docs/ts/latest/tutorial/)
+I got lost a couple times trying to figure out why one piece of code was different from the other when it just turned out it was a completely different file. :anguished:
 
-You will need to turn in 7 commits. One for each chapter of the tutorial, including the quickstart guide.
+Because it helps the program run faster when it doesn't have to run files that aren't important. 
 
-Include a README file that includes the following (Add emojis. It makes things more fun! :smile: ):
-
-- Name of project
-- Build instructions
-- What you learned
-- What you found difficult
-- Why are .gitignore files important
-
-Also, as part of this assignment, you will need to include a .gitignore file to ignore files that *shouldn't* be tracked by git.
-
-
-
-#Tips
-- Typescript is a strongly typed language. Learn more about type systems [here.](https://www.smashingmagazine.com/2013/04/introduction-to-programming-type-systems/)
-- Angular 2 is a complete rewrite from Angular 1. It is still in open beta, but it is poised to be a big deal in web development.
-- Don't worry if you don't understand all the specifics with the details of the framework. Try and keep a broad view of how things connect. At the end of the day, in Angular we are still writing web components. Like what we did in Polymer or React.
-- Research .gitignore files and why you should use them.
-- For complete list of emojis go [here](http://www.emoji-cheat-sheet.com/)

app/app.component.css

@@ -0,0 +1,28 @@
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.router-link-active {
+  color: #039be5;
+}

app/app.component.ts

@@ -0,0 +1,48 @@
+import { Component } from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+
+import { HeroService } from './hero.service';
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>{{title}}</h1>
+    <nav>
+      <a [routerLink]="['Dashboard']">Dashboard</a>
+      <a [routerLink]="['Heroes']">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  styleUrls: ['app/app.component.css'],
+  directives: [ROUTER_DIRECTIVES],
+  providers: [
+    ROUTER_PROVIDERS,
+    HeroService
+  ]
+})
+@RouteConfig([
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: DashboardComponent,
+    useAsDefault: true
+  },
+  {
+    path: '/detail/:id',
+    name: 'HeroDetail',
+    component: HeroDetailComponent
+  },
+  {
+    path: '/heroes',
+    name: 'Heroes',
+    component: HeroesComponent
+  }
+])
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
+
+

app/dashboard.component.css

@@ -0,0 +1,60 @@
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+    padding: 20px;
+    text-align: center;
+    color: #eee;
+    max-height: 120px;
+    min-width: 120px;
+    background-color: #607D8B;
+    border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+    .module {
+      font-size: 10px;
+      max-height: 75px; }
+}
+@media (max-width: 1024px) {
+    .grid {
+      margin: 0;
+    }
+    .module {
+      min-width: 60px;
+    }
+}

app/dashboard.component.html

@@ -0,0 +1,8 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <div *ngFor="#hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>