Type Script part 5 Date type

Date is a non primitive value stored in memory heap by using date constructor

The data type in typescript to store date value is defined with  "any" type

The memory for date value is allocated by using dynamic memory allocation operator "new" and date constructor.

Type script uses following date functions

getHours()--> returns the hour number in 24 hour format

getMinutes()--> return the minute number.

getSecond()-->return the second number.

getDay()--> return the week day number.

Example Sunday=0

getDate()---Returns the date number

getMonth()-->Returns the month number

getYear()-->Returns the year number as per y2k

getFullYear()--> Returns full year number

toLocaleDateString()-->Returns short date format

toLocaleTimeString()-->Returns short time format

Example

let mfd:any=new Date();

console.log(mfd.getDate())

console.log(mfd.getMonth())

console.log(mfd.getYear())

console.log(mfd.getFullYear())

console.log(mfd.getHours())

console.log(mfd.getMinutes())

console.log(mfd.getSeconds())

console.log(mfd.getDay())

Output

How to Fix tsc is not recognized as an internal or external in Visual Studio Code

 To Fix , this first we need to Install Typescript 

 install typescript globally by running 

  npm install -g typescript

To check , if that typescript is installed or not. we need to use the below command

And use tsc.cmd instead of tsc

Below example

What are the challenges in the modern development , Why we need to learn Angular

Intro to web development|technology:
------------------------------------
  browser[client]                         webserver
                -------------------------> website[asp.net,php,jsp,..]
                                             |
                                          execution -->backend part
                                             |
                <--------------------------output
  html+css+javascript
       

Here, with in the browser what execution is happening that is called as front end part. The execution which is happening at the web server is called as back end part.
  

Here web development can be classified into 2  parts
 1.backend part
       the execution which takes place with in webserver system is
        called backend part

 2.frontend part
      the execution which takes place with in browser[client system]
      is called frontend part

Before 2008, more execution was placed on the web server.

Note: 

Now more number of users increased for web[websites] because of smart devices usage[mobile, tab,..],this will increase network traffic and more
burden on webserver

*From 2008 more execution burden was placed on browser to reduce burden on
 on webserver, this leads to importance for frontend web development

*there are different libraries and frameworks provided for frontend
 web development.

library-->it will be specific to particular task
              [narrow]

    framework-->environment with end to end tools for entire
                web development, it is a collection of libraries
                [wider] 

2006---jquery---->jquery team[john resig]-->it provides shortcut way to work with javascript
                         |
                  ->javascript library
                  ->it is collection of javascript functions
                  ->it will focus on DOM manips and traversal

 2010----angularjs-->google
                      |
                 ->javascript framework
                 ->no object oriented support
                 ->handling complex ui will not be easy 

2015-----angular2--->google
                        |
                    ->typescript framework
                    ->component based arch with object oriented support
                    ->handling complex ui will be easy
                    ->it provides more options as framework compare to reactjs[library]
                         *more databinding options
                         *built-in validations support
                         *dependency injection is supported

They are three reasons, why we need to learn Angular

1 Unified User Experience/Unified UX

2 Fluid User Experience

3 Search Engine Friendly URLS

Unified User Experience /Unified UX

The web application, must have an unified experience across devices.

An application must reach broad range of devices i.e. from pc to mobiles.

now what client wants is develop an application so that it should work in both web and mobile

It must have similar experience even on low bandwidth device.

Unified UX: Mobile users must get access to everything features of your application should not be restricted according to the device.

Application must run on any device. it must have the same feel n look.

Fluid User Experience: 

User must stay on only one page and get access to everything from that page

Page must get updated with new details without reloading the page.

it must avoid navigation using pagination.

User and SEO Friendly URLS

User must be able to browser the content of the application based on the previous search criteria.

Application must support routing technique to handle this.

Now, the question is how to build this kind of application.

Single Page Application

Can I use 

JavaScript-Yes

jQuery-Yes

knockout.js-Yes

backbone.js-Yes

Angular-Yes

What are the issues with jQuery ?

DOM Manipulation:

How to manipulate the view effectively.

Back Button:

What happens when we press back button,back button cannot be handled.

Routing

Readable URL( Query String )

Is URL User friendly and SEO Friendly.

Data Binding

How to bind the data from the model to view.

View Loading

How to load the view.

So solution for this is better use the framework.

jQuery Flow

Jquery Libraray----> Page is requested from Browser---> Page loads the static Dom---> library Loads--->library is passive--->browser uses event to make library active--->static dom converts into dynamic dom

Angular Flow

framework--->page is requested from browser--> page loads the static dom-->framework loads into browser---> framework is active--> static dom converts into dynamic dom

Framework:

A software framework is an architectural pattern responsible for not just building the application , but also control the application flow.

A service is a collection of factories and every factory is defined with a set of functions.

Service represents business logic with predefined functionalities.

 

A component comprises of template with html, css and typescript.

*the above development is called as stack based development
 1.MEAN stack

     M----Mongodb [database]
     E----Expressjs[middleware]
     A----Angular [frontend app]
     N----Nodejs[backend]

