Saturday, February 15, 2020

Typescript

 










Example:

class Animal {

    move(distanceInMeters: number) {
    console.log(`Animal moved`+distanceInMeters);

    }
}

class Dog extends Animal {

    bark()
         {
          console.log('Woof! Woof!');
         }

}

const dog = new Dog();

dog.bark();

dog.move(10);

dog.bark();


Public, private, and protected modifiers:


class Animal {

public name: string;

public constructor(theName: string)
{
  this.name = theName;
}

public move(distanceInMeters: number)
{
  console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}




Module:












Inherit One Class functions or variables into other class is called  Inheritance.

(or) inheritance  is the concept that when a class , any subclass that is defined can inherit the definitions

export class ZipCodeValidator
{ 
 isAcceptable(s: string): boolean;
}

class ZipCode
 { 
 getZip (s: string):string;
 }

Angular

**** Single Page Applications ****


- loading one template to another template without refreshing the whole web page
  called as Single Page Application.

- loading one template to another template in Single Page Application called as
  Routing.

- We will implement the Routing by using predefined Array called as "Routes"

- "RouterModule" is the Predefined Module used to load the "Routes"

- "Router" is the Predefined Class used to define the Dynamic URL'S.

- "Routes" , "RouterModule" & "Router" available in "@angular/router" module.

Angular


1) What is angular?
2) Who created AngularJS?
3) From where we can download the AngularJS File?
4) What is controller in AngularJS?
5) Does Angular use the jQuery library?
6) Is there breaking changes between angular 2 and angular 4?
7) What are the differences between angular 2 and angular 4 version?
8) What are new features in angular 4?
9) Which latest version of angular is stable?
10) What is directive, component, module, pipes in angular?
11) For what purpose angular service is used?
12) Is there any global variable in angular?
13) How can you share data between angular components?
14) What is Input and Output?
15) What is router? and why is it used?
16) What is module and how to modulerize application?
17) What is lazy loading and why is it used for?
18) What is FormGroup and FormControl in angular? Why is it used for?
19) What is change in BrowserAnimationsModule from angular version 2 to 4?
20) What is angular decoration and why is used for?
21) What is angular CLI?
22) Is there platform dependency for running angular application?
23) How to bootstrap angular application?
24) What is dependency injection in angular?
25) What is interpolation in angular component?
26) How do you use one way and two way data binding?
27) How to apply animation to the angular component?
28) Describe Component lifecycle hooks.
29) How can you dynamically load the component?
30) What is difference between Structural and Attribute directives?
31) How to apply Custom validation to angular form?
32) Which is better, reactive or template-driven?
33) Tell me the properties of NgModule, Component, Directive, Injectable, Pipe.
34) What is an entry component?
35) Tell something about Routing & Navigation.
36) Tell me about testing in angular?
37) How to do end to end and unit testing in Angular?
38) Which framework to use for this purpose?
39) Name few Built-in directives.
40) Which one to user with angular, JavaScript or TypeScript?
41) What are the “Great Advantages” of Angular 4?
42) What Is Bootstrapping in Angular?
43) What Is Architecture Overview of Angular?
44) How to Upgrade Web Applications from Angular2 to Angular4?
45) What Is the for Root Method in Angular4?
46) What is If-Else-and-Then Conditions in Angular4?
47) What Is the Difference Between [ngFor] and [ngForOf]?
48) What Are Isolated Unit Tests?
49) What Are Angular Testing Utilities?
50) What classes should I add to module's declarations?
51) What classes should I not add to module's declarations in Angular 4?
52) What Happen when I Import the same Module Twice?
53) Angular 4 Grid with CRUD operations
54) What Is Angular Router?
55) Angular 4 Error Handling - Logging, Retry Request and HttpCache!
56) How to Handling Error and Logging it?
57) How to Implement Http Cache using Interceptors in Angular 4?
58) How To handle and retry the failed request due to Poor Network Connection in Angular 4?
59) How to Validate Form in Angular 4?
60) What is Looping in AngularJs and Give an Example?
61) How to Validate Password and Confirm Password in Angular 4?
62) How can XSS be done in an Angular application?
63) How To Handle XSS or CSRF Attacks in Angular 4 ?
64) How can we fix it?
65) How Angular Apps Prevent this Attack?
66) How Google Handles Security in Angular 4 Applications?
67) How Are JWTs Used to Authenticate Angular 4 Applications?
68) What is JSON Web Token?
69) What Is Angular CLI? How To Updating Angular CLI?
70) How to Update to Angular 5?
71) What Is Sross Site Scripting (XSS) Attack?
72) How Angular Prevents Sross Site Scripting (XSS)?
73) How Angular Protects Us From XSS Attacks?
74) How To Handle XSS Vulnerability Scenarios in Angular?
75) How To Bypass Angular XSS Protection?
76) How To sanitize a value manually?
77) How To Handle XSS Vulnerability Scenarios in AngularJs?
78) How Prevents HTML DOM Based Cross Site Scripting (XSS) Attacks?
79) Angular Security Principles - Angular Security?
80) Attacker's Malicious Scripts and Code – Vulnerability?
81) How To Validate Email in Angular 4 using formGroup or Custom RegExp?
82) What Is Pipes?
83) Why Use Pipes in Angular?
84) What is Cookie Based Authentication in Angular 4?
85) What is Token Based Authentication in Angular 4?
86) Angular 4 Cookie vs Token Authentication?
87) What Are Events Binding in Angular 4?
88) How To Get Actions of Event Binding in Angular 4?
89) What Is Property Binding? How To Achive in Angular ?
90) How To Open Dialog Box in Angular 4?
91) How To CREATE Datepicker in Angular 4?
92) What's New in HttpClient and HttpClientModule in Angular?
93) How To use HttpClientModule in Angular?
94) HttpClient vs HttpClientModule How To Set Authorization Headers in GET/POST/PUT requests in Angular?
95) How To Add CSS Styles in Angular 5/4 Applications?
96) How To Use Angular Datepicker in Angular 5/4 Applications?
97) Angular 4/5 ng build vs. ng serve Commands
98) What Is APP_BASE_HREF in Angular 4/5?
99) What Is HttpInterceptor in Angular?
100) Angular 4 Charts - Line, Bar, Pie, Doughnut
101) Angular 4 - Pie Chart Angular 4 - Bar Chart
102) Angular 4 - Doughnut Chart Angular 4 - Line Chart
103) Ionic 3 with Angular 4 Charts
104) How To Install Charts in Angular 4 using Ionic 3 CLI?
105) How to Create Bar charts in Angular 4 using Ionic 3 CLI?
106) How to Create doughnut charts in Angular 4 using Ionic 3 CLI?
107) How to Create Line charts in Angular 4 using Ionic 3 CLI?
108) Angular 4 Kendo UI
109) Setting Up Kendo UI in Angular 4 Project
110) How To Use Kendo UI Grid in Angular 4 Project?
111) How To CREATE Dialog Box in Angular 4 Project?
112) How To CREATE Kendo UI DropDownList in Angular 4?
113) How To CREATE Kendo UI ComboBox in Angular 4?
114) Ionic 3 with Angular 4 Docs
115) How to Setup and Install Ionic Framework with Angular 4?
116) How To Build Mobile Apps using Ionic 3 CLI and Angular 4?
117) How To Starting Angular 4 Apps using Ionic 3 CLI Commands?
118) How To Viewing the Angular 4 Apps in a Browser Using Ionic 3 CLI?
119) List of Useful Ionic 3 CLI Commands?
120) How To Generating New Pages in Angular 4 Apps using Ionic 3 CLI?
121) How To Generating New Pipes, Tabs, Components and Pages using Ionic 3 CLI in      Angular 4?
122) How To Do Login and Logout using Ionic 3 and Angular 4?
123) Angular 5 Fundamental Concepts
124) What's New In Angular 5?
125) What Is the Difference Between Angular 4 and Angular 5?
126) What are Filters? Explain different filters provided by AngularJS?
127) What are angular prefixes $ and $$?
128) What are different ways to invoke a directive?
129) What is Singleton pattern? How does Angular use it?
130) What is $scope in AngularJS?
131) What is “$rootScope” in AngularJS?
132) Explain the concept of scope hierarchy? How many scopes can an application have?
133) What is SPA (Single page application) in AngularJS?
134) What is the difference between $scope and scope?
135) How is AngularJS compiled?
136) How is AngularJS compilation different from other JavaScript frameworks?
137) What is ng-view in AngularJS?
138) What is ng-template in AngularJS?
139) What is $routeProvider in AngularJS?
140) What is data binding? How many types of data binding directives are provided by AngularJS?
141) What directives are used to show and hide HTML elements in AngularJS?
142) Explain the directives ng-if, ng-switch, and ng-repeat?
143) Explain the set of “special” variables supported with <ng-repeat> directive?
144) Explain what is string interpolation in AngularJS?
145) Explain AngularJS application life-cycle?
146) Explain AngularJS scope life-cycle?
147) What is an auto bootstrap process in AngularJS?
148) What is the manual bootstrap process in AngularJS?
149) How to bootstrap your angular app for multiple modules?
150) What are Compile, Pre, and Post linking in AngularJS?
151) What is a Controller in AngularJS?
152) What does a service mean in AngularJS? Explain its built-in services.
153) What are different ways to create service in AngularJS?
154) What is the difference between the $watch, $digest, and $apply?
155) Which one handles exception automatically between $digest and $apply?
156) Explain $watch(), $watchgroup() and $watchCollection() functions of scope?
157) What are the form Validations supported by AngularJS?
158) How do you exchange data among different modules of your Angular JS application?
159) How would you use an Angular service to pass data between controllers? Explain with examples.
160) How will you send and receive data using the Angular event system? 
     Use methods like $broadcast and $on to send data across.
