added HistoryLink directive

src/current-tutorial.ts

@@ -5,11 +5,13 @@ export class ActivatedTutorial {
   public tutorial: Subject<TutorialDefinition>;
   public step: Subject<TutorialStep>;
   public steps: Subject<TutorialStep[]>;
+  public branch: Subject<string>;
 
   constructor() {
     this.step = new Subject<TutorialStep>();
     this.tutorial = new Subject<TutorialDefinition>();
     this.steps = new Subject<TutorialStep[]>();
+    this.branch = new Subject<string>();
   }
 
   updateCurrentTutorial(tutorial: TutorialDefinition) {
@@ -23,4 +25,8 @@ export class ActivatedTutorial {
   updateCurrentSteps(steps: TutorialStep[]) {
     this.steps.next(steps);
   }
+
+  updateCurrentBranch(branch: string) {
+    this.branch.next(branch);
+  }
 }

src/tutorial-code-diff.directive.ts

@@ -36,7 +36,7 @@ export class CodeDiffLink {
         }
 
         let compareEnd = 'step' + (index + 1);
-        let url = 'https://github.com/' + tutorial.gitHub + '/compare/' + compareStart + '...' + compareEnd;
+        let url = `https://github.com/${tutorial.gitHub}/compare/${compareStart}...${compareEnd}`;
 
         renderer.setElementAttribute(el.nativeElement, 'href', url);
       }

src/tutorial-history.directive.ts

@@ -0,0 +1,31 @@
+import {Injectable, Directive, ElementRef, Renderer} from '@angular/core';
+import {ActivatedTutorial} from './current-tutorial';
+import {TutorialDefinition} from './tutorial-definition';
+import {Observable} from 'rxjs';
+
+@Directive({
+  selector: '[historyLink]'
+})
+@Injectable()
+export class HistoryLink {
+  constructor(private activated: ActivatedTutorial, el: ElementRef, renderer: Renderer) {
+    Observable.zip(activated.tutorial, activated.branch, (tutorial, branch) => {
+      return {
+        tutorial,
+        branch
+      };
+    }).subscribe((data) => {
+      let tutorial: TutorialDefinition = data.tutorial;
+      let branch: string = data.branch;
+
+      let url = `https://github.com/${tutorial.gitHub}/tree/${branch}-history`;
+
+      renderer.setElementAttribute(el.nativeElement, 'href', url);
+    });
+  }
+
+  pad(n, width, z = '0') {
+    n = n + '';
+    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+  }
+}

src/tutorial-page.component.ts

@@ -23,6 +23,7 @@ export class TutorialPage implements OnInit {
   private tutorial: TutorialDefinition;
   private step: TutorialStep;
   private steps: TutorialStep[];
+  private branch: string;
 
   constructor(private route: ActivatedRoute,
               private compiler: Compiler,
@@ -37,9 +38,11 @@ export class TutorialPage implements OnInit {
       this.tutorial = <TutorialDefinition>routeData.tutorialObject;
       this.step = <TutorialStep>routeData.stepObject;
       this.steps = <TutorialStep[]>routeData.steps;
+      this.branch = <string>routeData.gitTagRevision;
       this.currentTutorial.updateCurrentTutorial(this.tutorial);
       this.currentTutorial.updateCurrentStep(this.step);
       this.currentTutorial.updateCurrentSteps(this.steps);
+      this.currentTutorial.updateCurrentBranch(this.branch);
       let htmlContent = data.resolveData.step;
 
       this.seo.setSeoDescription(htmlContent);

src/tutorials-module.ts

@@ -20,6 +20,7 @@ import {ApiLoadResolve} from './api-load-resolve';
 import {ActivatedApi} from './current-api';
 import {StepListComponent} from './steps-list.component';
 import {CodeDiffLink} from './tutorial-code-diff.directive';
+import {HistoryLink} from './tutorial-history.directive';
 import {StepDownloadZipLink} from './tutorial-download-zip.directive';
 import {PageTitleService} from './page-title.service';
 
@@ -34,6 +35,7 @@ const exportsAndDeclarations = [
   ApiVersionsList,
   ApiListItems,
   CodeDiffLink,
+  HistoryLink,
   StepDownloadZipLink
 ];