experiments. manual #3

Author: vm137

src/app/demo/component-tree/component-tree.component.html

@@ -5,7 +5,8 @@
   <app-progress-bar></app-progress-bar>
   <app-arrows></app-arrows>
   <app-mode-overview></app-mode-overview>
-
+  <app-feedback-widget></app-feedback-widget>  
+  <!-- <app-feedback-widget></app-feedback-widget> -->
   <!--  MILESTONE #3  Dependency Injection  -->
   <!-- RECAP -->
   <app-slide id="component">

src/app/demo/component-tree/component-tree.module.ts

@@ -5,14 +5,15 @@ import {SlidesRoutes} from '../../presentation/slide-routes';
 
 import {ExerciseModule} from '../../exercise/exersice.module';
 import {PresentationModule} from '../../presentation/presentation.module';
+import {FeedbackModule} from "../../feedback/feedback.module";
 import {BrowserWindowModule} from '../../browser-window/browser-window.module';
 
 const routes = RouterModule.forChild(
   SlidesRoutes.get(ComponentTreeComponent)
 );
 
 @NgModule({
-  imports: [routes, PresentationModule, ExerciseModule, BrowserWindowModule],
+  imports: [routes, PresentationModule, ExerciseModule, BrowserWindowModule, FeedbackModule],
   declarations: [ComponentTreeComponent],
   exports: [ComponentTreeComponent]
 })

src/app/demo/dependency-injection/dependency-injection.component.html

@@ -5,6 +5,7 @@
   <app-progress-bar></app-progress-bar>
   <app-arrows></app-arrows>
   <app-mode-overview></app-mode-overview>
+  <app-feedback-widget></app-feedback-widget>  
 
   <!--  MILESTONE #3  Dependency Injection  -->
   <!-- RECAP -->

src/app/demo/dependency-injection/dependency-injection.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {DependencyInjectionComponent} from './dependency-injection.component';
 import {RouterModule} from '@angular/router';
 import {SlidesRoutes} from '../../presentation/slide-routes';
-
+import {FeedbackModule} from "../../feedback/feedback.module";
 import {ExerciseModule} from '../../exercise/exersice.module';
 import {PresentationModule} from '../../presentation/presentation.module';
 
@@ -12,7 +12,7 @@ const routes = RouterModule.forChild(
 );
 
 @NgModule({
-  imports: [routes, PresentationModule, ExerciseModule],
+  imports: [routes, PresentationModule, ExerciseModule, FeedbackModule],
   declarations: [DependencyInjectionComponent],
   exports: [DependencyInjectionComponent]
 })

src/app/demo/experiments/experiments.component.html

@@ -5,6 +5,7 @@
   <app-progress-bar></app-progress-bar>
   <app-arrows></app-arrows>
   <app-mode-overview></app-mode-overview>
+  <app-feedback-widget></app-feedback-widget>
   <app-slide>
     <h2>How to use angular-presentation</h2>
     <pre>

src/app/demo/experiments/experiments.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 
 import {RouterModule} from '@angular/router';
 import {SlidesRoutes} from '../../presentation/slide-routes';
-
+import {FeedbackModule} from "../../feedback/feedback.module";
 import {ExperimentsComponent} from './experiments.component';
 import {PresentationModule} from '../../presentation/presentation.module';
 import {ExerciseModule} from "../../exercise/exersice.module";
@@ -13,7 +13,8 @@ const routes = RouterModule.forChild(
 );
 
 @NgModule({
-  imports: [routes, PresentationModule, ExerciseModule],
+  imports: [routes, PresentationModule, FeedbackModule],
+
   declarations: [ExperimentsComponent],
   exports: [ExperimentsComponent]
 })

src/app/demo/templates/templates.component.html

@@ -5,6 +5,7 @@
   <app-progress-bar></app-progress-bar>
   <app-arrows></app-arrows>
   <app-mode-overview></app-mode-overview>
+  <app-feedback-widget></app-feedback-widget>
   <app-slide id="component">
     <h1>Angular Templates</h1>
     <h3>For the following slides we are going to use this AppComponent Example</h3>

src/app/demo/templates/templates.module.ts

@@ -5,13 +5,14 @@ import {SlidesRoutes} from '../../presentation/slide-routes';
 import {TemplatesComponent} from './templates.component';
 import {ExerciseModule} from '../../exercise/exersice.module';
 import {PresentationModule} from '../../presentation/presentation.module';
+import {FeedbackModule} from "../../feedback/feedback.module";
 
 const routes = RouterModule.forChild(
   SlidesRoutes.get(TemplatesComponent)
 );
 
 @NgModule({
-  imports: [routes, PresentationModule, ExerciseModule],
+  imports: [routes, PresentationModule, ExerciseModule, FeedbackModule],
   declarations: [TemplatesComponent],
   exports: [TemplatesComponent]
 })

src/app/demo/typescript/typescript.component.html

@@ -5,6 +5,7 @@
   <app-progress-bar></app-progress-bar>
   <app-arrows></app-arrows>
   <app-mode-overview></app-mode-overview>
+  <app-feedback-widget></app-feedback-widget>  
 
   <!-- Intro -->
   <app-slide id="intro">

src/app/demo/typescript/typescript.component.ts

