Thursday, 8 June 2017

Typescript with angularjs tutorial

Chapter 1

1. What is type script ?
Its devloped by microsoft to opt the feature of OOPS into javascript code.  extension for type script is .ts it refer to type script.  It is Superset of javascript, or say as Strong typing in javascript 

2.       Types :  Their are different type of data type to over come the type safe problem of var in javascript. 
Primitive :
number,
string ,
Boolean,
any

Custom 
interface
classes.


3.       Compile to plain javascript.
4.       Allows use of existing Js library. Like Angularjs

5.       Getting started ts with vs2013
a)      Create a VS 2013 with typescript html project
b)      Got to the project nugget and searched for below project and installed.

c)       You can see the list of file in script folders.



Now run your application it will give the result as:


6.       Type script function vs Javascript functions;
Look below for javascript functions;
/* Java script functions for mutiplication */
function multiply(x, y) {
    console.log('Normal js method ');
    console.log('x', x);
    console.log('y', y);
    return x * y;

}

// Anoynomus method
var anMethod = function (x, y) {
    console.log('Anoynomus JS method ');
    console.log('x', x);
    console.log('y', y);
    return x * y;

}
Calling of methods
    console.log(multiply(2, 10));
    console.log(anMethod(2, 10));

7.       Defining the same method by using and passing the types into the script.
See in below type
function multiply
(x: number, y: number)
: number
Function name
Passing Parameters  by passing type
Returning the value as number;
If you return string it will error.



/* Adding type to the funcation is javascript (typescript )*/

function multiply(x: number, y: number): number {
    //return "hi";///// it will give the error
    return x * y;

}


// Anoynomus method
var anMethod = function (x: number, y: number): number {
    return x * y;

}
Calling of methods
console.log(multiply(2, 10));
    console.log(anMethod(2, 10));


8. Defining class in typescript
-   Class : Type script defining the class and declaring the constructor as like below;
class Person {

    Firstname; string;
    LastName: string;
    Age: number;

    constructor(firstname: string, lastName: string, age: number) {
        this.Firstname = firstname;
        this.LastName = lastName;
        this.Age = age;

    }

    display()
    {
        console.log("First Name  " + this.Firstname + ",  Last Name  " + this.LastName + ", Age ", + this.Age );
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Person("satya","prakash", 30);
    greeter.display();
};

-          Inheritance in Type script : Derived class is inheriting base class using the Extends keyword. And if you doing the inheritance you need to call the constructor of base class using the super  keyword.
You can call the base class method also using the super keyword, please see the example below.
class Shape {

    Color: string;
  
    constructor(color: string) {
        this.Color = color;
    }

    display()
    {
        console.log("Color  is : " + this.Color );
    }

}

class Rectangle extends Shape {

    private Height: number;
    private Width: number;

    constructor(color: string,height: number, width: number) {
        super(color);
        this.Height = height;
        this.Width = width;
    }

    display() {
        super.display();
        console.log("Size of rectangle is" + this.Height * this.Width);
    }
}

window.onload = () => {
    var el = document.getElementById('content');
    var value = new Rectangle("Blue",20,30);
    value.display();
};

-          Accessors Method in typescript  : Writing the get and set method similar to the properties in C#. See the below example for setter method.

class Person {

    _firstname; string;
    _lastName: string;
    _age: number;


    get Firstname(): string {
        return this._firstname;
    }

    set Firstname(firstname: string) {
        this._firstname = firstname;
    }

    get LastName(): string {
        return this._lastName;
    }

    set LastName(lastName: string) {
        this._lastName = lastName;
    }

    get Age(): number {
        return this._age;
    }

    set Age(age: number) {
        this._age = age;
    }

    constructor(firstname: string, lastName: string, age: number) {
        this._firstname = firstname;
        this._lastName = lastName;
        this._age = age;

    }

    display() {
        console.log("First Name ::" + this.Firstname + ",  Last Name :: " + this.LastName + ", Age ::", + this.Age);
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Person("satya", "prakash", 30);
    greeter.display();
};


-          Static Data :  static data of the class is the piece of data that will share all by the class which can be access throughout the other class. You can access it by classname.variablename

class Employee {

    Firstname; string;
    LastName: string;
    Age: number;
    static company: string;

    constructor(firstname: string, lastName: string, age: number) {
        this.Firstname = firstname;
        this.LastName = lastName;
        this.Age = age;
        Employee.company = "XYZ";
    }