161) How do you switch to different views from a Controller function?
162) What would you do to limit a scope variable to have one-time binding?
163) What is the difference between one-way binding and two-way binding?
164) Which angular directive would you use to hide an element from the DOM without modifying its style?
165) What is the minimum definition of a component?
166) What is the difference between a component and a directive?
167) How do components communicate with each other?
168) How do you create two way data binding in Angular?
169) How would you create a component to display error messages throughout your application?
170) What does a lean component mean to you?
171) What is the purpose of NgModule?
172) How do you decide to create a new NgModule?
173) What are the attributes that you can define in an NgModule annotation?
174) What is the difference between a module's forRoot() and forChild() methods and why do you need it?
175) What would you have in a shared module?
176) What would you not put shared module?
177) What module would you put a singleton service whose instance will be shared throughout the application.
     (e.g.ExceptionService andLoggerService)?
178) What is the purpose of exports in a NgModule?
179) Why is it bad if SharedModule provides a service to a lazy loaded module?
180) How to create a Single Page Application using AngularJS? Name the provider used?
181) What is the significance of the client side MVC?
182) How is the MVC achieved in AngularJS?
183) What is routing in AngularJS? How can we implement routing in AngularJS?
184) When does AngularJS perform DOM update and dirty checking?
185) How to dynamically create forms I AngularJS?
186) How perform Language Internationalization in AngularJS?
187) Describe digest life-cycle in AngularJS.
188) What are the effects of changes to the scope outside the angular context?
189) What is the difference between Angular and Polymer?
190) What are the requirements and steps to perform when tying the Polymers to Angular?
191) Give the list of issue that Polymer can detect and deal with where Angular won’t be able to understand them?
192) List the easy testing between the different modules of means of communication the application.
193) Explain the concept of Isolate Scope and reasons why it is required?
194) Describe $q service, promises and deferred.
195) Approach to testing directives.
196) How to initiate variable in AngularJS?
197) What tools have you used to make Angular faster?
198) What is a service?
199) What is a factory?
200) What is a provider?
201) What design patterns do services and factories promote?

