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.