Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka

www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Webpage

Agenda
❖ Webpage and DOM
❖ DOM Manipulation
❖ JavaScript and jQuery
❖ Why Angular?
❖ What is SPA?
❖ Angular Introduction
❖ Angular Features
❖ Angular Installation
❖ Basic Building Blocks of Angular
❖ Angular Architecture

Webpage and DOM

Webpage and DOM
DOM Tree of the HTML document
html
head
title
HTML Markup
<html>
<head>
<title> Angular 2 Tutorial </title>
</head>
<body>
<h1> Welcome to Angular 2 Tutorial </h1>
<p>Angular is a development platform for creating
a applications using modern web standards.</p>
</body>
</html>
body
h1 p

DOM Manipulation

JavaScript

JavaScript & jQuery
➢ JavaScript is a programming language
designed for use in a web browser.
➢ Used for manipulating DOM
➢ Example:
Document.body.style.background = red;
➢ jQuery is a library built in JavaScript to
automate and simplify common tasks.
➢ Used for manipulating DOM
➢ Example:
$ (‘body’) .css (‘background’, ‘#ccc’);

Why Angular?

Why Angular?
2 Way Data Binding

What is a
Single Page Application?

EDUREKA ANGULAR 2 CERTIFICATION TRAINING www.edureka.co/angular-js
A Single Page Application is a web application that requires only a single page load in a web browser.
➢ Whole page is not reloaded every time
➢ Your browser fully renders the DOM once
➢ Later any server interactions is performed by
JavaScript which modifies the view
mail inbox
mail categories
What is SPA?
4

Traditional Way Vs Single Page Application
Traditional Way
Life Cycle
Single Page Application
Life Cycle
Client Server
Initial request
form POST
initial request
AJAX
{ … }
JSON
Client Server

Angular Introduction

Angular Introduction
OpenSource Client Side
JavaScript framework created
by Google
Angular Framework
by Google
Useful for building complex
applications in the browser
(and beyond).
Angular accomplishes a lot
by embracing HTML,
JavaScript & CSS
Introduction of Object
Oriented Web Development
using TypeSCript

Angular Features

Angular Features
S P E E D A N D
P E R F O R M A N C E
E S 6 A N D T Y P E S C R I P T
S U P P O RT
M O D U L A R
S U P P O RT S M O B I L E ,
TA B L E T S , E TC .
01
02
03
04

Angular Installation

Building Blocks of Angular
Module Component Metadata Template Data Binding
Services Directives

Module is a class with
@NgModule metadata
Encapsulation of different
similar functionalities
Every Angular app has at
least one root module
Directives
Pipes
Components
Single Module
export
Similar
Functionalities
Module
Component
Metadata
Template
Data Binding
Services
Directives

Importing Modules
Decorator
Declaring all the components
Provide Services to all
module’s component
Module
Component
Metadata
Template
Data Binding
Services
Directives

Module
Component
Metadata
Template
Data Binding
Services
Directives
Nav Bar
News Feed

Module
Component
Metadata
Template
Data Binding
Services
Directives
Sports
Component

Importing Component Decorator
Decorator
Meta Data
Exporting Component Class
Module
Component
Metadata
Template
Data Binding
Services
Directives

Metadata describes how
to process the class
Decorator is used to
attach metadata
@Component({
……
})
Component
{ }
MyClass Decorator
@NgModule({
……
})
Module
{ }
AppClass Decorator
Example:
Module
Component
Metadata
Template
Data Binding
Services
Directives

Decorator that specifies how
to process an Angular Class
Creates an instance of the component
HTML template for the component
CSS Styling
Provides Service for the Component
Module
Component
Metadata
Template
Data Binding
Services
Directives

Used to define view of a
component
Describes how the
component is rendered
on the page.
Looks like HTML, except
for a few differences.
Root
Component
{ }
Root
Template
< >
Child A
Component
{ }
Child A
Template
< >
Child B
Component
{ }
Child B
Template
< >
Child A
Component
{ }
Child A
Template
< >
Module
Component
Metadata
Template
Data Binding
Services
Directives

Module
Component
Metadata
Template
Data Binding
Services
Directives
COMPONENTDOM
[property] = “value”
01
02
03
04
I N T E R P O L AT I O N
P R O P E R T Y B I N D I N G
E V E N T B I N D I N G
2 WAY D ATA B I N D I N G
COMPONENTDOM
(event) = “event handler”
COMPONENTDOM
[( ngModel )]
COMPONENTDOM
{{ value }}
T Y P E S O F D A T A B I N D I N G
Data binding plays an important role in communication between
a template and its component

Data binding plays an important role in communication
between a template and its component.
Module
Component
Metadata
Template
Data Binding
Services
Directives

Data binding is also important for communication between
parent and child components.
Parent Component
{ }
Event Binding
Property BindingModule
Component
Metadata
Template
Data Binding
Services
Directives

{ }
Data Access
Logging
Business Logic
Configuration
Components
SERVICES
Service is a broad category encompassing any value, function, or feature that
your application needs.
logging service data service message bus tax calculator
Example:
{ }Directives
Services
Module
Component
Metadata
Template
Data Binding
Services
Directives

Module
Component
Metadata
Template
Data Binding
Services
Directives
Service Class
Service Method for
retrieving data

Creates a new instance of
class along with its
required dependencies
Used to provide services
to a component
Service 2
{ }
Service 2
{ }
Component
Service 1
{ }
Service 3
{ }
Module
Component
Metadata
Template
Data Binding
Services
Directives
Dependency Injection

Module
Component
Metadata
Template
Data Binding
Services
Directives
Injecting Service into the Component
Retrieving data
Importing Service Class

Changes the appearance or behavior of a DOM elementModule
Component
Metadata
Template
Data Binding
Services
Directives
AT T R I B U T E D I R E C T I V E
S T R U C T U R A L D I R E C T I V E
C O M P O N E N T S1
2
3
Directives with a template
Adds & removes DOM elements
to change DOM layout
Changes the appearance or
behavior of an element

Module
Component
Metadata
Template
Data Binding
Services
Directives
S T R U C T U R A L D I R E C T I V E2
Adds & removes DOM elements
to change DOM layout
Iterating over
the movies list

Module
Component
Metadata
Template
Data Binding
Services
Directives
AT T R I B U T E D I R E C T I V E3
Changes the appearance or
behavior of an element
Importing Directive, ElementRef
& HostListener
Directive Metadata
Injecting ElementRef to
access the DOM elements
Bold the text on cursor hover
Un-bold the text

Angular Architecture

Angular Architecture
Template
< >
Directives
{ }
Components
Module
Components
{ }
Module
Service
{ }
Module
Fn
ƛ
Module
Value
3.14
Metadata
Property
Binding
Event
Binding
Injectors
Services
Metadata

EDUREKA ANGULAR 2 CERTIFICATION TRAINING www.edureka.co/angular-js
Thank You …
Questions/Queries/Feedback

Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka

Similar to Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka (20)

More from Edureka!

More from Edureka! (20)

Recently uploaded

Recently uploaded (20)

Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka