Angularjs2 presentation

 INTRODUCTION
 HISTORY
 WHY ANGULAR
 GETTING STARTED
 ARCHITECTURAL PATTERN
 ARCHITECTURAL PATTERN-MVC
 TYPESCRIPT
 MODULES
 COMPONENTS
 TEMPLATES
 METADATA
 SERVICES
 ROUTES
 DIRECTIVES OF ANGULARJS
 1ST APP
 WHAT YOULL NEED
 PACKAGE.SON FILE
 SAMPLE POJECT OVERVIEW
 ANGULAR APP
 FOLDER STRUCTURE
 ADVANTAGES
1/9/2018
2
CONTENTS

 Angular 2 is an open source JavaScript framework to build web
applications in HTML and JavaScript.
 Client side application.
 It is essentially a structure that helps you create applications faster by
providing a number of service and objects that makes things easier for
app developers.
 The Angular JS2 is a dramatic upgrade to the previous version of the
framework. It is really a rethinking of how applications should be built.
1/9/2018 3
INTRODUCTION

Single Page Application:
1/9/2018 6

 Single-Page Applications (SPAs) are
Web apps that load
a single HTML page and dynamically
update that page as the user interacts
with the app.
 SPAs use AJAX and HTML5 to create
fluid and responsive Web apps,
without constant page reloads.
However, this means much of the work
happens on the client side, in
JavaScript.
1/9/2018 7

Multi Page Application:
1/9/2018 8

Single Page Application:
1/9/2018 9

 Typescript is a free and open-source programming language developed
and maintained by Microsoft.
 It is a strict syntactical superset of JavaScript, and adds optional static
typing to the language.
 Anders Hejlsberg, lead architect of C# and creator of Delphi and Turbo
Pascal, has worked on the development of TypeScript. TypeScript may
be used to develop JavaScript applications for client-side or server-
side (Node.js) execution.
 TypeScript is designed for development of large applications
and compiles to JavaScript.
 As TypeScript is a superset of JavaScript, existing JavaScript programs
are also valid TypeScript programs.
1/9/2018 11
TYPESRCIPT

 TypeScript is not the only typed language
that compiles to JavaScript.
 There are other languages with stronger
type systems that in theory can provide
absolutely phenomenal tooling. But in practice
most of them do not have anything other than a compiler.
 This is because building rich dev tools has to be an explicit goal
from day one, which it has been for the TypeScript team.
 That is why they built language services that can be used by editors to
provide type checking and auto completion.
1/9/2018 12
TYPESRCIPT

Comparison with & without TS
Without TS:
function add(a, b)
{
return a + b;
} add(1, 3); // 4
add(1, '3'); // '13'
With TS:
function add(a: number, b: number) {
return a + b;
}
add(1, 3); // 4 //
compiler error before JS is even
produced
add(1, '3'); // '13'
1/9/2018 13
TYPESRCIPT

12/01/2017 14
 Modules are used in Angular JS to put logical boundaries in your
application.
 Every Angular application has at least one module— the root module,
conventionally named AppModule.
MODULES

