ang6 notes

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

diff --git a/ang6-toturial.adoc b/ang6-toturial.adoc
index ae4a621..2b2fde8 100644 (file)
--- a/ang6-toturial.adoc
+++ b/ang6-toturial.adoc
@@ -9,8 +9,6 @@
 
 == Data Flow: Passing Static Strings To Components ==
 
-* Invoke component
-
 [source,html]
 ----------------------------------------------------------------------
 <my-component someAttr="Hello World"></my-component>
@@ -25,8 +23,6 @@
 
 == Data Flow: Passing Dynamic Values To Components ==
 
-* Invoke component
-
 [source,html]
 ----------------------------------------------------------------------
 <my-component [someAttr]="someVar"></my-component>
@@ -53,8 +49,6 @@ _someAttr: string;
 
 == Data Flow: Responding to Component Events ==
 
-* Invoke Component
-
 [source,html]
 ----------------------------------------------------------------------
 <my-component (someAttr)="someHandler($event, ...)"></my-component>
@@ -66,9 +60,9 @@ _someAttr: string;
 [source,js]
 ----------------------------------------------------------------------
 @Output someAttr: EventEmitter<string>;
-// ...
+
 this.someAttr = new EventEmitter<string>();
-// ...
+
 this.someAttr.emit('Hello World'); // "Hello World" == $event
 ----------------------------------------------------------------------
 
@@ -83,8 +77,6 @@ myComponentRef.someAttr.subscribe(s => this.myVar = s);
 
 This is most like AngularJS 'ng-model="someVar"';
 
-* Invoke Component 
-
 [source,html]
 ----------------------------------------------------------------------
 <my-component [(ngModel)]="someVar"></my-component>
@@ -96,21 +88,26 @@ instead use a combination of input and output channels.
 
 == Data Flow: Direct Communication
 
-* Calling Code
+* Add a template variable
 
 [source,html]
 ----------------------------------------------------------------------
 <my-component #myComponent></my-component>
 ----------------------------------------------------------------------
 
+* Talk directly to the component instance
+
 [source,js]
 ----------------------------------------------------------------------
 @ViewChild('myComponent') myCompRef: MyComponent;
-// ...
+
 this.myCompRef.someAttr = this.whatever;
 this.myCompRef.someFunction();
 ----------------------------------------------------------------------
 
+NOTE: this.myCompRef will be NULL when *ngIf prevents #myComponent from
+rendering!
+
 == Templates / Syntax ==
 
 [source,html]
@@ -126,7 +123,7 @@ this.myCompRef.someFunction();
 </ng-template>
 
 <ng-container>
-    <!-- No-Op container, good for combingin with ngFor/ngIf -->
+    <!-- No-Op container, good for combining with ngFor/ngIf -->
 </ng-container>
 ----------------------------------------------------------------------
 
@@ -143,23 +140,22 @@ this.myCompRef.someFunction();
   </marquee>
 </ng-template>
 
-<!-- invoke component with ref to my content template -->
-<ad-component #myComponent [adTemplate]="myTemplate">
+<ad-component [adTemplate]="myTemplate">
 </ad-component>
 ----------------------------------------------------------------------
 
-* AddComponent Template
+* AddComponent Code
 
+[source,js]
 ----------------------------------------------------------------------
-<ng-container *ngTemplateOutlet="adTemplate; context: myObject">
-</ng-container>
+@Input() adTemplate: TemplateRef<any>;
 ----------------------------------------------------------------------
 
-* AddComponent Code
+* AddComponent Template
 
-[source,js]
 ----------------------------------------------------------------------
-@Input() adTemplate: TemplateRef<any>;
+<ng-container *ngTemplateOutlet="adTemplate; context: someObject">
+</ng-container>
 ----------------------------------------------------------------------
 
 == Lifecycle hooks
