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