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());



Saturday, July 14, 2012

ASP.NET MVC Videos


ASP.NET MVC Model view controller ( MVC) Step by Step Part 1 ASP.NET MVC Model view controller ( MVC) Step by Step Part 2 ASP.NET MVC Model view controller ( MVC) Step by Step Part 3 ASP.NET MVC Model view controller ( MVC) Step by Step Part 4

ASP.Net MVC Sample Application


How to create a simple ASP.NET MVC program?

In this Exercise we will create a sample program using MVC template. So we will create a simple controller, attach the controller to simple index.aspx page and view the display on the browser.


Step1:- Create project 

Create a new project by selecting the MVC 2 empty web application template as shown in the below figure




 
After click ok button then we get structure with appropriate folders where we can add controllers, models and views.

Step 2:- Add controller

So let’s go and add a new controller as shown in the below figure.
Once you add the new controller you should see some kind of code snippet as shown in the below snippet.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyFirstMvcProg.Controllers
{
    public class Default1Controller : Controller
    {
        //
        // GET: /Default1/
        public ActionResult Index()
        {
            return View();
        }
    }
}

Step 3:- Add View

Now that we have the controller we need to go and add the view. So click on the Index function which is present in the control and click on add view menu as shown in the below figure.

The add view pops up a modal box to enter view name which will be invoked when this controller is called as shown in the figure below. For now keep the view name same as the controller name and also uncheck the master page check box.Once you click on the ok button of the view, you should see a simple ASPX page with the below HTML code snippet. In the below HTML code snippet I have added “This is my first MVC application”.

Step 4:- Run the application

If you do a CNTRL + F5 You get error  because we have not invoked the appropriate controller / action.
If you append the proper controller on the URL you should be able to see the proper view.


 

Tuesday, June 12, 2012

WCF REST Service

WCF REST Service
REST stands for Representational State Transfer and is an architectural style. REST provides an easier way of data access comparing with the SOAP protocol. REST and SOAP relies on HTTP protocol.REST provides an alternative to SOAP and WSDL.
REST uses some common HTTP methods to insert/delete/update/retrieve information which is below:
  1. GET - Requests a specific representation of a resource
  2. PUT - Creates or updates a resource with the supplied representation
  3. DELETE - Deletes the specified resource
  4. POST - Submits data to be processed by the identified resource 

What is JSON?

JSON represents JavaScript Object Notation and is an open standard lightweight data interchange format in human readable form. Shortly, it is a data representation format.
JSON provides a simple alternative to the Fatty XML format of data representation. For example a class with properties name and age can be represented as:
eg:
{"Firstname" : "sudhakar",
  "Lastname" : "Boyina",
  "Address"  :  "Hyderabad"}



Search result 1
Search result 2
Search result 3

Sunday, June 10, 2012

wcf Interview Questions and Answers




What is WCF?
Windows Communication Foundation (WCF) is an SDK for developing and deploying services on Windows. WCF provides a runtime environment for services, enabling you to expose CLR types as services, and to consume other services as CLR types. WCF is part of .NET 3.0 and requires .NET 2.0, so it can only run on systems that support it.
 
Difference between WCF and Web services?
1.Web Services can be accessed only over HTTP
2.Web Services works in stateless environment
WCF is flexible because its services can be hosted in different types of applications. The following lists several common scenarios for hosting WCF services: 1. IIS
2. WAS
3. Self-hosting
4. Managed Windows Service
  •  
What are the various ways of hosting a WCF service?
Self hosting the service in his own application domain. This we have already covered in the first section. The service comes in to existence when you create the object of ServiceHost class and the service closes when you call the Close of the ServiceHost class. Host in application domain or process provided by IIS Server. Host in Application domain and process provided by WAS (Windows Activation Service) Server.
  •  
What are three major points in WCF?
We Should remember ABC.
Address - Specifies the location of the service which will be like http://Myserver/MyService.Clients will use this location to communicate with our service.
Binding - Specifies how the two paries will communicate in term of transport and encoding and protocols.
Contract - Specifies the interface between client and the server.It's a simple interface with some attribute.
  •  
What was the code name for WCF?
The code name of WCF was Indigo . WCF is a unification of .NET framework communication technologies which unites the following technologies:- NET remoting MSMQ Web services COM+
  •  
What are the main components of WCF?
The main components of WCF are 1. Service class 2. Hosting environment 3. End point
  •  
What are different elements of WCF Srevices Client configuration file?
WCF Services client configuration file contains endpoint, address, binding and contract. A sample client config file looks like
  •  
What is Proxy and how to generate proxy for WCF Services?
WCF Services client configuration file contains endpoint, address, binding and contract. A sample client config file looks like
The proxy is a CLR class that exposes a single CLR interface representing the service contract. The proxy provides the same operations as service's contract, but also has additional methods for managing the proxy life cycle and the connection to the service. The proxy completely encapsulates every aspect of the service: its location, its implementation technology and runtime platform, and the communication transport.
The proxy can be generated using Visual Studio by right clicking Reference and clicking on Add Service Reference. This brings up the Add Service Reference dialog box, where you need to supply the base address of the service (or a base address and a MEX URI) and the namespace to contain the proxy.
Proxy can also be generated by using SvcUtil.exe command-line utility. We need to provide SvcUtil with the HTTP-GET address or the metadata exchange endpoint address and, optionally, with a proxy filename. The default proxy filename is output.cs but you can also use the /out switch to indicate a different name.
SvcUtil http://localhost/MyService/MyService.svc /out:Proxy.cs
When we are hosting in IIS and selecting a port other than port 80 (such as port 88), we must provide that port number as part of the base address:
SvcUtil http://localhost:88/MyService/MyService.svc /out:Proxy.cs
  •  