12/01/2017 15
Example:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule ({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
MODULES

 Components are a logical piece of code for Angular JS application.
A component controls a patch of the page, called a view.
A Component consists of the following:
• Template − This is used to render the view for the application. This
contains the HTML that needs to be rendered in the application.
This part also includes the binding and directives.
• Class − This is like a class defined in any language such as C. This
contains properties and methods. This has the code which is used to
support the view. It is defined in TypeScript.
• Metadata − This has the extra data defined for the Angular class.
It is defined with a decorator.
12/01/2017 16
COMPONENTS

12/01/2017 17
1.Template
This is the view which needs to be rendered in the application.
Parameters
HTML Code − This is the HTML code which needs to be rendered in the
application.
Class properties − These are the properties of the class which can be referenced
in the template.
COMPONENTS
Syntax:
Template: ' <HTML code> class
properties '
Example(template):
<div>
<h1>{{appTitle}}</h1>
<div>SNIPE IT</div>
</div>

12/01/2017 18
2. Class
The class decorator. The class is defined in TypeScript. The class normally has the
following syntax in TypeScript.
Parameters
Classname − This is the name to be given to the class.
Propertyname − This is the name to be given to the property.
PropertyType − Since TypeScript is strongly typed, you need to give a type to the
property.
Value − This is the value to be given to the property.
COMPONENTS
Syntax
class classname { Propertyname:
PropertyType = Value }
Example
export class AppComponent {
appTitle: string = 'Welcome'; }

12/01/2017 19
3.Metadata
This is used to decorate Angular JS class with additional information.
Let’s take a look at the completed code with our class, template, and metadata.
COMPONENTS
Example:
import { Component } from
'@angular/core';
@Component ({
selector: 'my-app',
template: ` <div>
<h1>{{appTitle}}</h1>
<div>SNIPE IT</div>
</div> `
, }) export class AppComponent {
appTitle: string = 'Welcome';
}

12/01/2017 20
There are other ways to define a template and that can be done via the
templateURL command. The simplest way to use this in the component is as follows.
Parameters
• viewname − This is the name of the app component module.
After the viewname, the component needs to be added to the file name.
Following are the steps to define an inline template.
Step 1 − Create a file called app.component.html. This will contain the html code
for the view.
Step 2 − Add the following code in the above created file.
<div>{{appTitle}} SNIPE IT </div> This defines a simple div tag and references the
appTitle property from the app.component class.
TEMPLATES
Syntax
templateURL:
viewname.component.html
<div>{{appTitle}} SNIPE IT </div>

12/01/2017 21
Step 3 − In the app.component.ts file, add the following code.
Step 4 − Run the code in the browser, you will get the following output.
TEMPLATES
import { Component } from '@angular/core'; @Component
({ selector: 'my-app', templateUrl:
'app/app.component.html' }) export class AppComponent {
appTitle: string = 'Welcome'; }

@Component
({ selector: 'my-app',
templateUrl: 'app/app.component.html'
})
12/01/2017 22
Metadata is used to decorate a class so that it can configure the expected
behaviour of the class. Following are the different parts for metadata.
• Annotations − These are decorators at the class level. This is an array and an
example having both the @Component and @Routes decorator.
Following is a sample code, which is present in the app.component.ts file
METADATA

Following is an example code.
@Environment(‘test’) appTitle: string =
'Welcome'; }
12/01/2017 23
The component decorator is used to declare the class in the
app.component.ts file as a component.
• Design:paramtypes − These are only used for the constructors and applied only
to Typescript.
• propMetadata − This is the metadata which is applied to the properties of the
class.
Here, the @Environment is the metadata applied to the property appTitle and the
value given is ‘test’.
METADATA

constructor(@Environment(‘test’
private appTitle:string) { } }
12/01/2017 24
• Parameters − This is set by the decorators at the constructor level.
Following is an example code.
METADATA

12/01/2017 25
A service is used when a common functionality needs to be provided to
various modules. A service provides any value, function, or feature that your
application needs.
SERVICES
Module 1 Module 2 Module n
services

@Injectable()
export class classname {
}
12/01/2017 26
The following key steps need to be carried out when creating a service.
Step 1 − Create a separate class which has the injectable decorator. The
injectable decorator allows the functionality of this class to be injected and used
in any Angular JS module.
Step 2 − Next in your appComponent module or the module in which you want to
use the service, you need to define it as a provider in the @Component decorator.
SERVICES
@Component ({
providers : [classname]
})

import {
Injectable
} from '@angular/core';
@Injectable()
export class appService {
get App(): string {
return "Hello world"; } }
12/01/2017 27
Examples:
Step 1 − Create a ts file for the service called app.service.ts.
Step 2 −Place the following code in the file created above.
 The Injectable decorator is imported from the angular/core module.
 We are creating a class called appService that is decorated with the Injectable decorator.
 We are creating a simple function called getApp, which returns a simple string called �Hello
world�.
SERVICES

import {
Component } from '@angular/core';
import {
appService
} from './app.service';
@Component ({ selector: 'demo-app',
template: '<div>{{value}}</div>',
providers: [appService] })
export class AppComponent
{ value: string = "";
constructor(private _appService: appService) { }
ngOnInit(): void {
this.value = this._appService.getApp();
}
}
12/01/2017 28
Step 3 − In the app.component.ts file, place the following code.
SERVICES

12/01/2017 29
Routes
Routes enable navigation from one view to the next as users perform
application tasks. A route is equivalent to a mechanism used to control menus and
submenus.
Now that you understand the benefits of SPAs and have a grasp on Angular
concepts, it's time to get set up to work on the sample project.
ROUTES

1/9/2018 30
Directives list
• ngif
• ngFor
• ngIf
The ngif element is used to add elements to the HTML code if it
evaluates to true, else it will not add the elements to the HTML code.
Syntax
*ngIf = 'expression'
If the expression evaluates to true then the corresponding gets added,
else the elements are not added.
DIRECTIVES OF ANGULAR JS

1/9/2018 31
ngIf
Example:
Step 1 − First add a property to the class named appStatus. This will be
of type Boolean. Let’s keep this value as true.
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
})
appStatus: boolean = true;
}