Angular

Installation of Softwares to Build Angular6 Applications:
---------------------------------------------------------

1) download and install NodeJS

website : https://nodejs.org/en/download/
file    : node-v8.11.2-x64.msi


2) download and install Git.

website : https://git-scm.com/download/win
file    : Git-2.17.1.2-64-bit.exe


3) download and install Visual Studio Code

website : https://code.visualstudio.com/docs/?dv=win
file    : VSCodeSetup-x64-1.24.0.exe


4) install yarn packaging manager

> npm install -g yarn

- yarn packaging manager used to download the node modules
  in faster manner compared to npm.


5) install Angular6 software by using following command

> npm install -g @angular/cli@latest

"-g" stands for global installation

- "cli" stands for command line interface


6) develop the Angular6 Application by using following command

> ng new firstApp

- automatically "firstApp" will be created.


7) execute the Angular6 Application

> ng serve --open

- automatically "firstApp" will be deployed into
  "lite" server.

- "lite" server is the web server introduced by microsoft.

- project will be deployed into lite server and running


Terminology in Angular:
-----------------------
1) component

- simple type script class called as component.

- Component Acting as the Interface between "View" and "Service".

- As a Angular Developer we can develop multiple components.

- As a Angular Developer we can provide the communication
  Between Components.


2) services

