Angular Important Questions and Answers-2

Module Loading in Angular

v In angular a module can be loaded eagerly, lazily and preloaded.

v Eager loading is loading modules before application starts.

v When a module load ,it load all the module, component ,custom pipe and services

v Eager loading is useful in small size applications.

v In eager loading, all the feature modules will be loaded before the application starts Hence all the subsequent request to the application will be faster.

v Lazy loading is loading modules on demand.

v Preloading is loading modules in background just after application starts.

Please watch part 28 of the angular 8 tutorial series for more info.

PreLoading in Angular

v Preloading is loading modules in background asynchronously just after application starts.

v In this loading 1^st app module load then it load module like egger loading and after that module configured with preloading and it happen in background asynchronously.

v Preloading is useful when want to see feature which are in high probability to be visited by user just after loading the application

v It is an on-demand loading module.

v We can create custom preloading for that we have to create service by implementing angular PreloadingStrategy.

Please watch part 30 of the angular 8 tutorial series for more info.

What is SPA and MPA in Angular

v Single-Page Applications (SPA)

v Single-Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the applications.

v Multi-page applications (MPA)

v Multi-page applications are the traditional web applications that reload the entire page and display the new one when a user interacts with the web app. Each time when a data is exchanged back and forth, a new page is requested from the server to display in the web browser.
What is @input and @output in Angular

vWhen communication required between component like parent and child component that for passing data we use @input and @output

v@Input is used to pass data from parent to child and the opposite, @Output, can be used when you want to pass data from the child to the parent

Life cycle Hook in angular

vAngular application has a lifecycle right from its initiation to the end of the application which is managed by the angular.

Observable and Subscribe

v Angular Observable use as an interface to handle many asynchronous operations like send observable data from child to parent component by defining custom events.

v Observable and subscribe is used to handle user request and response asynchronous.

v Observable observe user request and response.

Diff b/w Observable and Promise

v In Angular, we can use either Promise or Observable for handling asynchronous data. Both get and post method of Http and HttpClient return Observable and it can be converted into Promise using toPromise() method. So, what’s the difference when they both are dealing with asynchronous data.

v What actually, the difference is?

v Promise emits a single value while Observable emits multiple values.

v So, while handling a HTTP request, Promise can manage a single response for the same request, but what if there are multiple responses to the same request, then we have to use Observable. using Observable can handle multiple responses for the same request.

v Observable is cancellable in nature by invoking unsubscribe() method, but Promise is not cancellable in nature.

v A Promise is not lazy where as an Observable is Lazy.

What is JWT ( JSON Web Token)

v JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. A Promise is not lazy where as an Observable is Lazy.

v Here are some scenarios where JSON Web Tokens are useful:

v Authorization

v Information Exchange

Session management

v Sometimes we need to store data in client-side to use that data into the subsequent call, in that kind of scenario we use session management.

v We can store data into server-side but it’s costly in terms of application performance, Each time we need to fetch data from the server. We can use this option if it has a security risk to store data on the client-side.

v We use HTML5 web storage to store data in angular.

v Unlike cookies,the storage limit is at least 5MB and information store locally not on the server.

v In angular we use Web Storage to store the data , the storage limit is at least 10 MB.

v There are the following way to store data into client side.

v In Memory : We can store data in client side computer memory.

v Session Storage : Value deleted once tab or browser closed

v Local Storage : Value exists even after browser close.

LocalStorage and SessionStorage

v LocalStorage and sessionStorage,are the part of Web storage API, and both store data as Key-Value pair.

v LocalStorage:- It stores data with no expiration date, the data will not be deleted after closing the browser as well. it works like cookies on the browser.

v SessionStorage:- It is like LocalStorage except for the life cycle of it is for one session, once the tab or browser close, the value for sessionStorage deleted.

Cookie in Angular

v A cookie is a small piece of data sent from a website and stored on the user machine by the user using the web browser.

v Cookies persist across multiple request and browser sessions should you set them to and they can be a great method for authentication.

v Install cookie

v Npm install ngx-cookie-service - - save

v Package JSON:- it contains the information of the angular project, package. JSON is a plain JSON(JavaScript Object Notation) text file which contains all metadata information about Node JS Project or application. Every Node JS Package or Module should have this file at root directory to describe its metadata in plain JSON Object format.

v Angular CLI : -it’s a command line interface to scaffold and build angular application using commonJs module

v Angular CLI commands

v Ng new – creating a new project

v Ng serve - running the project

v Ng generate – creating a component module, directive,service

v Ng test – run the testing

Angular testing

We can test the angular application

v Two types of testing available in angular

v 1. Unit testing

v 2. E2E testing

Testing Tools in Angular

v 1. Karma : -Karma is a JavaScript test runner created by the angular team.

v Jasmine : - Jasmine is a JavaScript testing framework that supports a software development practice called behavior driven development.

v Protractor - :Protractor is an end-to-end test framework for angular and angularJS applications,Protractor runs tests against an application running in a real browser.