Angular Assignment

Angular2-quickstart/.gitignore

@@ -0,0 +1,70 @@
+
+# Created by https://www.gitignore.io/api/osx
+
+### 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
+
+
+
+# Created by https://www.gitignore.io/api/node
+
+### 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
+

Angular2-quickstart/README.md

@@ -0,0 +1,13 @@
+# Things That Were Learned
+
+- Name of project
+    Angular Intro
+- Build instructions
+    Same as on the Angular Website
+- What you learned
+    Better ideas as to import and inject Angular components 
+- What you found difficult
+    Making sure sytax errors weren't a problem
+- Why are .gitignore files important
+    Removes excess bloat from your uploads
+

Angular2-quickstart/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;
+}

Angular2-quickstart/app/app.component.ts

@@ -0,0 +1,34 @@
+import { Component } from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+import { HeroService } from './hero.service';
+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: '/heroes', '/dashboard', '/detail/:id',
+    name: 'Heroes', 'Dashboard', 'HeroDetail',
+    component: HeroesComponent, DashboardComponent, HeroDetailComponent,
+    useAsDefault: true
+  }
+])
+export class AppComponent {
+  title = 'Tour of Heroes';
+}

Angular2-quickstart/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;
+    }
+}

Angular2-quickstart/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>

Angular2-quickstart/app/dashboard.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from 'angular2/core';
+import { Router } from 'angular2/router';
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'my-dashboard',
+  templateUrl: 'app/dashboard.component.html', 
+  styleUrls: ['app/dashboard.component.css'],
+
+})
+export class DashboardComponent { }
+
+export class DashboardComponent implements OnInit {
+  heroes: Hero[] = [];
+  constructor(private _heroService: HeroService) { }
+  ngOnInit() {
+    this._heroService.getHeroes()
+      .then(heroes => this.heroes = heroes.slice(1,5));
+  }
+  gotoDetail(hero: Hero) {
+  let link = ['HeroDetail', { id: hero.id }];
+  this._router.navigate(link);
+}
+
+constructor(
+  private _router: Router,
+  private _heroService: HeroService) {
+}
+