- Services in angular used to share the common business logic
  to multiple components.


3) Dependency Injection

- the communication between components to services,
    services to services,
    components to directives,
    components to pipes
---
---
  called as Dependency Injection.


4) Single Page Application

- loading one template to another template without refreshing the
          whole web page called as Single Page Application.

- loading one template to another template in Single Page Application
  called as Routing.


5) directives
- directives in angular used to enhance the view capabilities.

- we have two types of directives

1) predefined directives

2) custom directives

- the directives given by angular called as predefined directives.

- the directives developed by us based on application requirement

  called as custom directives.


6) pipes

- pipes in angular used to format the data accroding to application
  requirement.

- we have two types of pipes.

1) predefined pipes.

2) custom pipes.

- the pipes given by angular framework called as predefined pipes.

- the pipes developed by us based on application requirement
  called as custom pipes.













































































  on default port no.4200





















































Angular

**** Predefined Services ****

- The Services given by angular framework called as Predefined Services.


Predefined Services in Angular2:
-------------------------------

1) Http
- Http is the predefined class in angular2.

- Http Class used to connect to servers via "http protocol".

- Http Class avaiable in "@angular/http" package.

- Http Class belongs to "HttpModule".

- HttpModule also available in "@angular/http" package.

- when ever we hit the server we are getting the "Observable" Response.

- map() is the predefined function used to catch the positive Observable Response.

- catch() is the predefined function used to catch the Negative Observable Response.

- "Positive Observable Response" is the "Response" Type.

- map(),catch() and next() functions are available in "rxjs/Rx" package.

- Observable also available in "rxjs" package.


Ex_1:


Step 1:
create the Angular6 Application

> ng new serEx1

- automatically "serEx1" project will be created.



Step 2:
create the custom service by using following command.


> ng g s services/countries

g stands for generate.

s stands for service


******************************************
serEx1
     src
app
          services
countries.service.ts
countries.service.spec.ts
******************************************

countries.service.ts
--------------------
































































































Angular

**** JSON *****

  - JSON Stands for JavaScript Object Notation.

  - JSON Used to Transfer the Data Over the Network.

  - JSON is ligth weigth compared to XML.

  - JSON is the network friendly format.

  - Parsing of JSON Eazy Compared to XML.

Syntax.

1) Objects  -  { }

2) Arrays   -  [ ]

3) Data     - "key & value"

    - key & value separated by using ":"

    - eack key&value pairs separated by using ","


Ex_1:
create the json object with the following variable
@data

declare the following json keys
@sub_one
@sub_two
@sub_three

json values are
@Angular6
@NodeJS
@MongoDB


Ex_2:
create the arrow function with the folowing variable
@data

arrow function return json object.

json keys are

1) login
2) logout
3) setCredentials
4) clearCredentials

json values are arrow functions with string as return type.


Ex_3:
create the named function with the following name
@data


named function return json object.


json keys are
1) fun_one
2) fun_two
3) fun_three

json values are
1) fun_one definition
2) fun_two defintion
3) fun_three definition



Ex_4:
create the arrow function with the following variable
@calculator

arrow function return json object

json keys are
1) add
2) sub
3) mul
4) div

json values are "arrow function definitions with 2 arguments"













































































Angular

**** HttpClient ****

- HttpClient introduced in Angular4.x.

- HttpClient Eazy to Use Comapared to Http.

- HttpClient Applications are More Tastable Applications Compared to Http.

- HttpClient Applications are more deguggable Applications Compared to Http.

- Application Performance will be Improved.