1/9/2018 32
ngIf
Example:
Step 2 − Now in the app.component.html file, add the following code.
Once we add the above code, we will get the following output in the
browser.
Output:
<div *ngIf = 'appStatus'>{{appTitle}} Snipe Community </div>

1/9/2018 33
• ngFor
The ngFor element is used to elements based on the condition of the For
loop.
Syntax
*ngFor = 'let variable of variablelist'
The variable is a temporary variable to display the values in
the variablelist.
Let’s now take a look at an example of how we can use the *ngFor
directive.

1/9/2018 34
ngFor
Example:
Step 1 − First add a property to the class named appList. This will be of
the type which can be used to define any type of arrays.
import { Component } from '@angular/core'; @Component ({
selector: 'my-app',
})
appList: any[] = [ {
"ID": "1",
"Name" : "One"
},
{
"ID": "2",
"Name" : "Two"
}
];
}

1/9/2018 35
ngFor
Example:
Step 2 − In the app.component.html, define the following code.
Output:
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li> <li>
{{lst.Name}}</li>
</ul>
</div>

12/01/2017 36
First application:
 For creating angular js app, we require an editor like notepad/++ and a
latest browser.
 We can easily embed angular js code in html
 We must use the ng-app directive where we want to put Angular JS code
in HTML.
FIRST APPLICATION

• To complete the sample project, you need Node.js and Angular CLI (a
command-line interface for Angular) installed on your development PC:
• To install Node.js:
– Download the version for your system and choose the default options
to complete the installation.
– Run node -v from your OS command line to verify the version number —
in my case, v6.9.1.
• The Node Package Manager (NPM) is automatically installed along with
Node. Type npm -v to see its version number. NPM is used in the
background when you install packages from the public NPM repository. A
common NPM command is npm install, which is used to download the
package versions listed in your Angular project's package.json file.
12/01/2017 37
WHAT YOU'LL NEED

To install Angular CLI:
Run npm install -g angular-cli@1.0.0-beta.21 to install the version
(still in beta at the time of writing) that I used for the sample application.
(If you want to try a different build, visit the CLI site.) Installation takes
about 10 minutes to complete.
After successful installation, type ng -v at the OS command line to
see your CLI version number — in my case:
12/01/2017 38
WHAT YOU'LL NEED
angular-cli: 1.0.0-beta.21
node: 6.9.1
os: win32 x64

 The package.json file — a key metadata file in an Angular application —
contains the details of the application and its dependent packages.
 This file is the most important one in an Angular application, especially
when you move your code from one computer to another, and during
upgrades.
 The package.json file controls the version of the packages that need to
be installed.
12/01/2017 39
THE PACKAGE.JSON FILE

Here are some valid statements from a package.json file:
{ "dependencies" :
{ "foo" : "1.0.0 - 2.9999.9999"
, "bar" : ">=1.0.2 <2.1.2"
, "baz" : ">1.0.2 <=2.3.4"
, "boo" : "2.0.1"
, "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
, "til" : "^1.2"
, "elf" : "~1.2.3"
, "two" : "2.x"
, "thr" : "3.3.x"
, "lat" : "latest"
}
}
12/01/2017 40

