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")
