ang2

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/ang2-preso.adoc b/ang2-preso.adoc
index 150ab5b..af40166 100644 (file)
--- a/ang2-preso.adoc
+++ b/ang2-preso.adoc
@@ -142,6 +142,24 @@ this.net.request(...).subscribe(
 * https://www.typescriptlang.org/
 * https://github.com/Microsoft/TypeScript/
 
+== TypeScript Fun: Classes
+
+[source,js]
+--------------------------------------------------------------------------
+export class Animal {
+    color: string;
+    constructor(color: string) {
+        this.color = color;
+    }
+    sayColor() {console.log(this.color)}
+}
+export class Ocelot extends Animal{
+}
+
+let o = new Ocelot('orange');
+o.sayColor();
+--------------------------------------------------------------------------
+
 == TypeScript Fun: Interfaces
 [source,js]
 --------------------------------------------------------------------------
@@ -179,6 +197,15 @@ https://35.186.179.218/eg2/staff/splash
 
 NOTE: This server will be alive for ~1 month.
 
+== Migrating to ng5
+
+[role="incremental"]
+* Angular5 
+* TypeScript 
+* I18N
+* Bootstrap4 
+* Dependency Variations
+
 == Strategies for Migrating to ng5
 
 * Inline Replacement
@@ -275,4 +302,3 @@ NOTE: This server will be alive for ~1 month.
 == Questions
 
 
-

diff --git a/ang2-preso.html b/ang2-preso.html
index 30b2b43..5f5baa7 100644 (file)
--- a/ang2-preso.html
+++ b/ang2-preso.html
@@ -4188,6 +4188,28 @@ Classes (inheritance), Interfaces, Types, etc.
 </div>\r
 </div>\r
 <div class="sect1 slide">\r
+<h1 id="_typescript_fun_classes">TypeScript Fun: Classes</h1>\r
+<div class="sectionbody" style="max-width:45em">\r
+<div class="listingblock">\r
+<div class="content"><!-- Generator: GNU source-highlight 3.1.8\r
+by Lorenzo Bettini\r
+http://www.lorenzobettini.it\r
+http://www.gnu.org/software/src-highlite -->\r
+<pre><tt><span style="font-weight: bold"><span style="color: #0000FF">export</span></span> <span style="font-weight: bold"><span style="color: #0000FF">class</span></span> Animal <span style="color: #FF0000">{</span>\r
+    color<span style="color: #990000">:</span> string<span style="color: #990000">;</span>\r
+    <span style="font-weight: bold"><span style="color: #000000">constructor</span></span><span style="color: #990000">(</span>color<span style="color: #990000">:</span> string<span style="color: #990000">)</span> <span style="color: #FF0000">{</span>\r
+        <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>color <span style="color: #990000">=</span> color<span style="color: #990000">;</span>\r
+    <span style="color: #FF0000">}</span>\r
+    <span style="font-weight: bold"><span style="color: #000000">sayColor</span></span><span style="color: #990000">()</span> <span style="color: #FF0000">{</span>console<span style="color: #990000">.</span><span style="font-weight: bold"><span style="color: #000000">log</span></span><span style="color: #990000">(</span><span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>color<span style="color: #990000">)</span><span style="color: #FF0000">}</span>\r
+<span style="color: #FF0000">}</span>\r
+<span style="font-weight: bold"><span style="color: #0000FF">export</span></span> <span style="font-weight: bold"><span style="color: #0000FF">class</span></span> Ocelot <span style="font-weight: bold"><span style="color: #0000FF">extends</span></span> Animal<span style="color: #FF0000">{</span>\r
+<span style="color: #FF0000">}</span>\r
+\r
+let o <span style="color: #990000">=</span> <span style="font-weight: bold"><span style="color: #0000FF">new</span></span> <span style="font-weight: bold"><span style="color: #000000">Ocelot</span></span><span style="color: #990000">(</span><span style="color: #FF0000">'orange'</span><span style="color: #990000">);</span>\r
+o<span style="color: #990000">.</span><span style="font-weight: bold"><span style="color: #000000">sayColor</span></span><span style="color: #990000">();</span></tt></pre></div></div>\r
+</div>\r
+</div>\r
+<div class="sect1 slide">\r
 <h1 id="_typescript_fun_interfaces">TypeScript Fun: Interfaces</h1>\r
 <div class="sectionbody" style="max-width:45em">\r
 <div class="listingblock">\r
@@ -4292,6 +4314,38 @@ Experiment with downgrading ng5 services for use in ng1.
 </div>\r
 </div>\r
 <div class="sect1 slide">\r
+<h1 id="_migrating_to_ng5">Migrating to ng5</h1>\r
+<div class="sectionbody" style="max-width:45em">\r
+<ul class=" incremental">\r
+<li>\r
+<span>\r
+Angular5\r
+</span>\r
+</li>\r
+<li>\r
+<span>\r
+TypeScript\r
+</span>\r
+</li>\r
+<li>\r
+<span>\r
+I18N\r
+</span>\r
+</li>\r
+<li>\r
+<span>\r
+Bootstrap4\r
+</span>\r
+</li>\r
+<li>\r
+<span>\r
+Dependency Variations\r
+</span>\r
+</li>\r
+</ul>\r
+</div>\r
+</div>\r
+<div class="sect1 slide">\r
 <h1 id="_strategies_for_migrating_to_ng5">Strategies for Migrating to ng5</h1>\r
 <div class="sectionbody" style="max-width:45em">\r
 <ul class="">\r