Angular 2 Training | Angular 2 Tutorial For Beginners | Angular Certification | Edureka

www.edureka.co/angular-jsEDUREKA ANGULAR 2 CERTIFICATION TRAINING

Agenda
❖ Companies Using Angular
❖ Angular 2 Job Trends
❖ A Demo Web Application
❖ Building Blocks of Angular App
❖ Components
❖ Directives
❖ Services
❖ Router

Big Companies Using Angular JS

Companies Using Angular JS
Netflix decided to use Angular in
its tool for analyzing and
monitoring security of Amazon
Web Services.

As of Sept’ 15, the website holds
the third place by number of
visitors among all online
newspapers and magazines
available online in UK
User interface of website is made
as an AngularJS app written
according to ES 2015.

YouTube is available consoles
produced by Sony and PS3
app was written using
Angular JS framework
Youtube’s estimated worth is $70
billion. Service has one
billion users i.e. one third of
people using Internet worldwide.

Weather.com gives you one of
the most precise weather
forecasting reports and is uses
Angular JS

PayPal company owns online
payments system available in 203
countries
PayPal is another example of large
websites using AngularJS.

Freelancer is one other example
of large websites that uses
AngularJS.
Freelancer is world famous
marketplace for outsourcing with
around 15.7 million registered
freelancers

Angular 2 Job Trends

Angular 2 Job Trend

Sample Web Application

Top 250 Movies To Watch

Building Blocks of Angular 2

Building Blocks
Components ServicesDirectives Router
A component
controls a patch of
screen called a view.
Service encompasses any value,
function, or feature required
(not related to view)
DOM gets manipulated as
per the instructions given
by directives.
Routers is for navigating
among different
components

Components

www.edureka.co/angular-jsEDUREKA ANGULARJS CERTIFICATION TRAINING
Components
In Angular Web Apps, all the view
functionalities are implemented as separate
components

Building Blocks
Navbar Component
About Component
Movies Component
Home Component
Home Page View of
the App
It contains the About
section
It shows the list of top 250
movies
Responsible for
navigation among
components

Component
Movie Details Component
Displays details of
the selected movie
Movies Component
(List of Movies)

A Closer Look at Component

Movies Component
Generates component tag, used for
loading component across other
components
Component Class
Decorator: Specifies
component meta data
Paths to HTML and CSS
Style Doc

Directives

Directives
Changes the appearance or behavior of a DOM element
Adds & removes DOM elements to
change DOM layout
Changes the appearance or behavior of an
element
Directives with a templateComponents
Structural Directives
Attributes Directive
1
2
3

A Closer Look at Structural Directives

Directive
*ngFor: Structural Directive
Iterates over elements of a movies list
which is then displayed

A Closer Look at Attributes Directives

Directive
*appBoldText: Attributes Directive
Makes the text to be bold if user points a
movie in the list

Services

Services
{ }
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

Closer Look at Services

Services
Service to fetch list of
movies from database
Service to fetch details of
a selected movie from
database
Decorator

Dependency Injection

Creates a new instance of class
along with its required
dependencies
Used to provide services to a
components as per their needs
Service 2
{ }
Service 2
{ }
Component
Service 1
{ }
Service 3
{ }
The process of providing a
service to component is called

Dependency Injection Example

Injecting Services
Dependency Injection:
Injecting Service into components

Router

Router
A router allows us to navigate across components in a Web App
Navbar Component
About Component
Movies Component
Home Component
Home Page View of
the App
It contains the About
section
It shows the list of top 250
movies
Responsible for
navigation among
components

A Closer Look at Router

Router
Path Declaration for different
components
Passing Declared Paths Array to
RouterModule

routerLink
Navigation from Movies List Component to Move
Details Component
MoviesComponent MoviesDetailsComponent
[ routerLink ] = “ [ ‘ < path >’ ] ”

<router-outlet>
Allows to navigate to a Component
by pasting its path in Browser Address Bar

<router-outlet>
Home Page Movies List
Add ‘/movies’ to Browser Address Bar

Final Demo

Thank You …
Questions/Queries/Feedback

Angular 2 Training | Angular 2 Tutorial For Beginners | Angular Certification | Edureka

Recommended

More Related Content

What's hot (20)

Similar to Angular 2 Training | Angular 2 Tutorial For Beginners | Angular Certification | Edureka (20)

More from Edureka! (20)

Recently uploaded (20)

Angular 2 Training | Angular 2 Tutorial For Beginners | Angular Certification | Edureka