Angular JS2 Training Session #1

Introduction
“Angular is a Javascript Framework which allows you to create reactive
Single-Page-Applications (SPAs)”
3

Features
Cross Platform
➡ Progressive Web Apps
➡ Native Mobile Apps
➡ Desktop
Speed and Performance
➡ Code Generation
➡ Universal
➡ Code Splitting
4

Features
Productivity
➡ Templates
➡ Angular CLI
➡ IDEs
Full Development Story
➡ Testing
➡ Animation
➡ Accessibility
5

Comparison
Attribute Angular JS Angular 2 React
DOM Regular DOM Regular DOM Virtual DOM
Packaging Weak Medium Strong
Abstraction Weak Medium Strong
Debugging General Good HTML / Bad JS Goos JS / Good HTML Good JS / Bad HTML
Binding 2 Way 2 Way Uni-Directional
Templating HTML TypeScript JSX
Component Model Weak Strong Medium
MVC YES YES View Layer Only
Rendering Client Side Client Side Server Side
9

NodeJS
http://nodejs.org
11

Angular CLI
https://cli.angular.io/
“Angular CLI is a command line interface for Angular”
12

Visual Studio Code
http://code.visualstudio.com/
“ Visual Studio Code is a source code editor developed by Microsoft for
Windows, Linux and macOS. It includes support for debugging, embedded Git
control, syntax highlighting, intelligent code completion, snippets, and code
refactoring ”
13

Introduction to Typescript
“TypeScript is a typed
superset of JavaScript.”
17

TypeScript & ECMAScript
“TypeScript is pure object oriented with classes,
interfaces and statically typed like C# or Java.”
18

Data Types - TypeScript
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 Represents a sequence of Unicode characters
Boolean Boolean Represents logical values, true and false
Void void
Used on function return types to represent non-returning
functions
Null null Represents an intentional absence of an object value.
Undefined undeﬁned Denotes value given to all uninitialised variables
19

Null & Undefined
Controversy
✓ null & undefined are not same.
✓ null => The variable has been set to an object whose
value is undefined.
✓ undefined => A variable initialised with undefined
means that the variable has no value or object
assigned to it.
20

Javascript <-> Typescript
✓ Operators => Conditional and Bitwise Operators
✓ Loops => For and While
✓ Decision Making => If else
✓ Arrays
✓ JSON object
What’s common between Javascript and TypeScript?
21

Variables - Typescript
✓ // The variable stores a value of type string 
var name:string = “mary”;
✓ // The variable is a string variable. The variable’s value is set to
undeﬁned by default 
var name:string;
✓ // The variable’s type is inferred from the data type of the value. Here,
the variable is of the type string 
var name = “marry”;
✓ // The variable’s data type is any. Its value is set to undeﬁned by default. 
var name;
22

Functions #1 - Typescript
✓ // Function with optional parameter 
function disp_details(id:number,name:string,mail_id?:string)
{
console.log("ID:", id);
console.log("Name",name);
if(mail_id!=undeﬁned)
console.log("Email Id",mail_id);
}
 
disp_details(123,"John");
disp_details(111,"mary","mary@xyz.com");
23

Functions #2 - Typescript
✓ // Function with rest parameter 
function addNumbers(…nums:number[ ]) {
var i;
var sum:number = 0;
for (i = 0; i < nums.length; i++) {
sum = sum + nums[ i ];
}
console.log("sum of the numbers”, sum);
}
 
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);
24

