initial notes module work

Author: jschwarty

src/app/app.component.html

@@ -15,7 +15,7 @@
 <section id="title" class="center">
   <h1>AngularAir</h1>
   <h2>
-    A <strong>live</strong> weekly video podcast covering the Angular JavaScript platform.
+    A <strong>live</strong> weekly videocast covering the Angular JavaScript platform.
   </h2>
   <p>
     Brought to you with support from <a href="http://angularclass.com">AngularClass</a>
@@ -49,3 +49,4 @@ <h2>Upcoming Episodes</h2>
   <h2>Past Episodes</h2>
   <app-episode-card *ngFor="let episode of (model | async)?.pastEpisodes" [episode]="episode"></app-episode-card>
 </section>
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -13,21 +13,27 @@ import { rootReducer } from "./shared/state/reducers/root.reducer";
 import appState from './data.json';
 import { EpisodeCardComponent } from './shared/episode-card/episode-card.component';
 import { PersonCardComponent } from './shared/person-card/person-card.component';
+import {RouterModule, Routes} from "@angular/router";
+
+const appRoutes: Routes = [
+  {path: 'episode/:id', loadChildren: 'app/episode/episode.module#EpisodeModule'}
+];
 
 @NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    RouterModule.forRoot(appRoutes),
+    StoreModule.provideStore(rootReducer, appState.data)
+  ],
   declarations: [
     AppComponent,
     LinkIconComponent,
     SubscribeIconComponent,
     EpisodeCardComponent,
     PersonCardComponent
   ],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    HttpModule,
-    StoreModule.provideStore(rootReducer, appState.data)
-  ],
   providers: [
     DateService
   ],

src/app/data.json

@@ -1,7 +1,7 @@
 {
   "data": {
     "currentHostsIds": [4],
-    "currentPanelistsIds": [6,7,8,9],
+    "currentPanelistsIds": [7,8,9,6],
     "episodes": [
       {
         "id": 96,

src/app/episode/episode.component.ts

@@ -0,0 +1,26 @@
+import {ChangeDetectionStrategy, Component} from "@angular/core";
+import {NotesService} from "./notes.service";
+import {ActivatedRoute, Params} from "@angular/router";
+
+@Component({
+  selector: 'app-episode',
+  template: `
+    <pre><code>{{notes}}</code></pre>`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class EpisodeComponent {
+  notes: string;
+
+  constructor(private route: ActivatedRoute, private notesService: NotesService) {
+  }
+
+  ngOnInit() {
+    this.route.params
+      .switchMap((params: Params) => this.notesService.getNotesByEpisodeId(+params['id']))
+      .subscribe((notes: string) => {
+        this.notes = notes;
+        console.log('wee');
+      }, error => {
+      });
+  }
+}

src/app/episode/episode.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from "@angular/core";
+import {EpisodeComponent} from "./episode.component";
+import {NotesService} from "./notes.service";
+import {CommonModule} from "@angular/common";
+import {RouterModule, Routes} from "@angular/router";
+
+const routes: Routes = [
+  {path: '', component: EpisodeComponent}
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule],
+  declarations: [EpisodeComponent],
+  providers: [NotesService]
+})
+export class EpisodeModule { }

src/app/episode/notes.service.ts

@@ -0,0 +1,12 @@
+import {Injectable} from "@angular/core";
+import {Http, Response} from "@angular/http";
+
+@Injectable()
+export class NotesService {
+  constructor(private http: Http) {}
+
+  getNotesByEpisodeId(id: number) {
+    return this.http.get(`/assets/episode-notes/${id}.md`)
+      .map((response: Response) => response.text());
+  }
+}

src/app/shared/episode-card/episode-card.component.html

@@ -9,3 +9,4 @@
     {{person.fullName}} <a href="https://twitter.com/{{person.twitterHandle}}">@{{person.twitterHandle}}</a>
   </span>
 </div>
+<a routerLink="/episode/{{episode.id}}">Notes</a>

src/assets/episode-notes/96.md

@@ -0,0 +1,69 @@
+### Host
++ [Justin Schwartzenberger](https://twitter.com/schwarty)
+
+### Panelists
++ [Austin McDaniel](https://twitter.com/amcdnl)
++ [Mike Brocchi](https://twitter.com/Brocco)
+
+### Guests
++ [Michaela Lehr](https://twitter.com/FischaelaMeer)
++ [Gerard Sans](https://twitter.com/gerardsans)
+
+### Episode Notes
++ Introductions
++ Gerard Sans
+    + Angular Zone  
+      <https://www.meetup.com/AngularZone/>
++ Michaela Lehr
+    + Angular 2 Comet  
+      <http://bit.ly/ng2comet>
++ Curating content
+    + Michaela how do you go about picking content for Comet?
+    + Gerard how to you go about deciding on topics for meetups?
++ Places for finding content
+    + Twitter
+        + Following Angular people
+        + Hashtags
+        + Using Tweetdeck
+    + Blog posts
+    + YouTube channels
+        + Conference recordings
+        + Video podcasts
+        + Meetups
+    + Newsletters
+    + Reddit
+    + Google Alerts
+    + Github
+      + Trending
+    + Stack Overflow
+    + Books
++ Saving and collecting content
+    + Pocket
+    + Flipboard
+    + Evernote
+    + Google Calendar
++ Wrap up
+
+### Picks
++ Michaela
+  + Talk videos from the 33rd Chaos Communication Congress – four-day hacker conference with workshops and talks on security, information technology and its effects on the society   
+    <https://www.youtube.com/playlist?list=PL_IxoDz1Nq2bHSp-T7fXC0Cw6z7mAxkjn>
++ Gerard
+  + Papercall.io CFP management tool (meetups, conferences  
+    <http://Papercall.io>
++ Mike
+  + ng conf talk selection committee (lots of great content to go through)  
++ Austin
+  + Flex-layout from Angular is AWESOME  
+    <https://github.com/angular/flex-layout>
+  + Ng2 fundamentals by Todd Motto dropping tonight! ( his words <<<< )  
+    <https://ultimateangular.com/angular-2-fundamentals>
+  + AngularClass Awesome-Angular2  
+    <https://github.com/AngularClass/awesome-angular2>
+  + Libraries.io - lets u subscribe to new releases  
+    <http://Libraries.io>
+  + Js weekly is my favie
+    <http://javascriptweekly.com/>
++ Justin
+  + Victor Savkin webinar on using WebStorm for Angular development  
+    <https://info.jetbrains.com/WebStorm-Webinar-February2017.html>