From: Bill Erickson Date: Fri, 2 Nov 2018 15:43:45 +0000 (-0400) Subject: ang6 notes X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=2231757cd5f3e8308a9df12a5a20097bf00b8f85;p=working%2Frandom.git ang6 notes Signed-off-by: Bill Erickson --- diff --git a/ang6-toturial.adoc b/ang6-toturial.adoc index ae4a6212c..2b2fde8b6 100644 --- a/ang6-toturial.adoc +++ b/ang6-toturial.adoc @@ -9,8 +9,6 @@ == Data Flow: Passing Static Strings To Components == -* Invoke component - [source,html] ---------------------------------------------------------------------- @@ -25,8 +23,6 @@ == Data Flow: Passing Dynamic Values To Components == -* Invoke component - [source,html] ---------------------------------------------------------------------- @@ -53,8 +49,6 @@ _someAttr: string; == Data Flow: Responding to Component Events == -* Invoke Component - [source,html] ---------------------------------------------------------------------- @@ -66,9 +60,9 @@ _someAttr: string; [source,js] ---------------------------------------------------------------------- @Output someAttr: EventEmitter; -// ... + this.someAttr = new EventEmitter(); -// ... + 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] ---------------------------------------------------------------------- @@ -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] ---------------------------------------------------------------------- ---------------------------------------------------------------------- +* 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(); - + ---------------------------------------------------------------------- @@ -143,23 +140,22 @@ this.myCompRef.someFunction(); - - + ---------------------------------------------------------------------- -* AddComponent Template +* AddComponent Code +[source,js] ---------------------------------------------------------------------- - - +@Input() adTemplate: TemplateRef; ---------------------------------------------------------------------- -* AddComponent Code +* AddComponent Template -[source,js] ---------------------------------------------------------------------- -@Input() adTemplate: TemplateRef; + + ---------------------------------------------------------------------- == 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 8deafa12d..c4c6081ef 100644 --- a/ang6-toturial.html +++ b/ang6-toturial.html @@ -3846,13 +3846,6 @@ setTimeout(w3c_slidy.hide_slides, 50);

Data Flow: Passing Static Strings To Components

-
    -
  • - -Invoke component - -
    • -

Data Flow: Passing Dynamic Values To Components

-
    -
  • - -Invoke component - -
    • -

Data Flow: Responding to Component Events

-
    -
  • - -Invoke Component - -
    • -
@Output someAttr: EventEmitter<string>;
-// ...
+
 this.someAttr = new EventEmitter<string>();
-// ...
+
 this.someAttr.emit('Hello World'); // "Hello World" == $event
  • @@ -3980,13 +3959,6 @@ http://www.gnu.org/software/src-highlite -->

    Data Flow: Passing Dynamic Values To/From Components

    This is most like AngularJS ng-model="someVar";

    -
      -
    • - -Invoke Component - -
      • -
    <my-component #myComponent></my-component>
    +
      +
    • + +Talk directly to the component instance + +
      • +
    @ViewChild('myComponent') myCompRef: MyComponent;
-// ...
+
 this.myCompRef.someAttr = this.whatever;
 this.myCompRef.someFunction();
    +
    + + + +
    +
    Note
    +    		this.myCompRef will be NULL when *ngIf prevents #myComponent from +rendering!
    +
@@ -4050,7 +4038,7 @@ http://www.gnu.org/software/src-highlite --> </ng-template> <ng-container> - <!-- No-Op container, good for combingin with ngFor/ngIf --> + <!-- No-Op container, good for combining with ngFor/ngIf --> </ng-container>
@@ -4076,34 +4064,33 @@ http://www.gnu.org/software/src-highlite --> </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
-
-
<ng-container *ngTemplateOutlet="adTemplate; context: myObject">
-</ng-container>
-
+
+
@Input() adTemplate: TemplateRef<any>;
  • -AddComponent Code +AddComponent Template
-
-
@Input() adTemplate: TemplateRef<any>;
+
+
<ng-container *ngTemplateOutlet="adTemplate; context: someObject">
+</ng-container>
+
@@ -4210,7 +4197,6 @@ by Lorenzo Bettini http://www.lorenzobettini.it http://www.gnu.org/software/src-highlite --> 
const routes: Routes = [
-  // ...
   { path: 'record/:id',
     component: RecordComponent
   }, {
@@ -4236,9 +4222,10 @@ by Lorenzo Bettini
 http://www.lorenzobettini.it
 http://www.gnu.org/software/src-highlite -->
 
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();
     });
@@ -4246,8 +4233,9 @@ http://www.gnu.org/software/src-highlite -->
-

Routing: Lazy Loading

+

Routing: Resolvers / Lazy Loading

+

staff.module.ts

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 ⇒ … + +
    • +
@@ -4362,31 +4360,6 @@ 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.) - -
      • -
    -
    • @@ -4412,6 +4385,13 @@ http://www.gnu.org/software/src-highlite --> Keep a terminal tab open with build running +
      +
    • + +ctrl-c and restart after major changes. + +
      • +