What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edureka

www.edureka.co/angular-js
Agenda
❖ Evolution of Web Development
❖ What is AngularJS ?
❖ Angular 2 and It’s Architecture
❖ Components of Angular 2
❖ Your First Angular 2 program

Challenges of Web Development

Evolution of Web Development
• Client-side scripting is executed on the client’s browser instead of the web-server
• It alleviates some of the burden on your web server when running a web application.
• It can be used for page navigation, data validation and formatting.
>Client-side
processing
Less Server
overhead
Request>
Response

• JQuery is a specific library of JavaScript code.
• It is a DOM manipulation library that makes it easier to use JavaScript on your website.
• jQuery wraps the complex code into simple methods whether it required to make AJAX calls or manipulate the DOM.
>

• JQuery has no real structure, the developer has full freedom to build projects as they see fit.
• But the lack of structure can lead to confusion on larger projects with no clear design direction or code maintainability.
For these situations, a framework like AngularJS can be a big help.

What is AngularJS ?

AngularJS Introduction
• AngularJS was developed in 2009 by Misko Hevery and Adam Abrons
at Brat Tech LLC.
• It is a open source JavaScript client-side framework maintained by
Google and a group of developers and enterprises

What is AngularJS?
• Client side JavaScript framework to develop a dynamic web application
• Help developers build SPAs in accordance with best practices for web development
• Data binding and dependency injection eliminate much of the code you would otherwise have to write
• Extends HTML attributes with Directives, and binds data to HTML with Expressions

AngularJS - Manipulating DOM
• Traditionally, the view modifies the DOM to present data and manipulates the DOM (or invokes jQuery) to add behaviour
• AngularJS puts all the DOM manipulation code into directives, thus easily separating that code out from the view and making it
available as standalone reusable units
View DOM
manipulation
View DOM
manipulation
Directives

Single Page Application

Single Page Application
A Single Page Application is a web application that requires only a single page load in a web browser.
• Your browser fully renders the DOM a single time.
• After this, background JavaScript performs any server
interactions and modifies the view as needed.
Navigation Bar
CoursesSide Bar
{ }
{ } { }

Angular 2.0

Angular 2
Mobile development
Desktop development is much easier when mobile
performance issues are handled first
Modularity
Much core functionality has moved to modules,
producing a lighter, faster core

Angular 2
Using TypeScript
Class-based Object Oriented Programming, Static
Typing, Generics, Lambdas
ECMAScript 6
Iterators, For/Of loops, Python-style
generators, Reflection

Architecture Angular 2.0

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

Main Building Blocks Of Angular 2
Components
Modules
Templates
Metadata
Services
Data Binding
Directives
Dependency Injection

Building Blocks - Components
Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8
• Encapsulates the template, data and the behaviour of a view
{ }
{ } { }
{ } { } { }
Root Component

Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8

Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8
Navigation Bar
Side Bar
{ }
{ }
Course1
Course3
Course4
Course2
{ }
{ }
{ }
{ }

Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8
Edureka
Nav bar
Course
Side BarCourses

Building Blocks - Modules
Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8
• A cohesive block of code dedicated to an application domain, a workflow, or a
closely related set of capabilities
• Every Angular app has at least one Angular module class, the root module
(AppModule)
• An Angular module, whether a root or feature, is a class with
an @NgModule decorator
Module:
Templates
< >
Directives
{ }
Components
{ }
Services
{ }

Building Blocks - Templates
Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8
Root
Component
{ }
Root
Template
< >
Child B
Component
{ }
Child B
Template
< >
Child A
Component
{ }
Child A
Template
< >
• You define a component's view with its companion template
• A template is a form of HTML that tells Angular how to render the component
• Although this template uses typical HTML elements but it also uses Angular's template syntax

Building Blocks - Metadata
Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8
• Metadata tells Angular how to process a class
• In TypeScript, you attach metadata by using a decorator
• The template, metadata, and component together describe a view
Components
{ }
Template
< >
Metadata

Building Blocks - Services
Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8
• Service is a plain class that encapsulates any non logic not related to view
• Examples include - logging service, data service, tax calculator etc.
• Service accomplishes tasks that fetch data from the server, validate user input, or log directly
to the console
{ }
Data Access
Logging
Business Logic
Configuration
COMPONENTS SERVICES {

Building Blocks – Data Binding
Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8
• Responsible for pushing data values into the HTML controls
and turning user responses into actions and value updates
• The three forms of binding:
• Interpolation
• Property binding
• Event binding
NOTE :
• In two-way binding, a data property value flows to the view from the
component as with property binding
• The user's changes also flow back to the component, resetting the property to
the latest value, as with event binding
Components
{ }
Template
< >
Property
Binding
Event
BindingMetadata

Building Blocks – Directives
Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency
Injection
8
• Modify DOM elements and modify their Behaviours
• Built-in directives helps in -
• Extend or control DOM
• Adding classes
• And much more …
• You can also write your own directives

Building Blocks – Dependency Injection
Templates
Metadata
Services
Data binding
Components1
3
4
5
6
Directives7
Modules2
Dependency Injection8
• A way to supply a new instance of a class with the fully-formed dependencies it requires
like services
• Provide new components with the services they need
• An injector can create a new service instance from a provider
Service
Instances
Class

Your First Angular 2 program

Put on your Angular Glass

Thank You …
Questions/Queries/Feedback

What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edureka

Recommended

More Related Content

What's hot (20)

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

More from Edureka! (20)

Recently uploaded (20)

What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edureka