DotNet

Saturday, February 15, 2020

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:

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

Wednesday, December 24, 2014

Site Links

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

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.