Tuples - Typescript
✓ // Deﬁning a tuple 
var myTuple = [ ];
✓ // Deﬁning a tuple and assigning values at same time 
var myTuple = [10, 20.3, “Angular JS”];
✓ // Accessing a tuple value 
console.log(“Tuple at #2”, myTuple[2]); 
console.log(“Tuple at #0”, myTuple[0]); 
console.log(“Tuple at #1”, myTuple[1]);
“Tuples are similar to Arrays but can store multiple data type in same
variable”
25

Union - Typescript
✓ // Deﬁning a union 
var myUnion:string|number;
✓ // Assigning values to a union variable 
myUnion = 10; 
myUnion = “This is a string value assigned to Union
variable”;
“Union is the type of variable that can store more
than one data type.”
26

Interfaces - Typescript
✓ // Lets consider an object 
var person = {
FirstName:"Tom",
LastName:"Hanks",
sayHi: ()=>{ return "Hi"}  
};
✓ To reuse the signature across objects we can deﬁne it as
an interface.
“An interface is a syntactical contract that an entity
should conform to.”
27

Interfaces Example
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
console.log("Customer Object ")
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())
var employee:IPerson = {
firstName:"Jim",
lastName:"Blakes",
sayHi: ():string =>{return "Hello!!!"}
}
console.log("Employee Object ")
console.log(employee.firstName) console.log(employee.lastName);
28

Classes - Typescript
“A class in terms of OOP is a blueprint for creating
objects. A class encapsulates data for the object.”
class Car {
//field
engine:string;
//constructor
constructor(engine:string) {
this.engine = engine
}
//function
disp():void {
console.log("Engine is : “ + this.engine);
}
}
29

Namespaces - Typescript
“A namespace is a way to logically group related code. It
helps in resolving global namespace pollution problem
presents in Javascript.”
Example:-
 
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
“The classes or interfaces which should be accessed outside
the namespace should be marked with keyword export.”
30

Modules - Typescript
“A module is designed with the idea to organise
code written in TypeScript.”
Internal External
31

Internal Modules
“Internal modules came in earlier version of
Typescript and now replaced by namespaces.”
32

External Modules
“External modules in TypeScript exists to specify and
load dependencies between multiple external JS ﬁles.”
Example:-
 
import someInterfaceRef = require(“./SomeInterface”);
There are two occasions when we need to load external JS ﬁles:-
➡ Server Side - NodeJs
➡ Client Side - RequireJs
33

Architecture
Components Directives
ServicesRouters
ngModule
35

ngModule
• Module is a group of components in Angular JS 2.
• We can import one or more module in another module
and all associated will automatically get imported.
• We need not to worry about importing each component
individually.
“NgModules help organise an application into cohesive
blocks of functionality”
Features:
37

ngModule
• Feature as a Module
• Shared Utilities as a Module
How modules should be organised?
There are no standard way to group modules, but the
recommendations are:
https://scotch.io/bar-talk/getting-to-know-angular-2s-module-ngmodule
38

ngModule
@NgModule({
declarations: [ // put all your components / directives / pipes here
AppComponent, // the root component
No1Component, No2Component, ... // e.g. put all 10 components here
AComponent, BComponent, // e.g. put component A and B here
NiceDirective,
AwesomePipe,
],
imports: [ // put all your modules here
BrowserModule, // Angular 2 out of the box modules
TranslateModule, // some third party modules / libraries
],
providers: [ // put all your services here
AwesomeService,
],
bootstrap: [ // The main components to be bootstrapped in main.ts file,
normally one only
AppComponent
]
})
export class AppModule { }

Components
“Encapsulate the template, data and the behaviour
of view. Also known as view components”
40

Directives
“Modiﬁes DOM elements and/or extend their
behaviour”
41

Routes
“Responsible for navigation”
42

Services
“Responsible for arranging data for view
components”
43

7. Components 
(a.k.a ViewComponents)

Components
“Encapsulate the template, data and the behaviour of view. Also known as view components”
{ } Root Component
{ } { }
{ } { } { }
45

Navbar
Sidebar Content
{ } { }
{ }

Creating Component
“Component can be creating using Angular CLI tool”
Example:-
 
ng generate component my-new-component
ng g component my-new-component # using the alias 
 
# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
 
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
49

Signature for Component
50
✓ Selector Name:- Tag name that needs to be
searched in parent template
✓ Template URL:- Path of HTML template file
associated with this component
✓ Style URLs:- String Array containing path of CSS files
that are used to decorate this component.
In component we need to define following details:-

Component Example
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'selector-demo',
templateUrl: 'demo.component.html',
styleUrls: ['demo.component.css', 
'demo2.component.css']
})
export class DemoComponent { }
51

Wrapping up
✓ Introduction to Angular JS
✓ Difference b/w Angular and Angular 2 and React JS
✓ Development Tools
✓ Basics of TypeScript
✓ Angular JS Architecture
Topics Covered
Next Session
๏ Passing data and events between components
๏ Directives and Pipes
๏ Model Classes
๏ Forms and Validation
52

Angular JS2 Training Session #1

More Related Content

What's hot (20)

Similar to Angular JS2 Training Session #1 (20)

Recently uploaded (20)

Angular JS2 Training Session #1