What are contracts in WCF?
In WCF, all services expose contracts. The contract is a platform-neutral and standard way of describing what the service does.
WCF defines four types of contracts.
Service contracts
Describe which operations the client can perform on the service. There are two types of Service Contracts. ServiceContract - This attribute is used to define the Interface. OperationContract - This attribute is used to define the method inside Interface. [ServiceContract]
interface IMyContract
{
[OperationContract]
string MyMethod( );
}
class MyService : IMyContract
{
public string MyMethod( )
{
return "Hello World";
}
}
Data contracts
Define which data types are passed to and from the service. WCF defines implicit contracts for built-in types such as int and string, but we can easily define explicit opt-in data contracts for custom types.
There are two types of Data Contracts.
DataContract - attribute used to define the class
DataMember - attribute used to define the properties.
[DataContract]
class Contact
{
[DataMember]
public string FirstName;
[DataMember]
public string LastName;
}
If DataMember attributes are not specified for a properties in the class, that property can't be passed to-from web service.
Fault contracts
Define which errors are raised by the service, and how the service handles and propagates errors to its clients.
Message contracts
Allow the service to interact directly with messages. Message contracts can be typed or untyped, and are useful in interoperability cases and when there is an existing message format we have to comply with.
  •  
What is the address formats of the WCF transport schemas?
Address format of WCF transport schema always follow [transport]://[machine or domain][:optional port] format. for example: HTTP Address Format http://localhost:8888 the way to read the above url is "Using HTTP, go to the machine called localhost, where on port 8888 someone is waiting" When the port number is not specified, the default port is 80. TCP Address Format net.tcp://localhost:8888/MyService When a port number is not specified, the default port is 808: net.tcp://localhost/MyService NOTE: Two HTTP and TCP addresses from the same host can share a port, even on the same machine. IPC Address Format net.pipe://localhost/MyPipe We can only open a named pipe once per machine, and therefore it is not possible for two named pipe addresses to share a pipe name on the same machine. MSMQ Address Format net.msmq://localhost/private/MyService net.msmq://localhost/MyService
  •  
What is endpoint in WCF?
Every service must have Address that defines where the service resides, Contract that defines what the service does and a Binding that defines how to communicate with the service. In WCF the relationship between Address, Contract and Binding is called Endpoint. The Endpoint is the fusion of Address, Contract and Binding.
  •  
What is binding and how many types of bindings are there in WCF?
A binding defines how an endpoint communicates to the world. A binding defines the transport (such as HTTP or TCP) and the encoding being used (such as text or binary). A binding can contain binding elements that specify details like the security mechanisms used to secure messages, or the message pattern used by an endpoint.
WCF supports nine types of bindings.
Basic binding
Offered by the BasicHttpBinding class, this is designed to expose a WCF service as a legacy ASMX web service, so that old clients can work with new services. When used by the client, this binding enables new WCF clients to work with old ASMX services.
TCP binding
Offered by the NetTcpBinding class, this uses TCP for cross-machine communication on the intranet. It supports a variety of features, including reliability, transactions, and security, and is optimized for WCF-to-WCF communication. As a result, it requires both the client and the service to use WCF.
Peer network binding
Offered by the NetPeerTcpBinding class, this uses peer networking as a transport. The peer network-enabled client and services all subscribe to the same grid and broadcast messages to it.
IPC binding
Offered by the NetNamedPipeBinding class, this uses named pipes as a transport for same-machine communication. It is the most secure binding since it cannot accept calls from outside the machine and it supports a variety of features similar to the TCP binding.
Web Service (WS) binding
Offered by the WSHttpBinding class, this uses HTTP or HTTPS for transport, and is designed to offer a variety of features such as reliability, transactions, and security over the Internet.
Federated WS binding
Offered by the WSFederationHttpBinding class, this is a specialization of the WS binding, offering support for federated security.
Duplex WS binding
Offered by the WSDualHttpBinding class, this is similar to the WS binding except it also supports bidirectional communication from the service to the client.
MSMQ binding
Offered by the NetMsmqBinding class, this uses MSMQ for transport and is designed to offer support for disconnected queued calls.
MSMQ integration binding
Offered by the MsmqIntegrationBinding class, this converts WCF messages to and from MSMQ messages, and is designed to interoperate with legacy MSMQ clients.
  •  
Where we can host WCF services?
Every WCF services must be hosted somewhere. There are three ways of hosting WCF services.
They are
1. IISM
2. Self Hosting
3. WAS (Windows Activation Service)
  •  
What is address in WCF and how many types of transport schemas are there in WCF?
Address is a way of letting client know that where a service is located. In WCF, every service is associated with a unique address. This contains the location of the service and transport schemas.
WCF supports following transport schemas
HTTP
TCP
Peer network
IPC (Inter-Process Communication over named pipes)
MSMQ
The sample address for above transport schema may look like
http://localhost:81
http://localhost:81/MyService
net.tcp://localhost:82/MyService
net.pipe://localhost/MyPipeService
net.msmq://localhost/private/MyMsMqService
net.msmq://localhost/MyMsMqService
  •  
What is service and client in perspective of data communication?
A service is a unit of functionality exposed to the world.
The client of a service is merely the party consuming the service