@@ -12,7 +12,7 @@ export class TypescriptComponent {
   code = {
     stringType: {
       code:  `let fullName: string = 'Bob Bobbington';
-let sentence: string = 'Hello, my name is \${ fullName }.';`
+let sentence: string = \`Hello, my name is \${ fullName }.\`;`
     },
     stringType2: {
       code: `let sentence: string = "Hello, my name is " + fullName + "."`
@@ -27,7 +27,7 @@ notSure = false; // okay, definitely a boolean`
   constructor(private name: string){}
   hello(){
      const greeting = 'Hello';
-		return '\${greeting} \${name}!';
+		 return \`\${greeting} \${name}!\`;
   }
 }
 

src/app/demo/typescript/typescript.module.ts

@@ -4,14 +4,14 @@ import {RouterModule} from '@angular/router';
 import {SlidesRoutes} from '../../presentation/slide-routes';
 import {ExerciseModule} from '../../exercise/exersice.module';
 import {PresentationModule} from 'app/presentation/presentation.module';
-
+import {FeedbackModule} from "../../feedback/feedback.module";
 
 const routes = RouterModule.forChild(
   SlidesRoutes.get(TypescriptComponent)
 );
 
 @NgModule({
-  imports: [routes, PresentationModule, ExerciseModule],
+  imports: [routes, PresentationModule, ExerciseModule, FeedbackModule],
   declarations: [TypescriptComponent],
   exports: [TypescriptComponent]
 })

src/app/exercise/editor/editor.component.ts

@@ -85,6 +85,7 @@ export class EditorComponent implements AfterViewInit, OnChanges, OnDestroy {
     let model = this.monacoConfigService.monaco.editor.getModel(this.file.path);
     if (!model) {
       model = this.monacoConfigService.monaco.editor.createModel(this.file.code, this.file.type, this.file.path);
+      model.isSingleEditorModel = true;
     }
 
     this.code = this.file.code;

src/app/exercise/services/monaco-config.service.ts

@@ -102,7 +102,7 @@ export class MonacoConfigService {
     const models = monaco.editor.getModels();
 
     if (models.length) {
-      models.forEach(model => model.dispose());
+      models.filter(model=>!model.isSingleEditorModel).forEach(model => model.dispose());
     }
 
     files.map(file => {

src/app/feedback/feedback.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AngularFireModule, AuthProviders, AuthMethods, AngularFire } from 'angularfire2';
-import {FormsModule} from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { FeedbackWidgetComponent } from './feedback-widget/feedback-widget.component';
 
 const firebaseConfig = {
@@ -10,10 +10,13 @@ const firebaseConfig = {
   databaseURL: "https://ng2-codelab.firebaseio.com",
   storageBucket: "ng2-codelab.appspot.com"
 };
+
+export const af = AngularFireModule.initializeApp(firebaseConfig);
+
 @NgModule({
   imports: [
     CommonModule,
-    AngularFireModule.initializeApp(firebaseConfig),
+    af,
     FormsModule
   ],
   providers:[
@@ -22,4 +25,6 @@ const firebaseConfig = {
   declarations: [FeedbackWidgetComponent],
   exports:[FeedbackWidgetComponent]
 })
-export class FeedbackModule { }
+export class FeedbackModule { 
+  
+}

src/app/presentation/arrows/arrows.component.html

@@ -1,2 +1,2 @@
-<div class="arrow-left" (click)="goToPreviousSlide()">&lt;</div>
-<div class="arrow-right" (click)="goToNextSlide()">&gt;</div>
+<div *ngIf="canGoPrevious()" class="arrow-left" (click)="goToPreviousSlide()">&lt;</div>
+<div *ngIf="canGoNext()"  class="arrow-right" (click)="goToNextSlide()">&gt;</div>

src/app/presentation/arrows/arrows.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-import {PresentationComponent} from '../presentation/presentation.component';
+import { Component, OnInit } from '@angular/core';
+import { PresentationComponent } from '../presentation/presentation.component';
 
 @Component({
   selector: 'app-arrows',
@@ -16,6 +16,13 @@ export class ArrowsComponent implements OnInit {
     this.presentation.nextSlide();
   }
 
+  canGoNext(): boolean {
+    return this.presentation.canGoNext();
+  }
+
+  canGoPrevious(): boolean {
+    return this.presentation.canGoPrevious();
+  }
   constructor(private presentation: PresentationComponent) {
 
   }

src/app/presentation/presentation/presentation.component.ts

@@ -53,21 +53,29 @@ export class PresentationComponent  {
   }
 
   nextSlide(isTriggeredByShortcut: boolean = false) {
-    if ((this.activeSlideIndex + 1 < this.generatedSlideIndex) && (this.areShortcutsEnabled || !isTriggeredByShortcut)) {
+    if (this.canGoNext() && (this.areShortcutsEnabled || !isTriggeredByShortcut)) {
       this.enableShortcuts();
       this.activeSlideIndex++;
       this.onSlideChange.next(this.activeSlideIndex);
     }
   }
 
   previousSlide(isTriggeredByShortcut: boolean = false) {
-    if ((this.activeSlideIndex > 0) && (this.areShortcutsEnabled || !isTriggeredByShortcut)) {
+    if (this.canGoPrevious() && (this.areShortcutsEnabled || !isTriggeredByShortcut)) {
       this.enableShortcuts();
       this.activeSlideIndex--;
       this.onSlideChange.next(this.activeSlideIndex);
     }
   }
 
+  canGoNext(): boolean {
+    return this.activeSlideIndex + 1 < this.generatedSlideIndex;
+  }
+
+  canGoPrevious(): boolean {
+    return this.activeSlideIndex > 0;
+  }
+
   disableShortcuts() {
     this.areShortcutsEnabled = false;
   }