- HttpClient Supports the Interceptors.

- HttpClient used to connect to servers via Http Protocol.

- HttpClient will convert the Response to JSON Format Automatically.

- HttpErrorResponse Used to Categorize the Errors.

- HttpClient present in HttpClientModule.

- HttpClient, HttpClientModule, and HttpErrorResponse Present in
  @angular/common/http module.


Interceptors:
-------------
- Interceptors are used to filter the Http Req's before Hitting
  Server.

- Interceptors are used to validate the Req's Before Hitting the
  Server.

- "HttpInterceptor" is the interface used to implement the Interceptors.

- intercept() is the unimplemented method in Interface.

- intercept() used to validate the request's.



















Angular

**** Forms *****

- In angular, we can design the forms.

- In Angular, we can design the forms in 2 ways.

1) TDF (Template Driven Forms)

2) MDF (Model Driven Forms) (MDF) (Reactive Forms)

- Template Driven Forms Mainly Based on View.

- Model Driven Forms mainly based on "Model Data".

- Angular By default apply the following validations on Forms.

1) dirty   ==> pristine   (when ever change detected)

2) touched ==> untouched  (when ever we touch the fields)

3) valid  ==> invalid    (when ever  we ignore the required rule




***** Model Driven Forms *****


- Model Driven Forms also called as Reactive Forms.

- Model Driven Forms mainly on Model.

- [formGroup] is the predefined directive used to assign the logical name to form.

- formControlName is the predefined directive used to declare the form elements.

- formGroupName is the predefined directive used to create the "sub groups".

- Reactive forms available on "ReactiveFormsModule"

- "ReactiveFormsModule" available in "@angular/forms" package.


******************************************
MDFEx
src
    app
app.component.ts
app.conponent.html


app.module.ts
index.html
******************************************


















































Angular

**** Custom Services ****

- The Services Developed by us based on application requirement
  called as Custom Service.

- Custom Services can share the business logic to multiple components.

- "Injectable" is the predefined class used to create the Custom Service.

- "Injectable" class available in "@angular/core" package.

- providing the communication between services to components called
  as Dependency Injection.

Ex_1:
*****************************************
custSerEx1
        src
    app
services
   my.service.ts

components
   my.component.ts
   my.component.html

    app.module.ts
index.html
******************************************









  

Angular

Creating the Component in Angular:
----------------------------------
- Simple Typescript class called as Component.

- Component Acting as interface between "Presentation Layer" and "Business

  Processing Layer".

*********************************
firstApp
     src
app

  first.component.ts
  first.component.html
  app.module.ts
     index.html
**********************************


first.component.ts
------------------
import { Component } from "@angular/core";
@Component({
selector : "first-app",
templateUrl:"./first.component.html"
})

export class FirstComponent{

private sub_one:string;

private sub_two:string;

private sub_three:string;

constructor(){

this.sub_one = "Angular6";

this.sub_two = "NodeJS";

this.sub_three = "MongoDB";
}

public getSubOne():string{

return this.sub_one;
}

public getSubTwo():string{

return this.sub_two;

}

public getSubThree():string{

return this.sub_three;

}

}


first.component.html
--------------------
<h1 style="color:red">{{getSubOne()}}</h1>
<h1 style="color:green">{{getSubTwo()}}</h1>
<h1 style="color:blue">{{getSubThree()}}</h1>


index.html
----------
----
----
----
----
<body>
           <first-app></first-app>
</body>
-----
-----
-----
-----



app.module.ts
--------------
import { BrowserModule } from "@angular/platform-browser";

import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

import { FirstComponent } from "./first.component";

@NgModule({

declarations:[AppComponent,FirstComponent],

imports:[BrowserModule],

providers:[],

bootstrap:[FirstComponent]

})
export class AppModule{

}

- Component is the predefined class in angular and avaialble
 
  in @angular/core package.

- Component class used to convert the TypeScript Standards to

  Equalent HTML Standards.

- Using the Predefined classes with the "@" symbol called as

  Decorator

- "selector" is the predefined json key used to define the

   custom HTML Element.

- "templateUrl" is the predefined json key used to define the

   external template to the component.

- "export" is the keyword in Typescript, used to export the

   classes,functions, json objects,.....

- {{}}  (expressions) used to display the result in templates.

- "index.html" file called as main template in angular project.

- we must call the "selector" in "index.html" file.

- As a angular developer we can create the objects to angular

  applications.

- Angular Framework will create the Objects to the Angular Applications

  with the help of "app.module.ts"

- "app.module.ts" file called as configuration file.

- "app.module.ts" file used to register the components,directives,
   services,pipes,....

- "BrowserModule" is the predefined module in angular.

- "BrowserModule" supports the execution of angular applications in browser.

- "NgModule" is the Predefined Module used to create the modules

   in angular applications.


        - "declarations" is the array used to register the components,pipes

   and directives,.....


- "imports" is the array used to register the modules.

- "providers" is the array used to register the services.

- "bootstrap" is the array used to bootstrap the particular component

   in angular application.


































































Angular

**** Anonymous Functions ****

- The Function without name called as Anonymous Function.

- Anonymous Functions also called as Arrow Functions in Typescript.

- Anonymous Functions are more secured compared to named functions.

- Anonymous Functions utilizes the heap memory efficiently.


Syntax.
//function definition
var var_name = (arguments with data type):return_type =>{
//Business Logic
}


//call the anonymous function
var_name();


Ex_1:
create the anonymous function with following variable
@fun_one

anonymous function return "Welcome...!" message

call the anonymous function.


Ex_2:
create the anonymous function with 3 arguments.

name of variable - @fun_one

@arg1 - string
@arg2 - string
@arg3 - string


call the anonymous function with 3 arguments.


Ex_3:
one arrow function return another arrow function.

inner arrow function return "Welcome...!" message


Ex_4:
create arrow function with 3 arguments.

while calling the arrow function ,
"pass the definitions of anonymous functions"
as arguments.


Ex_5:
     push 5 anonymous functions to empty array.


Ex_6:
create the nested arrow functions with number manipulations

























































































Angular

Functions

- Particular Business Logic called as Function.

- Functions are used to reuse the business logic.

- We can Declare the Functions with the help of "function" keyword.

- We Have Two Types of Functions.

1) Named functions

