This Edureka "Angular 4 Tutorial" will help you to learn about different Angular components and their features. Angular is a framework to develop highly scalable, fast, and testable web client-side applications. Below are the topics covered in this tutorial:
1) Webpage Development
2) DOM Manipulation
3) Traditional WebApp Vs SPA
4) Angular Introduction
5) Angular Features
6) Angular Installation
7) Building Blocks of Angular
8) Angular Architecture
Here is a structured training on Angular, check out the details: https://goo.gl/5rQOdw
Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/kgMONz
2. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
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
4. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
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
8. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
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’);
12. 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
13. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
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
15. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
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
17. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
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
20. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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
21. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Importing Modules
Decorator
Declaring all the components
Provide Services to all
module’s component
Module
Component
Metadata
Template
Data Binding
Services
Directives
24. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Importing Component Decorator
Decorator
Meta Data
Exporting Component Class
Module
Component
Metadata
Template
Data Binding
Services
Directives
25. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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
26. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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
27. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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
28. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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
29. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Data binding plays an important role in communication
between a template and its component.
Module
Component
Metadata
Template
Data Binding
Services
Directives
30. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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
31. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
{ }
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
33. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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
34. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
Module
Component
Metadata
Template
Data Binding
Services
Directives
Injecting Service into the Component
Retrieving data
Importing Service Class
35. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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
36. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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
37. www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Building Blocks of Angular
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