Showing posts with label Angular. Show all posts
Showing posts with label Angular. Show all posts

Monday, July 19, 2021

How JavaScript works: Event loop and the rise of Async programming

 What is the Event Loop?

We’ll start with a somewhat of an odd claim — despite allowing async JavaScript code (like the setTimeout), until ES6, JavaScript itself has actually never had any direct notion of asynchronicity built into it. The JavaScript engine has never done anything more than executing a single chunk of your program at any given moment.

For more details on how JavaScript engines work (Google’s V8 specifically).





So, who tells the JS Engine to execute chunks of your program? In reality, the JS Engine doesn’t run in isolation — it runs inside a hosting environment, which for most developers is the typical web browser or Node.js. Actually, nowadays, JavaScript gets embedded into all kinds of devices, from robots to light bulbs. Every single device represents a different type of hosting environment for the JS Engine.

The common denominator in all environments is a built-in mechanism called the event loop, which handles the execution of multiple chunks of your program over time, each time invoking the JS Engine.

This means that the JS Engine is just an on-demand execution environment for any arbitrary JS code. It’s the surrounding environment that schedules the events (the JS code executions).

So, for example, when your JavaScript program makes an Ajax request to fetch some data from the server, you set up the “response” code in a function (the “callback”), and the JS Engine tells the hosting environment:
“Hey, I’m going to suspend execution for now, but whenever you finish with that network request, and you have some data, please call this function back.”

The browser is then set up to listen for the response from the network, and when it has something to return to you, it will schedule the callback function to be executed by inserting it into the event loop.

Monday, May 25, 2020

Angular component Lifecycle Hooks

Lifecycle Hooks

  1. ngOnChanges()
    • Used in pretty much any component that has an input.
    • Called whenever an input value changes
    • Is called the first time before ngOnInit
  2. ngOnInit()
    • Used to initialize data in a component.
    • Called after input values are set when a component is initialized.
    • Added to every component by default by the Angular CLI.
    • Called only once
  3. ngDoCheck()
    • Called during all change detection runs
      • A run through the view by Angular to update/detect changes
  4. ngAfterContentInit()
    • Called only once after first ngDoCheck()
    • Called after the first run through of initializing content
  5. ngAfterContentChecked()
    • Called after every ngDoCheck()
    • Waits till after ngAfterContentInit() on first run through
  6. ngAfterViewInit()
    • Called after Angular initializes component and child component content.
    • Called only once after view is initialized
  7. ngAfterViewChecked()
    • Called after all the content is initialized and checked. (Component and child components).
    • First call is after ngAfterViewInit()
    • Called after every ngAfterContentChecked() call is completed
  8. ngOnDestroy()
    • Used to clean up any necessary code when a component is removed from the DOM.
      • Fairly often used to unsubscribe from things like services.
    • Called only once just before component is removed from the DOM.

Thursday, February 21, 2019

Error in creating angular component from CLI

Error code is:


More than one module matches. Use skip-import 
option to skip importing the component into the 
closest module.

This Error is related to component module file When we have multiple module file (more than one) then auto generated component is missing module path so we need to give module path with component name like :

 ng g c ./feature/ComponentName --module modulePath

For Example

ng g c ./feature/metric-detail --module app 

comments are always welcome :)

Tuesday, February 19, 2019

Angular CLI cheat sheet

Install Globally

npm install -g @angular/cli

Install Locally

npm install @angular/cli
To run a locally installed version of the angular-cli, you can call ng commands directly by adding the .bin folder within your local node_modules folder to your PATH. The node_modules and .bin folders are created in the directory where npm install @angular/cli was run upon completion of the install command.
Alternatively, you can install npx and run npx ng <command> within the local directory where npm install @angular/cli
 was run, which will use the locally installed angular-cli.

Install Specific Version (Example: 6.1.1)

npm install -g @angular/cli@6.1.1

Usage

ng help

Generating and serving an Angular project via a development server

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve
Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
You can configure the default HTTP host and port used by the development server with two command-line options :
ng serve --host 0.0.0.0 --port 4201

Generating Components, Directives, Pipes and Services

You can use the ng generate (or just ng g) command to generate Angular components:
ng generate component my-new-component
ng g component my-new-component # using the alias 
 
# components support relative path generation 
# if in the directory src/app/feature/ and you run 
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp 
# but if you were to run 
ng g component ./newer-cmp
# your component will be generated in src/app/newer-cmp 
# if in the directory src/app you can also run 
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp 
You can find all possible blueprints in the table below:

Scaffold
Usage
ng g component my-new-component
ng g directive my-new-directive
ng g pipe my-new-pipe
ng g service my-new-service
ng g class my-new-class
ng g guard my-new-guard
ng g interface my-new-interface
ng g enum my-new-enum
ng g module my-module
1.      ng g module new-module to create a new moduleangular-cli will add reference to componentsdirectives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow these steps:
2.       call ng g component new-module/new-component
This should add the new componentdirective or pipe reference to the new-moduleyou've created.

Updating Angular CLI

If you're using Angular CLI 1.0.0-beta.28 or less, you need to uninstall angular-clipackage. It should be done due to changing of package's name and scope from angular-clito @angular/cli:
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
To update Angular CLI to a new version, you must update both the global package and your project's local package.
Global package:
npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean` 
npm install -g @angular/cli@latest
Local project package:
rm -rf node_modules dist 
# use rmdir /S/Q node_modules dist in Windows Command Prompt; 
use rm -r -fo node_modules,dist in Windows PowerShell 
npm install --save-dev @angular/cli@latest
npm install

Some Useful Flag for Angular CLI.

1.     To open project automatically in a browser Tab
ng serve --o
OR
ng serve --open
2. Create project with routing file by default
ng new ProjectName --routing
3. Run project on different Port (Apart from default Port 4200)
ng serve --port 4201
4. Changing Base href while build
ng build --base-href=yourValue
OR
ng build --base-href /myUrl/
5. For performance of your application
* ng build --prod
* ng build --aot
6. Adding custom prefix for new project
ng new your-project --prefix custom
7. For Inline Template/Style of your component
ng g c button --inline-style --inline-template
You can anyone as per your requirements.
8. Avoid Hashing of file names while bundle your application
ng build -prod --output-hashing none
OR
ng build -prod --output-hashing=none