    display() {
        console.log("First Name :: " + this.Firstname + ",  Last Name :: " + this.LastName + ", Age  :: " + this.Age + ", Company  :: " + Employee.company   );
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Employee("satya", "prakash", 30);
    greeter.display();
};




9.  Defining Interface on Typescript :
It can be done by the keyword interface it defining the variable inside of it.
As in below interface having the location as parameter,  We can pass the more parameter instead of one but should have the location as in parameter.  If we don’t have Location than it will give error.
interface Address {
    location: string;
}

function ShowAddress(obj: Address) {
    console.log(obj.location);
}




window.onload = () => {
   
    ShowAddress({ location: "Hyderbad", State: "TS" });
};


Optional Parameter in Interface: Defining the optional parameters in interface, Even if you are not passing the value you will not get any error. Variable? : datatype
interface Address {
    State: string;
    location: string;
    country?: string;
}

function ShowAddress(obj: Address) {
    console.log("Location :: " + obj.location);
    console.log("State :: " + obj.State);
    if (typeof(obj.country) != 'undefined') {
        console.log("Country :: " + obj.country);
    }
  
}

window.onload = () => {
   
    ShowAddress({ location: "Hyderbad", State: "TS" });
    ShowAddress({ location: "Hyderbad", State: "TS", country : "India" });
};


Function in Interface :   defining the function in interface, typescript  allow to define the function into interfaces.
interface Address {
   ( State: string, location: string ): string;
}

var newAddress : Address;

newAddress = function (st: string, lo: string): string {
    return "State : " + st + "    Location : " + lo;
}

window.onload = () => {

    var str = newAddress("TS", "Hyderbad");
    console.log(str);
};


Classes in Interface: Typescript allow to implement the interface into the classes,
Classes can implement the multiple interfaces. It will implements using the implements keyword. If implements the interface need to implement all the variable into derived class.
interface Shape {
    color: string;
}

class Rectangle implements Shape {

    private Height: number;
    private Width: number;
    color: string;

    constructor(color: string, height: number, width: number) {
        this.Height = height;
        this.Width = width;
        this.color = color;
    }

    display() {
        console.log("Size of rectangle is" + this.Height * this.Width + " Color" + this.color);
    }
}


window.onload = () => {

    var str = new Rectangle("blue", 10, 20);
    str.display();
};



Chapter 2 : Setting Up AngularJS Apps Using TypeScript


Angularjs dependencies with Typescript
1.       Please see the chapter 1 there are list of the item that we need to install before installing the angularjs  with type script.
After taking the nugget package if you are getting error as 100+ more error




Need to install the latest type script compiler for vs 2013


If working in vs2015;
Download the typescript complier from.
http://www.typescriptlang.org/#download-links


2.       Now you need to refer all the important flies into index.html to work with it, you HTML page will be look like below.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>Angular HTML App</h1>

</body>
</html>

You can see that we have app.ts but we are referring to app.js into our html page.

3.       Now in app.ts you need to take the reference as like below.
/// <reference path="scripts/typings/angularjs/angular.d.ts" />

After doing that your angular application will be behave like the type script compatible and now you can create the Angularjs application with the type script code.

4.       Now you can use the angular object

angular.module("app", ['ngroute'])
    .config(function ($routeProvider) {

        console.log("in config()');

});

Now if you see that code we are defining the same way of angularjs  module as we defined into javascript.

5.       Now creating the angularjs module using the type script module.
Lets see how the index.html page will look. If you see below we are defining the ng-app and ng-controller and two scope variable as greeting1 and greeting2

Code Snippet :


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="MainController">
        <h1>{{greeting1}}</h1>

        <h2>{{greeting2}}</h2>
    </div>
</body>
</html>




Ts file will be like below:
Defining the modules and associated with the controller

/// <reference path="scripts/typings/angularjs/angular.d.ts" />

class MainController {
    static inject = ['$scope'];

    constructor($scope)
    {
        $scope.greeting1 = "Hello Angular with TS";
        $scope.greeting2 = "Welcome to first application";
    }
}

var app = angular.module("app", [])
app.controller("MainController", ["$scope", MainController]);




Output you will get as:


Creating angularjs Controller using type script.
1.       Let’s create one more type script  file as main.ts, where we will keep our controller code.
2.       In app.ts we will defined the angular modules.
3.       Need to give the reference of js file in index.html

Code snippet
App.ts : take the reference of angular.d.ts;  Creating the module for app.project and export it so we can use it out side.
/// <reference path="scripts/typings/angularjs/angular.d.ts" />

module AppProject
{

    angular.module('AppProject', ['ngRoute']);
    export var getModule: () => ng.IModule = () => {
        return angular.module('AppProject');
    }
}



Main.ts :: need to take the reference of app.ts
/// <reference path="app.ts" />

module Main
{
    var app = AppProject.getModule();
   
    interface MainScope extends ng.IScope
    {
        greeting1: string;
        greeting2: string;
    }

    class MainController {
    static inject = ['$scope'];

    constructor($scope: MainScope)
    {
        $scope.greeting1 = "Hello Angular with TS";
        $scope.greeting2 = "Welcome to first application";
    }
  
}

    app.controller("MainController", ['$scope', MainController]);
    
}



Index.html, need to take the reference of main.js and app.js
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="app.js"></script>
    <script src="main.js"></script>
</head>
<body ng-app="AppProject">
    <div ng-controller="MainController">
        <h1>{{greeting1}}</h1>

        <h2>{{greeting2}}</h2>

        <input type="button" onclick="display()" value="submit" />
    </div>
</body>
</html>




No comments:

Post a Comment