Designing Single page application using Angular JS 2

1. presented by
Paras Mendiratta

2. 1. Introduction

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

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

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

6. 2. Comparison

9. 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

10. 3. Tools

11. NodeJS
http://nodejs.org
11

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

13. 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

16. 4. TypeScript

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

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

19. 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 undefined Denotes value given to all uninitialised variables
19

20. 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

21. 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

22. 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
undefined 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 undefined by default.
var name;
22

23. 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!=undefined)
console.log("Email Id",mail_id);
}
disp_details(123,"John");
disp_details(111,"mary","mary@xyz.com");
23

24. 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

25. Tuples - Typescript
✓ // Defining a tuple
var myTuple = [ ];
✓ // Defining 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

26. Union - Typescript
✓ // Defining 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

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

28. 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

29. 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

30. 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

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

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

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

34. 5. Architecture

35. Architecture
Components Directives
ServicesRouters
ngModule
35

36. 6. ngModule

37. 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

38. 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

39. 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 { }

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

41. Directives
“Modifies DOM elements and/or extend their
behaviour”
41

42. Routes
“Responsible for navigation”
42

43. Services
“Responsible for arranging data for view
components”
43

44. 7. Components
(a.k.a ViewComponents)

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

46. Navbar
Sidebar Content
{ } { }
{ }

49. 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

50. 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:-

51. 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

52. 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

54. Thank You