Tohuwabohu excorcism

User Tools

Site Tools

Trace:
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 05:56] – 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 1311: Line 1332:
 </code> </code>
  
-  * declarations: The components, directives, and pipes that are registered with  + 
-the module. +  * declarations: The components, directives, and pipes that are registered with the module.   
-  * imports: Other modules that contain declarations to be used by this module.  +  * imports: Other modules that contain declarations to be used by this module. The Angular CLI defines CommonModule automatically for us in this property. It is a module that is always used in Angular applications because it contains all the built-in directives and pipes that we usually would like to use. Be careful not to get caught in circular references when you import a module that already imports yours.   
-The Angular CLI defines CommonModule automatically for us in this property. It  +  * exports: Angular artifacts that are defined in declarations and are available for other modules to use. This is the public API of the module. It defines what is publicly accessible or not. Everything else that's not explicitly exported would be considered private or internal to the module.   
-is a module that is always used in Angular applications because it contains all the  +  * providers: Services that are provided from the module and are accessible from any module of the application. We'll learn more about providers in the How dependency injection works in Angular section.   
-built-in directives and pipes that we usually would like to use. Be careful not to get  +  * bootstrap: The main component of the application that will be rendered when the application starts up. This property is set only once in the main application module, AppModule, and is usually AppComponent. Typically, you should not change it unless there is a particular reason to do so.
-caught in circular references when you import a module that already imports yours. +
-  * exports: Angular artifacts that are defined in declarations and are available  +
-for other modules to use. This is the public API of the module. It defines what is  +
-publicly accessible or not. Everything else that's not explicitly exported would be  +
-considered private or internal to the module. +
-  * providers: Services that are provided from the module and are accessible  +
-from any module of the application. We'll learn more about providers in the  +
-How dependency injection works in Angular section. +
-  * bootstrap: The main component of the application that will be rendered when  +
-the application starts up. This property is set only once in the main application  +
-module, AppModule, and is usually AppComponent. Typically, you should not  +
-change it unless there is a particular reason to do so.+
  
  
Line 1521: 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.1690351003.txt.gz · Last modified: by skipidar