Angular 2 Introduction and TypeScript Basics

Angular JS is open source framework built over JavaScript. It was built by the developers at Google. 

Features of Angular 2

Components − The previous version of Angular JS uses Controllers but now it has been changed to  components over controllers. Using components we can build the application using Modules.

TypeScript − The new Angular is based on TypeScript. This is a superset of JavaScript and is maintained by Microsoft.

Services − Services are a set of code that can be shared by different components of an application. 

Data binding- data binding has been improved in Angular 2. So, whatever DOM element property you need to bind, you just wrap it in square brackets. E.g.-

<img[src]='product.image' />

Angular Js

AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain. 

TypeScript:

TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript.  

TypeScript is a strongly typed, object oriented, compiled language. It was designed by Anders Hejlsberg (designer of C#) at Microsoft

Features of TypeScript:

TypeScript is just JavaScript. TypeScript starts with JavaScript and ends with JavaScript. Typescript adopts the basic building blocks of your program from JavaScript. Hence, you only need to know JavaScript to use TypeScript. All TypeScript code is converted into its JavaScript equivalent for the purpose of execution.

TypeScript supports other JS libraries. Compiled TypeScript can be consumed from any JavaScript code. TypeScript-generated JavaScript can reuse all of the existing JavaScript frameworks, tools, and libraries.

JavaScript is TypeScript. This means that any valid .js file can be renamed to .ts and compiled with other TypeScript files.

TypeScript is portable. TypeScript is portable across browsers, devices, and operating systems. It can run on any environment that JavaScript runs on.  TypeScript doesn’t need a dedicated VM or a specific runtime environment to execute.

Type Script supports OOPS

var message:string = "Hello World"

console.log(message)

TypeScript is Case-sensitive

Semicolons are optional

Comments in TypeScript

• Single-line comments ( // ) 

• Multi-line comments (/* */) 

A TypeScript program is composed of −

Modules

Functions

Variables

Statements and Expressions

Comments

Rules for Identifier in Type Script:

It cannot be a keyword.

They must be unique.

Identifiers cannot have special symbols except for underscore (_) or a dollar sign ($).

It can have both identifier and digit, But it should not begin with Digit

It cannot contains spaces

Valid Identifiers

firstName

num1

$result

last_name

Keywords in Type Script:

break	as	any	switch
case	if	throw	else
var	number	string	get
module	type	instanceof	typeof
public	private	enum	export
finally	for	while	void
null	super	this	new
in	return	true	false
any	extends	static	let
package	implements	interface	function
new	try	yield	const
continue	do

DataTypes 

Data type	Keyword	Description
Number	number	Double precision 64-bit floating point values. It can be used to represent both, integers and fractions.
String	string
Boolean	boolean	True or False
Void	void	Used on function as a return types to represent non-returning functions
Null	null	absence of an object value.
Undefined	undefined	uninitialized variables

Note: We don't  have integer type in TypeScript.

Variable Declaration in Type Script:

To declare a variable in Type Script we need to include a colon(:)

Declare its type and value in one statement.

var name:string = ”uday”;

Declare its type but no value. In this case, the variable will be set to undefined.

var name:string; Than in this case it is set to undefined by default.

Declare its value but no type. The variable type will be set to any.

var name="uday";

In this case variable is of type String

Declare neither value not type. In that case, the data type of the variable will be any and will be initialized to undefined.

var name;

What is an Operator?

It defines a function that will be perform on the data.

Example : 4+4=8, Here 4,4,8 are the operands and + , = are the operators

Arithmetic operators

Logical operators

Relational operators

Bit-wise operators

Assignment operators

Ternary/conditional operator

String operator

Type Operator

+ (Addition): It returns the sum.

- (Subtraction): It returns the difference. 

* (Multiplication): It returns the product. 

/ (Division): Performs a division operation and returns the quotient.

% (Modulus): Performs a division and returns the remainder.

++ (Increment): Increments the value of the variable by one.

-- (Decrement): Decrements the value of the variable by one.

Relational Operators

> Greater than

< Lesser than

>= Greater than or equal to

<= Lesser than or equal to

== Equality (A == B) is false

!= Not equal (A != B) is True

Logical Operators

&& (And)

|| (OR)

! (NOT)

String Operators:

1 Concatenation operator (+)

var msg:string = "hi"+"uday" 

console.log(msg)

2 Conditional Operator (?)

This operator is used to represent a conditional expression. The conditional operator is also sometimes referred to as the ternary operator.

Test ? expr1 : expr2. The syntax is as given below 

var num:number = -2 

var result = num > 0 ?"positive":"non-positive" 

console.log(result)

3 Type Operators

typeof operator

It is a unary operator. This operator returns the data type of the operand. Take a look at the following example −

var num = 12 

console.log(typeof num);   //output: number

instanceof

This operator can be used to test if an object is of a specified type or not. 

TypeScript - Decision Making

 if statement

if...else statement

else…if and nested if statements

switch statement

forloop

while loop

do while

break

continue

Type Script Numbers:

MAX_VALUE:  The largest possible value in the javascript.

MIN_VALUE: The smallest possible value in the javascript.

NaN: It is equal to the value that is not a number

NEGATIVE_INFINITY: The value that is less than the min value.(MIN_VALUE)

POSITIVE_INFINITY: The value that is more than the max value. (MAX_VALUE)

Type Script Strings:

The String object lets you work with a series of characters. 

var var_name = new String(string);

Properties:

Length: It returns the length of the string

Prototype:

The prototype property allows you to add properties and methods to an object.

Constructor

Returns a reference to the String function that created the object.

TypeScript - Classes

Typescript supports object-oriented programming features like classes, interfaces

Creating classes

Class definition can include the following points:

Fields − A field is any variable declared in a class. Fields represent data 

Constructors − It is responsible for allocating memory for the objects of the class

Functions − It  represent actions an object can take. 

class Car { 

   //field 

   empname:string; 

   //constructor 

   constructor(empname:string) { 

      this.empname = empname 

   }  

   //function 

   disp():void { 

      console.log("Employee Name is  :   "+this.empname) 

   } 

}

Creating Instance:

To create an instance of the class, use the new keyword followed by the class name. The syntax for the same is given below −

Syntax

var object_name = new class_name([ arguments ])

The new keyword is responsible for instantiation.

The right-hand side of the expression invokes the constructor. The constructor should be passed values if it is parameterized.

Example: Instantiating a class

var obj = new Employee("Uday")