2) Anonymous Functions

Named functions
---------------
- The Function with the name called as Named function.


Syntax: Function definition

function function_name([arguments with datatype]):return type{

//Business Logic
}

//function calling
function_name();


Ex_1:
create the following function
@fun_one

"fun_one" return "Welcome...!"

    call the fun_one.


Ex_2:
=> create the flowing function with 3 arguments
@fun_one

=> arguments are string type.

=> call the fun_one.


Ex_3:
=> create the two functions
@fun_one
@fun_two

=> "fun_one" return "fun_two" definition.

=> "fun_two" return "welcome" message.

=> call "fun_one"


Ex_4:
create the following functions.

@fun_one
@fun_two


pass "fun_two" definition to "fun_one" as argument.


"fun_one" displays the argument.

"fun_two" return "welcome...!".


Ex_5:
create the following function with two arguments.
@fun_one

@arg1 - string type.
@arg2 - Array of Heterogeneous Elements.

pass "fun_two" & "fun_three" to fun_one as array


Assignment: Create the following functions.
@fun_one
@fun_two
@fun_three
@fun_four
@fun_five

"fun_two" return "fun_three" definition.

"fun_three" return "Hello...!" message.

"fun_four" return "fun_five" definition.

"fun_five" return "Hi....!" message.

pass "fun_two" & "fun_four" definitions to "fun_one" as arguments.

"fun_one" calling should display "Hello...!" & "Hi...!" message























































































Angular

**** TypeScript ****

- TypeScript is the programming language.

- TypeScript Introduced by microsoft.

- Superset of JavaScript called as TypeScript.

- TypeScript Follows OOPS.

- Converting the TypeScript to Equalent JavaScript Called as "Transpilation".

- Web Pages(HTML Files) won't understands th TypeScript.

- As a TypeScript Developer we must perform the "Transpilation" Explicitely.

- "tsc" is a compiler used to perform the transpiltaion.

- "tsc" stands for "typescript compiler".


Installation of TypeScript:
---------------------------
1) download and install NodeJS

website : https://nodejs.org/en/download/

