Tohuwabohu excorcism

User Tools

Site Tools

Trace: • jpa
programming:angular

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
programming:angular [2023/07/26 06:00] – skipidarprogramming:angular [2023/11/01 07:31] (current) – ↷ Page moved from camunda:programming:angular to programming:angular skipidar
Line 16: Line 16:
 == let == == let ==
  
-use '''let''' to declare variables. +use ''let'' to declare variables. 
-Dont use '''var''', it sometime doesnt respect the scope, like in for loops.+Dont use ''var'', it sometime doesnt respect the scope, like in for loops.
  
-Typescript resolves the conflicts between scopes on its own, when using '''let'''+Typescript resolves the conflicts between scopes on its own, when using ''let''
  
  
Line 163: Line 163:
  
 Watch changes in code and auto rebuild Watch changes in code and auto rebuild
 +<code>
 +ng build --watch --poll 500 --configuration development
 +</code>
 +
 +To check if any module in a project is 'old': ''npm outdated''.
 +
 +To update all dependencies, if you are confident this is desirable: ''npm update''.
 +
 +To update all dependencies, if you are confident this is desirable: ''npm update xml2js''.
 +
 +To update package.json version numbers, append the --save flag: ''npm update --save''.
 <code> <code>
 ng build --watch --poll 500 --configuration development ng build --watch --poll 500 --configuration development
Line 391: Line 402:
  
  
-TypeScript eliminates this boilerplate of using '''"this.make=make"''' by using +TypeScript eliminates this boilerplate of using ''"this.make=make"'' by using 
 accessors on the constructor parameters.  accessors on the constructor parameters. 
  
Line 761: Line 772:
 A new **component** "alf-component1" : A new **component** "alf-component1" :
  
-'''app/alf-component1/alf-component1.component.spec.ts'''+''app/alf-component1/alf-component1.component.spec.ts''
 <sxh ts> <sxh ts>
 import {Component, Input} from '@angular/core'; import {Component, Input} from '@angular/core';
Line 783: Line 794:
 Because a field "name" exists in component - I can use it in the template: Because a field "name" exists in component - I can use it in the template:
  
-'''app/alf-component1/alf-component1.component.html'''+''app/alf-component1/alf-component1.component.html''
  
 <sxh ts> <sxh ts>
Line 792: Line 803:
  
  
-'''app/app.component.ts'''+''app/app.component.ts''
  
 Define a "title" field. Define a "title" field.
Line 814: Line 825:
 And I bind the title field of root component to it. And I bind the title field of root component to it.
  
-'''app/app.component.spec.ts'''+''app/app.component.spec.ts''
 <sxh ts> <sxh ts>
     <app-alf-component1 [name]="title"></app-alf-component1>     <app-alf-component1 [name]="title"></app-alf-component1>
Line 825: Line 836:
 A new **component** "alf-component1" : A new **component** "alf-component1" :
  
-'''app/alf-component1/alf-component1.component.spec.ts'''+''app/alf-component1/alf-component1.component.spec.ts''
 <sxh ts> <sxh ts>
 import {Component, Input} from '@angular/core'; import {Component, Input} from '@angular/core';
Line 846: Line 857:
 Because a field "liked" exists in component - I can use to emit events: Because a field "liked" exists in component - I can use to emit events:
  
-'''app/alf-component1/alf-component1.component.html'''+''app/alf-component1/alf-component1.component.html''
  
 <sxh html> <sxh html>
Line 875: Line 886:
 And I bind the ''onLiked()'' method of root component to those events. And I bind the ''onLiked()'' method of root component to those events.
  
-'''app/app.component.spec.ts'''+''app/app.component.spec.ts''
 <sxh ts> <sxh ts>
     <app-alf-component1 (liked)="onLike($event:boolean)"></app-alf-component1>     <app-alf-component1 (liked)="onLike($event:boolean)"></app-alf-component1>
Line 1161: Line 1172:
 ... ...
  
 +</code>
 +
 +
 +The component stub can be generated.
 +
 +Also under a "NGModule", in a subfolder. Here component ''heroList'' under module and subfolder ''heroes''.
 +
 +
 +<code>
 +ng generate component heroes/heroList --module=heroes
 </code> </code>
  
Line 1509: Line 1530:
  
 More: https://codecraft.tv/courses/angular/components/lifecycle-hooks/ More: https://codecraft.tv/courses/angular/components/lifecycle-hooks/
 +
 +
 +
 +===== Async patterns =====
 +
 +
 +== Promises ==
 +
 +  * They cannot be canceled.
 +  * They are immediately executed.
 +  * They are one-time operations only; there is no easy way to retry them.
 +  * They respond with only one value.
 +
 +
 +<sxh ts>
 +private onComplete() {
 +  return new Promise((resolve, reject) => {
 +     setTimeout(() => {
 +     resolve();
 +    }, 2000);
 +  });
 +}
 +
 +
 +private setTitle = () => {
 +  this.title = 'Hello Angular 10';
 +}
 +
 +constructor() {
 +  this.onComplete().then(this.setTitle);
 +}
 +</sxh>
 +
 +
 +== Observers ==
 +
 +
 +
 +<sxh ts>
 +
 +// triggers every 2 sec his observables
 +title$ = new Observable(observer => {
 +  setInterval(() => {
 +    observer.next();
 +  }, 2000);
 +});
 +
 +
 +private setTitle = () => {
 +  const timestamp = new Date().getMilliseconds();
 +  this.title = `Hello Angular 10 (${timestamp})`;
 +}
 +
 +constructor() {
 +  this.title$.subscribe(this.setTitle);
 +}
 +</sxh>
programming/angular.1690351211.txt.gz · Last modified: by skipidar