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

Site Links

Important Links:
http://dotnetsudhakar.blogspot.in/

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