Here are some valid statements from a package.json file:
{ "dependencies" :
{ "foo" : "1.0.0 - 2.9999.9999"
, "bar" : ">=1.0.2 <2.1.2"
, "baz" : ">1.0.2 <=2.3.4"
, "boo" : "2.0.1"
, "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
, "til" : "^1.2"
, "elf" : "~1.2.3"
, "two" : "2.x"
, "thr" : "3.3.x"
, "lat" : "latest"
}
}
12/01/2017 41

To create package.json file:
 hit npm init on command prompt
 Then it will ask some documentation fields like-
12/01/2017 42

The sample project consists of an out-of-the-box Angular application and a
custom application that you'll develop on top of the out-of-the-box
application. When you're finished, you'll have an Angular application
consisting of three mini applications with features that use three web
service APIs:
• Weather from Yahoo!
• Currency exchange
• Movie details
All of the application logic will run in your browser. The server is needed
only when the browser needs new data. In fact, you can shut down the
server process and still work in your application because it's a SPA.
12/01/2017 43
SAMPLE PROJECT OVERVIEW

This diagram shows the application topology:
12/01/2017 44
SAMPLE PROJECT OVERVIEW
AppModule AppComponent
Currency
app
Weather
app
menu
Movie
app
Services
internet

Start at your OS command line at a location where you want to put your
project directory.
• Creating an Angular project
• Generate a new Angular project by running the following command
(where dw_ng2_app is the project name):
12/01/2017 45
CREATING THE BASE APPLICATION AND MODULE
ng new dw_ng2_app --skip-git

After all the required packages and the Angular base application are
installed (which takes about 10 minutes), you're back at your OS command
prompt. If you then list the /dw_ng2_app directory, you can see the
project structure:
12/01/2017 46
|— e2e
|— node_modules
|— src
angular-cli.json
karma.conf.js
package.json
protractor.conf.js
README.md
tslint.json

The ../dw_ng2_app/src directory's contents are:
12/01/2017 47
|— app
|— assets
|— environments
favicon.ico
index.html
main.ts
polyfills.ts
styles.css
test.ts
tsconfig.json
typings.d.ts

And the ../dw_ng2_app/src/app directory (the root module folder) contains
the following files:
12/01/2017 48
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts

Running the out-of-the-box Angular application
• Change to the project directory and run ng serve to start the out-of-the
box Angular application.
• By default, the process starts in port number 4200. If the value of
your port system environment variable is other than 4200, the process
will start in that port number. Optionally, you can override the default
port number by running the ng serve --port 4200 command.
• Open your browser and enter the URL http://localhost:4200/. Your
Angular application displays app works! to indicate that the app is up,
running, and ready:
12/01/2017 49

Open your browser and enter the URL http://localhost:4200/. Your Angular
application displays app works! to indicate that the app is up, running, and
ready:
12/01/2017 50

If you make changes to the code while the application is running,
Angular is smart enough to monitor and restart the application
automatically. Try editing the app.component.ts file by changing the value
of the title. You can see that your browser page reflects the change:
12/01/2017 51

 In the initial we need node js and npm
 You can check the version by running the below commands.
 Create a directory for our project.
12/01/2017 52
ANGULAR APP
node -v
npm -v
mkdir snipe-community
cd snipe-community

 Now add these files into your working directory.
 PACKAGE.JSON
12/01/2017 53
ANGULAR APP
{
"name": "ciphertrick-spa-app",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently "npm run tsc:w"
"npm run lite" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",

 Continued…
 PACKAGE.JSON
12/01/2017 54
ANGULAR APP
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.2",
"typings":"^1.3.2"
}
}

 TSCONFIG.JSON
12/01/2017 55
ANGULAR APP
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "app/transpiled-js",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}

 TYPINGS.JSON
12/01/2017 56
ANGULAR APP
{
"globalDependencies": {
"core-js": "registry:dt/core-
js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0
+20160621224255",
"node": "registry:dt/node#6.0.0+2016
0909174046"
}
}

 SYSTEMS.CONFIG.JS
12/01/2017 57
ANGULAR APP
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.um
d.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.u
md.js',
'@angular/platform-browser': 'npm:@angular/platform-
browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-
browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js'
,
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},

Continued…
 SYSTEMS.CONFIG.JS