@@ -228,7 +224,6 @@ Modules serve 2 main functions:
 [source,js]
 ----------------------------------------------------------------------
 const routes: Routes = [
-  // ...
   { path: 'record/:id',
     component: RecordComponent
   }, {
@@ -245,16 +240,19 @@ const routes: Routes = [
 [source,js]
 ----------------------------------------------------------------------
 constructor(private route: ActivatedRoute) {}
+
 ngOnInit() {
     this.route.paramMap.subscribe((params: ParamMap) => {
-        this.recordId = +params.get('id');
+        this.recordId = +params.get('id');  // '+' coerce number
         this.recordTab = params.get('tab') || 'copy_table';
         this.loadRecord();
     });
 }
 ----------------------------------------------------------------------
 
-== Routing: Lazy Loading ==
+== Routing: Resolvers / Lazy Loading ==
+
+'staff.module.ts'
 
 [source,js]
 ----------------------------------------------------------------------
@@ -263,20 +261,18 @@ const routes: Routes = [{
   component: StaffComponent,
   resolve: {staffResolver : StaffResolver},
   children: [{
-    path: '',
-    redirectTo: 'splash',
-    pathMatch: 'full',
-  }, {
-    path: 'login',
-    component: StaffLoginComponent
-  }, {
     path: 'catalog',
     loadChildren : '@eg/staff/catalog/catalog.module#CatalogModule'
-  }, // ...
   }]
 }];
 ----------------------------------------------------------------------
 
+Navigate to /staff/catalog 
+
+* => BaseModule => BaseRoutingModule => BaseResolver 
+* => StaffModule => StaffRoutingModle => StaffResolver => StaffComponent => Fetch Catalog Code
+* => CatalogModule => CatalogRoutingModule => CatalogResolver => ...
+
 == Misc. ==
 
 == Observables ==
@@ -318,13 +314,6 @@ thing.getThings().subscribe(oneValue => console.log(oneValue.bar));
 ** Templates are pre-compiled to JS.
 ** About 1/3 of download size.
 
-* ng-lint
-** Can also warn on imports
-
-* --watch
-** Kill and restart after any major changes (moving modules around, 
-   adding new components, etc.)
-
 == My Dev Setup
 
 * Symlink the build destination directory
@@ -336,6 +325,7 @@ ln -s /home/berick/code/Evergreen/Open-ILS/web/eg2/en-US \
 ----------------------------------------------------------------------
 
 * Keep a terminal tab open with build running
+** ctrl-c and restart after major changes.
 
 [source,sh]
 ----------------------------------------------------------------------

diff --git a/ang6-toturial.html b/ang6-toturial.html
index 8deafa1..c4c6081 100644 (file)
--- a/ang6-toturial.html
+++ b/ang6-toturial.html
@@ -3846,13 +3846,6 @@ setTimeout(w3c_slidy.hide_slides, 50);
 <div class="sect1 slide">\r
 <h1 id="_data_flow_passing_static_strings_to_components">Data Flow: Passing Static Strings To Components</h1>\r
 <div class="sectionbody" style="max-width:45em">\r
-<ul class="">\r
-<li>\r
-<span>\r
-Invoke component\r
-</span>\r
-</li>\r
-</ul>\r
 <div class="listingblock">\r
 <div class="content"><!-- Generator: GNU source-highlight\r
 by Lorenzo Bettini\r
@@ -3877,13 +3870,6 @@ http://www.gnu.org/software/src-highlite -->
 <div class="sect1 slide">\r
 <h1 id="_data_flow_passing_dynamic_values_to_components">Data Flow: Passing Dynamic Values To Components</h1>\r
 <div class="sectionbody" style="max-width:45em">\r
-<ul class="">\r
-<li>\r
-<span>\r
-Invoke component\r
-</span>\r
-</li>\r
-</ul>\r
 <div class="listingblock">\r
 <div class="content"><!-- Generator: GNU source-highlight\r
 by Lorenzo Bettini\r
@@ -3930,13 +3916,6 @@ http://www.gnu.org/software/src-highlite -->
 <div class="sect1 slide">\r
 <h1 id="_data_flow_responding_to_component_events">Data Flow: Responding to Component Events</h1>\r
 <div class="sectionbody" style="max-width:45em">\r
-<ul class="">\r
-<li>\r
-<span>\r
-Invoke Component\r
-</span>\r
-</li>\r
-</ul>\r
 <div class="listingblock">\r
 <div class="content"><!-- Generator: GNU source-highlight\r
 by Lorenzo Bettini\r
@@ -3957,9 +3936,9 @@ by Lorenzo Bettini
 http://www.lorenzobettini.it\r
 http://www.gnu.org/software/src-highlite -->\r
 <pre><tt>@Output someAttr<span style="color: #990000">:</span> EventEmitter<span style="color: #990000">&lt;</span>string<span style="color: #990000">&gt;;</span>\r
-<span style="font-style: italic"><span style="color: #9A1900">// ...</span></span>\r
+\r
 <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>someAttr <span style="color: #990000">=</span> <span style="font-weight: bold"><span style="color: #0000FF">new</span></span> EventEmitter<span style="color: #990000">&lt;</span>string<span style="color: #990000">&gt;();</span>\r
-<span style="font-style: italic"><span style="color: #9A1900">// ...</span></span>\r
+\r
 <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>someAttr<span style="color: #990000">.</span><span style="font-weight: bold"><span style="color: #000000">emit</span></span><span style="color: #990000">(</span><span style="color: #FF0000">'Hello World'</span><span style="color: #990000">);</span> <span style="font-style: italic"><span style="color: #9A1900">// "Hello World" == $event</span></span></tt></pre></div></div>\r
 <ul class="">\r
 <li>\r
@@ -3980,13 +3959,6 @@ http://www.gnu.org/software/src-highlite -->
 <h1 id="_data_flow_passing_dynamic_values_to_from_components">Data Flow: Passing Dynamic Values To/From Components</h1>\r
 <div class="sectionbody" style="max-width:45em">\r
 <div class="paragraph"><p>This is most like AngularJS <em>ng-model="someVar"</em>;</p></div>\r
-<ul class="">\r
-<li>\r
-<span>\r
-Invoke Component\r
-</span>\r
-</li>\r
-</ul>\r
 <div class="listingblock">\r
 <div class="content"><!-- Generator: GNU source-highlight\r
 by Lorenzo Bettini\r
@@ -4010,7 +3982,7 @@ instead use a combination of input and output channels.</td>
 <ul class="">\r
 <li>\r
 <span>\r
-Calling Code\r
+Add a template variable\r
 </span>\r
 </li>\r
 </ul>\r
@@ -4020,15 +3992,31 @@ by Lorenzo Bettini
 http://www.lorenzobettini.it\r
 http://www.gnu.org/software/src-highlite -->\r
 <pre><tt><span style="font-weight: bold"><span style="color: #0000FF">&lt;my-component</span></span> #<span style="color: #009900">myComponent</span><span style="font-weight: bold"><span style="color: #0000FF">&gt;&lt;/my-component&gt;</span></span></tt></pre></div></div>\r
+<ul class="">\r
+<li>\r
+<span>\r
+Talk directly to the component instance\r
+</span>\r
+</li>\r
+</ul>\r
 <div class="listingblock">\r
 <div class="content"><!-- Generator: GNU source-highlight\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: #000000">ViewChild</span></span><span style="color: #990000">(</span><span style="color: #FF0000">'myComponent'</span><span style="color: #990000">)</span> myCompRef<span style="color: #990000">:</span> MyComponent<span style="color: #990000">;</span>\r
-<span style="font-style: italic"><span style="color: #9A1900">// ...</span></span>\r
+\r
 <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>myCompRef<span style="color: #990000">.</span>someAttr <span style="color: #990000">=</span> <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>whatever<span style="color: #990000">;</span>\r
 <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>myCompRef<span style="color: #990000">.</span><span style="font-weight: bold"><span style="color: #000000">someFunction</span></span><span style="color: #990000">();</span></tt></pre></div></div>\r
+<div class="admonitionblock">\r
+<table><tr>\r
+<td class="icon">\r
+<div class="title">Note</div>\r
+</td>\r
+<td class="content">this.myCompRef will be NULL when *ngIf prevents #myComponent from\r
+rendering!</td>\r
+</tr></table>\r
+</div>\r
 </div>\r
 </div>\r
 <div class="sect1 slide">\r
@@ -4050,7 +4038,7 @@ http://www.gnu.org/software/src-highlite -->
 <span style="font-weight: bold"><span style="color: #0000FF">&lt;/ng-template&gt;</span></span>\r
 \r
 <span style="font-weight: bold"><span style="color: #0000FF">&lt;ng-container&gt;</span></span>\r
-    <span style="font-style: italic"><span style="color: #9A1900">&lt;!-- No-Op container, good for combingin with ngFor/ngIf --&gt;</span></span>\r
+    <span style="font-style: italic"><span style="color: #9A1900">&lt;!-- No-Op container, good for combining with ngFor/ngIf --&gt;</span></span>\r
 <span style="font-weight: bold"><span style="color: #0000FF">&lt;/ng-container&gt;</span></span></tt></pre></div></div>\r
 </div>\r
 </div>\r
@@ -4076,34 +4064,33 @@ http://www.gnu.org/software/src-highlite -->
   <span style="font-weight: bold"><span style="color: #0000FF">&lt;/marquee&gt;</span></span>\r
 <span style="font-weight: bold"><span style="color: #0000FF">&lt;/ng-template&gt;</span></span>\r
 \r
-<span style="font-style: italic"><span style="color: #9A1900">&lt;!-- invoke component with ref to my content template --&gt;</span></span>\r
-<span style="font-weight: bold"><span style="color: #0000FF">&lt;ad-component</span></span> #<span style="color: #009900">myComponent</span> <span style="color: #009900">[adTemplate]</span><span style="color: #990000">=</span><span style="color: #FF0000">"myTemplate"</span><span style="font-weight: bold"><span style="color: #0000FF">&gt;</span></span>\r
+<span style="font-weight: bold"><span style="color: #0000FF">&lt;ad-component</span></span> <span style="color: #009900">[adTemplate]</span><span style="color: #990000">=</span><span style="color: #FF0000">"myTemplate"</span><span style="font-weight: bold"><span style="color: #0000FF">&gt;</span></span>\r
 <span style="font-weight: bold"><span style="color: #0000FF">&lt;/ad-component&gt;</span></span></tt></pre></div></div>\r
 <ul class="">\r
 <li>\r
 <span>\r
-AddComponent Template\r
+AddComponent Code\r
 </span>\r
 </li>\r
 </ul>\r
 <div class="listingblock">\r
-<div class="content">\r
-<pre><code>&lt;ng-container *ngTemplateOutlet="adTemplate; context: myObject"&gt;\r
-&lt;/ng-container&gt;</code></pre>\r
-</div></div>\r
+<div class="content"><!-- Generator: GNU source-highlight\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: #000000">Input</span></span><span style="color: #990000">()</span> adTemplate<span style="color: #990000">:</span> TemplateRef<span style="color: #990000">&lt;</span>any<span style="color: #990000">&gt;;</span></tt></pre></div></div>\r
 <ul class="">\r
 <li>\r
 <span>\r
-AddComponent Code\r
+AddComponent Template\r
 </span>\r
 </li>\r
 </ul>\r
 <div class="listingblock">\r
-<div class="content"><!-- Generator: GNU source-highlight\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: #000000">Input</span></span><span style="color: #990000">()</span> adTemplate<span style="color: #990000">:</span> TemplateRef<span style="color: #990000">&lt;</span>any<span style="color: #990000">&gt;;</span></tt></pre></div></div>\r
+<div class="content">\r
+<pre><code>&lt;ng-container *ngTemplateOutlet="adTemplate; context: someObject"&gt;\r
+&lt;/ng-container&gt;</code></pre>\r
+</div></div>\r
 </div>\r
 </div>\r
 <div class="sect1 slide">\r
@@ -4210,7 +4197,6 @@ by Lorenzo Bettini
 http://www.lorenzobettini.it\r
 http://www.gnu.org/software/src-highlite -->\r
 <pre><tt><span style="font-weight: bold"><span style="color: #0000FF">const</span></span> routes<span style="color: #990000">:</span> Routes <span style="color: #990000">=</span> <span style="color: #990000">[</span>\r
-  <span style="font-style: italic"><span style="color: #9A1900">// ...</span></span>\r
   <span style="color: #FF0000">{</span> path<span style="color: #990000">:</span> <span style="color: #FF0000">'record/:id'</span><span style="color: #990000">,</span>\r
     component<span style="color: #990000">:</span> RecordComponent\r
   <span style="color: #FF0000">}</span><span style="color: #990000">,</span> <span style="color: #FF0000">{</span>\r
@@ -4236,9 +4222,10 @@ by Lorenzo Bettini
 http://www.lorenzobettini.it\r
 http://www.gnu.org/software/src-highlite -->\r
 <pre><tt><span style="font-weight: bold"><span style="color: #000000">constructor</span></span><span style="color: #990000">(</span><span style="font-weight: bold"><span style="color: #0000FF">private</span></span> route<span style="color: #990000">:</span> ActivatedRoute<span style="color: #990000">)</span> <span style="color: #FF0000">{}</span>\r
+\r
 <span style="font-weight: bold"><span style="color: #000000">ngOnInit</span></span><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>route<span style="color: #990000">.</span>paramMap<span style="color: #990000">.</span><span style="font-weight: bold"><span style="color: #000000">subscribe</span></span><span style="color: #990000">((</span>params<span style="color: #990000">:</span> ParamMap<span style="color: #990000">)</span> <span style="color: #990000">=&gt;</span> <span style="color: #FF0000">{</span>\r
-        <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>recordId <span style="color: #990000">=</span> <span style="color: #990000">+</span>params<span style="color: #990000">.</span><span style="font-weight: bold"><span style="color: #000000">get</span></span><span style="color: #990000">(</span><span style="color: #FF0000">'id'</span><span style="color: #990000">);</span>\r
+        <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>recordId <span style="color: #990000">=</span> <span style="color: #990000">+</span>params<span style="color: #990000">.</span><span style="font-weight: bold"><span style="color: #000000">get</span></span><span style="color: #990000">(</span><span style="color: #FF0000">'id'</span><span style="color: #990000">);</span>  <span style="font-style: italic"><span style="color: #9A1900">// '+' coerce number</span></span>\r
         <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span>recordTab <span style="color: #990000">=</span> params<span style="color: #990000">.</span><span style="font-weight: bold"><span style="color: #000000">get</span></span><span style="color: #990000">(</span><span style="color: #FF0000">'tab'</span><span style="color: #990000">)</span> <span style="color: #990000">||</span> <span style="color: #FF0000">'copy_table'</span><span style="color: #990000">;</span>\r
         <span style="font-weight: bold"><span style="color: #0000FF">this</span></span><span style="color: #990000">.</span><span style="font-weight: bold"><span style="color: #000000">loadRecord</span></span><span style="color: #990000">();</span>\r
     <span style="color: #FF0000">}</span><span style="color: #990000">);</span>\r
@@ -4246,8 +4233,9 @@ http://www.gnu.org/software/src-highlite -->
 </div>\r
 </div>\r
 <div class="sect1 slide">\r
-<h1 id="_routing_lazy_loading">Routing: Lazy Loading</h1>\r
+<h1 id="_routing_resolvers_lazy_loading">Routing: Resolvers / Lazy Loading</h1>\r
 <div class="sectionbody" style="max-width:45em">\r
+<div class="paragraph"><p><em>staff.module.ts</em></p></div>\r
 <div class="listingblock">\r
 <div class="content"><!-- Generator: GNU source-highlight\r
 by Lorenzo Bettini\r
@@ -4258,18 +4246,28 @@ http://www.gnu.org/software/src-highlite -->
   component<span style="color: #990000">:</span> StaffComponent<span style="color: #990000">,</span>\r
   resolve<span style="color: #990000">:</span> <span style="color: #FF0000">{</span>staffResolver <span style="color: #990000">:</span> StaffResolver<span style="color: #FF0000">}</span><span style="color: #990000">,</span>\r
   children<span style="color: #990000">:</span> <span style="color: #990000">[</span><span style="color: #FF0000">{</span>\r
-    path<span style="color: #990000">:</span> <span style="color: #FF0000">''</span><span style="color: #990000">,</span>\r
-    redirectTo<span style="color: #990000">:</span> <span style="color: #FF0000">'splash'</span><span style="color: #990000">,</span>\r
-    pathMatch<span style="color: #990000">:</span> <span style="color: #FF0000">'full'</span><span style="color: #990000">,</span>\r
-  <span style="color: #FF0000">}</span><span style="color: #990000">,</span> <span style="color: #FF0000">{</span>\r
-    path<span style="color: #990000">:</span> <span style="color: #FF0000">'login'</span><span style="color: #990000">,</span>\r
-    component<span style="color: #990000">:</span> StaffLoginComponent\r
-  <span style="color: #FF0000">}</span><span style="color: #990000">,</span> <span style="color: #FF0000">{</span>\r
     path<span style="color: #990000">:</span> <span style="color: #FF0000">'catalog'</span><span style="color: #990000">,</span>\r
     loadChildren <span style="color: #990000">:</span> <span style="color: #FF0000">'@eg/staff/catalog/catalog.module#CatalogModule'</span>\r
-  <span style="color: #FF0000">}</span><span style="color: #990000">,</span> <span style="font-style: italic"><span style="color: #9A1900">// ...</span></span>\r
   <span style="color: #FF0000">}</span><span style="color: #990000">]</span>\r
 <span style="color: #FF0000">}</span><span style="color: #990000">];</span></tt></pre></div></div>\r
+<div class="paragraph"><p>Navigate to /staff/catalog</p></div>\r
+<ul class="">\r
+<li>\r
+<span>\r
+&#8658; BaseModule &#8658; BaseRoutingModule &#8658; BaseResolver\r
+</span>\r
+</li>\r
+<li>\r
+<span>\r
+&#8658; StaffModule &#8658; StaffRoutingModle &#8658; StaffResolver &#8658; StaffComponent &#8658; Fetch Catalog Code\r
+</span>\r
+</li>\r
+<li>\r
+<span>\r
+&#8658; CatalogModule &#8658; CatalogRoutingModule &#8658; CatalogResolver &#8658; &#8230;\r
+</span>\r
+</li>\r
+</ul>\r
 </div>\r
 </div>\r
 <div class="sect1 slide">\r
@@ -4362,31 +4360,6 @@ About 1/3 of download size.
 </li>\r
 </ul>\r
 </li>\r
-<li>\r
-<span>\r
-ng-lint\r
-</span>\r
-<ul class="">\r
-<li>\r
-<span>\r
-Can also warn on imports\r
-</span>\r
-</li>\r
-</ul>\r
-</li>\r
-<li>\r
-<span>\r
---watch\r
-</span>\r
-<ul class="">\r
-<li>\r
-<span>\r
-Kill and restart after any major changes (moving modules around,\r
-   adding new components, etc.)\r
-</span>\r
-</li>\r
-</ul>\r
-</li>\r
 </ul>\r
 </div>\r
 </div>\r
@@ -4412,6 +4385,13 @@ http://www.gnu.org/software/src-highlite -->
 <span>\r
 Keep a terminal tab open with build running\r
 </span>\r
+<ul class="">\r
+<li>\r
+<span>\r
+ctrl-c and restart after major changes.\r
+</span>\r
+</li>\r
+</ul>\r
 </li>\r
 </ul>\r
 <div class="listingblock">\r