Introduction to Angular

Angular is a typescript framework provided by google to develop web application and mobile application.

Angular as a framework is providing end to end tools required for entire front end
web development

    building---->debugging--->unit testing-->production build
                         |
                  entire frontend web development
                         |
                  end to end tools
                         |
                typescript language
                debugging files[map files]
                jasmine and karma tool for unit testing 
                Ivy and AoT compilers for provided for production build 

angular is developed using typescript language and programming with in angular
will be using typescript language, so angular is called as typescript framework

  ->typescript language is developed by Microsoft in the year 2012
  ->google used typescript language of Microsoft to develop angular framework
    in the year 2015[Angular2]

  ->angular is having the power of 2 big companies Microsoft[typescript]
    and google[angular]

*angular is not an extension of angular.js,it is completely rebuilt from ground level using typescript language


angular vs react:
-----------------
1.angular is a typescript framework
  reactjs is a javascript library

2.angular is less dependent on thirdparty packages,it comes with 
  so many builtin services
  [like httpclient service is available for ajax]

  react is more dependent on thirdparty packages
  [like axois third party package is required for ajax]

3.angular as a framework comes with so many features
  [like more databinding options,builtin validations,pipes,dependency injection,..]

  react.js as a library will focus more on UI part, less features compare to angular

Jquery MultiSelect DropDown

using System.Data.SqlClient;

using System.Collections;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        SqlConnection con = new SqlConnection("user id=sa;password=uday;database=mydb;data source=localhost");

        SqlCommand cmd = new SqlCommand("select empno,ename from emp",con);

        con.Open();

        SqlDataAdapter da = new SqlDataAdapter(cmd);

        DataTable dt = new DataTable();

        da.Fill(dt);

        List<Emp> listemp = new List<Emp>();

       

        foreach (DataRow dr in dt.Rows)

        {

            Emp obj = new Emp();

            obj.Empno = Convert.ToInt16(dr[0]);

            obj.EmpName = Convert.ToString(dr[1]);

            listemp.Add(obj);

        }

        Context.Session["EMPDETAILS"] = listemp;

        con.Close();

    }

}

Default.aspx.cs Image

Default.aspx

<head runat="server">

 <link rel="stylesheet" href="css/common.css" type="text/css" />

    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" />

    <link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>

    <script type="text/javascript" src="js/plugins/localisation/jquery.localisation-min.js"></script>

    <script type="text/javascript" src="js/plugins/scrollTo/jquery.scrollTo-min.js"></script>

    <script type="text/javascript" src="js/ui.multiselect.js"></script>

    <script type="text/javascript">

        $(function () {

            $.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/' });

            $(".multiselect").multiselect();

            $('#switcher').themeswitcher();

        });

    </script>

    </head>

<body>

    <form id="form1" runat="server">

    <div>

        <%

            List<Emp> obj = new List<Emp>();

             %>

        <% if (Context.Session["EMPDETAILS"] != null)

           {

               obj = (List<Emp>)Context.Session["EMPDETAILS"];

           }

       

            %>

        <select size="4" id="EmpName" class="multiselect" multiple="multiple" name="EmpName[]">

                                                      <%

                                                   if (obj != null && obj.Count != 0)                  {

                                                        for (int i = 0; i < obj.Count; i++)           {

                                           

Emp listemp = (Emp)obj[i];                                                 %>

  <option value="<%=listemp.Empno%>">                          <%=listemp.EmpName%></option>                                                  <%

                                                                }

 }

 %>

   </select>

        <br/>

         <asp:Button ID="Button1" runat="server" Text="Save Reports" />

    </div>

    </form>

</body>

==================================================

TypeScript Part 4

Static Member

The term static refers to memory.

The static memory once allocated for an object will be used for all other objects.

It occupies more memory

The static members are declared by using the keyword static and they are accessible by using class name.

Non Static Member

It uses dynamic memory.

The dynamic memory is allocated for every object individually. Hence it is more secure, and occupies less memory.

The non static members are accessible with in the class by using "this" keyword.

Example

class Demo1 {

public n:number=0;

public static s:number=0;

constructor()

{

    this.n+1;

    Demo1.s++;

}

public print():void {

    console.log("s=" + Demo1.s);

    console.log("n=" + this.n);

}

}

let obj1 =new Demo1();

obj1.print();

let obj2=new Demo1();

obj2.print();

let obj3=new Demo1();

obj3.print();

Output

s=1

n=0

s=2

n=0

s=3

n=0

Static Keyword  /Access Specifier 

 -------------------------------
 *static keyword can be applied to a field (or) method
  1.static field
  2.static method

 static field:
 -------------
 *the field attached to a class is called "static field"
 *static field will be allocated with memory only single time, it will be
  shared by all the objects of a class
 *static field can be referenced only with class name, not with object variable


 static method:
 --------------
 *the method attached to a class is called "static method"
 *static method can access only static fields
 *static method can be referenced only with class name, not with object variable