file    : node-v8.11.2-x64.msi


2) Download and install VisualStudioCode.

website : https://code.viGit-2.17.0-64-bitsualstudio.com/docs/?dv=win

file    : VSCodeSetup-x64-1.23.1.exe


3) download and install Git.

website : https://git-scm.com/download/win

file    : Git-2.17.0-64-bit.exe


4) install "tsc" by using following command.

> npm install -g tsc

- "npm" stands node packaging manager.

- "npm" is the integrated tool of NodeJS.

- "-g" stands for global installation.


variables in TypeScript:
------------------------
- Variables are used to store the data.

- By using Variables we can store all categories of Data.

Ex.
string
number
boolean
Array
Objects
  --
                          --
                          --

- we can declare variables by using either "var" keyword
  or "let" keyword.

- we can save all the TypeScript files with the ".ts" extension.

- Transipilation gives the equalent javascript file.

Syn:  var variable_name:data_type = "value"

Ex: var data:string = "Welcome...!"


Transplantation of variables.ts file:

=> open the Integrated Terminal in Visual Studio Code

=> execute the following command in integrated terminal

> tsc variables.ts


create the webpage:
index.html

<!DOCTYPE html>
<html>
<script src="variables.js"></script>
</html>





































































































Angular




Pipes: 
          Pipes are used to format the data according to application requirement.We have two types of Pipes:
  1. Predefined Pipes
  2. Custom Pipes
  • The pipes given by angular framework called as Predefined Pipes.
  • The pipes developed by us based on application requirement called as custom pipe.

Predefined Pipes:

1) title-case: This pipe used to create the titles in angular application.

2) uppercase: This pipe used to convert the lowercase characters to uppercase characters.

3) lowercase: This pipe used to convert the uppercase characters to lowercase characters.

4) date: his pipe used to format the date according to application requirement.

5) currency: This pipe used to append the currency symbols to the numerical values.

6) json: This pipe used to convert the json objects to json strings.

7) number: This pipe used to format the numbers according to application requirement.

8) percent: This pipe used to convert the fractions to percentages.

9) async: This pipe used to append the values to the template asynchronously.






















Angular

                 Classes

- Encapsulation of variables and functions called as Class.

- We Can Create the Class by using "class" keyword.

- we can declare constructor by using "constructor" keyword.

- we can create the objects to the class by using "new" keyword.


Ex_1:Create the class by using following name
@class_one

declare the following private variables
@sub_one -  Angular6
@sub_two -  NodeJS
@sub_three -  MongoDB

declare the following public functions
@getSubOne()  -- return "sub_one"
@getSubTwo()  -- return "sub_two"
@getSubThree() -- return "sub_three"

initialize the variables by using constructor.

Ans:
Open Visual Code and Create one project with name Classes and create one type script class with name "classes" as screen short.



-->classes.ts


class class_one{
    private sub_one:string;
    private sub_two:string;
    private sub_three:string;
    constructor(){
        this.sub_one = "Angular6";
        this.sub_two = "NodeJS";
        this.sub_three = "MongoDB";
    }
    public getSubOne():string{
        return this.sub_one;
    }
    public getSubTwo():string{
        return this.sub_two;
    }
    public getSubThree():string{
        return this.sub_three;
    }
}
var obj:class_one = new class_one();
document.write( obj.getSubOne()+"...."+
                obj.getSubTwo()+"...."+
                obj.getSubThree());

Create one html with name index.html

<!DOCTYPE html>
<html>
    <script src="classes.js"></script>
</html>

To compile typescript file we will use tsc in terminal in VS Code.
> tsc classes.ts

After compiling it will be generated one classes.js file as below:

class class_one{
    private sub_one:string;
    private sub_two:string;
    private sub_three:string;
    constructor(){
        this.sub_one = "Angular6";
        this.sub_two = "NodeJS";
        this.sub_three = "MongoDB";
    }
    public getSubOne():string{
        return this.sub_one;
    }
    public getSubTwo():string{
        return this.sub_two;
    }
    public getSubThree():string{
        return this.sub_three;
    }
}
var obj:class_one = new class_one();
document.write( obj.getSubOne()+"...."+
                obj.getSubTwo()+"...."+
                obj.getSubThree());