Scribd
Upload
2 views25 pages

Angular Day1

The document provides an overview of Angular, a platform for building web applications, emphasizing its benefits, features, and the use of TypeScript. It outlines the differences between Angular and AngularJS, prerequisites for installation, and key TypeScript concepts such as data types, interfaces, and decorators. Additionally, it includes an assignment to implement a banking system using TypeScript.

Uploaded by

Abdulrahman Mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views25 pages

Angular Day1

The document provides an overview of Angular, a platform for building web applications, emphasizing its benefits, features, and the use of TypeScript. It outlines the differences between Angular and AngularJS, prerequisites for installation, and key TypeScript concepts such as data types, interfaces, and decorators. Additionally, it includes an assignment to implement a banking system using TypeScript.

Uploaded by

Abdulrahman Mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Angular

“formerly Angular 4”
Benefits worth the cost

Eng. Niveen Nasr El-Den


SD & Gaming CoE
iTi
Angular Team Says..

We believe that writing beautiful


apps should be joyful and fun.
We're building a platform for the
future
Angular
 Angular is a platform that makes it easy to
build applications with the web.

 Angular combines declarative templates,


dependency injection, end to end tooling, and
integrated best practices to solve development
challenges.

 Latest version is 5.2.9

https://angular.io/docs
Angular
 Angular empowers developers to build
applications that live on the web, mobile,
or the desktop

 Angular is sponsored by Google.

 Angular is built by a team of engineers


who share a passion for making web
development feel effortless
Angular vs AngularJS
 Angular refers to Angular 2+ while
AngularJS refers to Angular 1.x
 Angular uses TypeScript
 Faster than previous versions
 No controllers, no scope
 Built on Component Model
 Not backward compatible with AngularJS
 Simpler
Prerequisites & Installation
 Tools  Text Editor
 node  VisualStudio Code
 npm  Any other preferable one

 Knowledge
 ES6
 TypeScript

 Installation
 npm install –g @angular/cli
 npm install –g typscript
TypeScript
 TypeScript is a typed
superset of JavaScript
 Supported By Microsoft
 It is a compiled language
 it catches errors before runtime

 TypeScript is a JavaScript transpiler


 It compiles to Javascript.

 Latest version is 2.7 http://www.typescriptlang.org/


Why TypeScript
 Better Tooling Support because it has static
typing (like C#).
 Intellisense and syntax checking

 Object oriented.

 All JavaScript code is TypeScript code, simply


copy and paste

 All JavaScript libraries work with TypeScript

 Runs in any browser or host, on any OS


TypeScript Features
 Support standard JavaScript code with
static typing
 Type inference
 Interface
 Generics
 Enums
 Access Modifiers
 etc.
TypeScript DataTypes
 Any :any  bypasses type checking
 String : string
 Number : number
 Boolean : boolean
 Array
 var arr: number[] = [1,2,3]
 var arr: Array<number>= [1,2,3]

 Enum
 enum Color {Blue,Red,Green} ;
 var c : Color = Color.Blue;
Type Annotation
var identifier [[:type] = initVal];

 4 ways to define a variable


 var x; //type is any
 var x = 10; //Type Inferred
 var x : number;
 var x : number = 10;
Type Assertion
 Give hint/ensure to compiler the value
type for a given variable

 Example:
let val:any=“abc xyz”
(<string>val).length
Function
 We can specify returning type
 Use default parameter
 Use …rest parameter
 Syntax

function funNM (p1:type=val, p2?:type):returnType{


return ..;
}
Interface
 Describe minimum sets of public basic
properties and method that a class must follow
interface human {
job: string;
 A contract hasJob?(): boolean;
}
that a class student extends Person implements human {
class must constructor(
public job: string,
adhere to; public name: string,
public stage: number,
public ln: string,
public grade: string
) {
super(name, stage, ln);
}
}
Interface
 Interface as custom type

interface Point {
readonly x: number;
readonly y: number;
}

var p: Point = { x: 20, y: 30 };


var px = p.x;
Interface
 interfaces are also capable of describing
function types

interface myFunInterface {
(src: string, str: string): string;
}

let myFunInterfaceUse: myFunInterface;

myFunInterfaceUse = function(a: string, b: string): string {


return a + " " + b;
};
readonly vs const
 The easiest way to remember whether to
use readonly or const
 variables use const
 properties use readonly.
Type Definition
https://github.com/DefinitelyTyp
ed/DefinitelyTyped

 To use 3rd party library in typescript


 Install type definition file via cmd
 npm inatall –save @types/jquery
 @types folder will be created

http://microsoft.github.io/TypeSearch/
 Add reference to declares a dependency on a
package.
 /// <reference types="jquery" />
 Triple-slash directives are single-line comments
containing a single XML tag. The contents of the
comment are used as compiler directives.
Decorators
 It is a function that add metadata to the
thing it is attached to
 Used to customize our class at design time
 Decorators are an experimental feature
that may change in future releases.
 tsc --target ES5 --experimentalDecorators f.ts
 Multiple decorators can be applied to a
declaration
Decorator
Assignment
Assignment Account

Acc_no
Balance
<<IAcccount>>
debitAmount()
Date_of_opening
creditAmount()
getBalance()
addCustomer()
removeCustomer()

<<IAcccount>>

<<IAcccount>>

Saving_Account Current_Account

Min_Balance Interest_rate
Assignment
 Implement the give system in previous
using TypeScript
 Implement any required class, properties
and method
 Note: Account is an abstract class
 Assume your datatype

You might also like