12/01/2017 58
ANGULAR APP
// packages tells the System loader how to load
when no filename and/or no extension
packages: {
app: {
main: './transpiled-js/main.js', //path to
main.js
defaultExtension: 'js'
},
rxjs: {
},
'angular2-in-memory-web-api': {
main: './index.js',
}
}
});
})(this);

 Once this is done then the next step is to install all the dependencies.
 Now that we are done with the dependencies and typescript setup, it’s time to start building our
app. Create a folder named as app. This is where we will pace all our Angular 2 app code.
12/01/2017 59
ANGULAR APP
npm install
mkdir app
cd app

 Creating our first Angular 2 Module
 n Angular 2 app comprises of a collection of modules and every app will have at least one module,
which would be the root module.
 Create a file named app.module.ts inside the app folder.
 APP/APP.MODULE.TS
@NgModule- decorator is used to define the metadata
for our module.
BrowserModule from @angular/platform-browser is the
most important module which is required by the app
that run in browser.
The declarations and bootstrap are empty, we will add
our components there once we create one.
12/01/2017 60
ANGULAR APP
import { NgModule } from '@angular/core'
;
import { BrowserModule } from '@angular/pla
tform-browser';
@NgModule({
imports: [ BrowserModule ], //other
modules the app depends on
declarations: [], // declare all derectives
and components
bootstrap : [] // root component to
bootstarp
})

 Creating our root component
 Every Angular 2 app must have a root component, let’s create one. Create a file
named app.component.ts and add the following code.
 app.component.ts
 Using the @Component decorator we are notifying
Angular to treat the AppComponent class as a component.
We have specified a selector and a templateUrl.
Components are nothing but Angular 2 directives with a template.
12/01/2017 61
ANGULAR APP
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app/app.component.html',
})
export class AppComponent { }

 Create a file named app.component.html and add the following code.
12/01/2017 62
ANGULAR APP
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-
collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a>Home</a></li>
<li><a>About</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">

</div>
</div>

 Now that our root component is ready, we have to add it to our app module.
 APP/APP.MODULE.TS
 We have first imported our AppComponent and added it to declarations and bootstrap.
12/01/2017 63
ANGULAR APP
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ], //other modules the app depends on
declarations: [ AppComponent ], // declare all derectives and
components
bootstrap : [ AppComponent ] // root component to bootstarp
})

 Bootstrapping our root Module
 One of the most important thing in an Angular 2 application is to bootstrap the root module. This
by convention is done in a file named main.ts.
 main.ts
12/01/2017 64
ANGULAR APP
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

 Adding index.html to load our app
 Now that we have the backbone of our Angular 2 app ready, all we need is a web-page to load our
app into the browser. Create a file named index.html just outside the app folder.
 index.html
 Here we are loading a few files including
our systems.config.js. We have also added
our root component selector app-root, this
is where our app will load. Also, we have
added a bit of application-wide styles in
styles.css.
12/01/2017 65
ANGULAR APP
<html>
<head>
<title>Snipe community Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">


<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>

<body>
<app-root>Loading...</app-root>
</body>

 Run Our Angular 2 Application
 To run the application hit the below command.
 If you have followed everything correctly, you should see a page with a navbar and two links
running on http://localhost:3000. Just like it’s shown in the below image.
12/01/2017 66
ANGULAR APP
npm start

app
app.component.css
app. component.html
app. component.spec.ts
app. component.ts
app.module.ts
assets
gitkeep
environments
environment.prod.ts
environment.ts
favicpon.ico
index.html
main.ts
polyfills.ts
styles.css
test.ts
tconfig.app.json
tscofig.spec.json
1/9/2018 67
FOLDER STRUCTURE

Advantages:
1. It gives the ability to make Single Page Application in a perfect and
viable way.
2. It gives information restricting ability to HTML. In this manner, it gives
client a rich and responsive experience.
3. AngularJS code is unit testable.
4. AngularJS utilizes reliance infusion and make utilization of partition of
concerns.
5. AngularJS gives reusable segments.
1/9/2018 68
ADVANTAGES

Angularjs2 presentation

Recommended

More Related Content

What's hot (20)

Similar to Angularjs2 presentation (20)

Recently uploaded (20)

Angularjs2 presentation