This is the first tutorial in this Angular for beginners series by Edureka. It will introduce you to angular and it's features along with the entire road map of this free Angular 4 Tutorial course.

1. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Edureka
Free Angular Course For Beginner

2. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Edureka
Free Angular Course For Beginner

3. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular Tutorial - Road Map
Angular
Introduction
Angular Install &
Project Structure
Angular
Components
Angular
Data Binding
Angular
Directives
Angular &
angularFirebase
Angular
CRUD App
Angular
Services
Angular
Forms
Angular
Routing
1
10 9 8 7 6
1 2 3 4 5
678910

4. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Edureka’s
Angular Certification Training

5. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Edureka Angular Certification Training
Introduction to JavaScript MVC Framework & Angular
Components and DOM Interactions
Components and Dependency Injection
Routes, Inbuilt Directives and Pipes
Custom Directives and Pipes
Third-party Library Integration, Other APIs
Unit Testing and Angular-CLI
1
2
3
4
5
6
7
www.edureka.co/angular-training

6. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What is Angular?

7. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What is Angular?
Angular is a JavaScript
framework that allows you to
create modern Single Page
Application.

8. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Traditional
vs
Single Page Application

9. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Traditional Web Application
Traditional Web App Life Cycle
Client Server
Initial request
Click Button
❖ With a traditional website, content is
organized on individual pages that are
usually static.
❖ Don't change in response to a visitor's
actions.
❖ A brand new page with its own static
content is served when a visitor
clicks a button.

10. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Single Page Application
Single Page Web App Life Cycle
Client Server
Initial request
Click button
❖ Instead of serving a brand new page
to visitors, SPA swaps out the
old content for new in case of any user
interaction
❖ SPA is faster, more responsive, and
more compact.
❖ The SPA and all its content is only
loaded once, when the visitor first
views the site.
{ … }
JSON

11. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Are Angular 2, Angular 4 &
AngularJS same?

12. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Are Angular 2, Angular 4 & AngularJS same?
Angular 2/4/5AngularJS Angular
➢ Released by Google in the year 2010
➢ JavaScript based framework for creating SPA
➢ Officially supported but no longer will be
developed
➢ Released in Sept’ 2016
➢ Complete re-write of AngularJS
➢ Started from Version 2
➢ Major version will be released every six months
because of Semantic Versioning

13. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular Features

14. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular Features
M O D U L A R I T Y
❖ Module encapsulate similar cohesive block
of functionality together
❖ Adding new features without changing the
overall code base
❖ Easy to maintain and test
❖ For example: admin module, home page
module, etc.
Home Page Admin Module
Signup Page

15. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular Features
S P E E D & P E R F O R M A N C E
❖ Angular turns your templates into code
that's highly optimized for today's
JavaScript virtual machines.
❖ Angular Component Router, which split
the code allowing users to load only
relevant code required for rendering
the requested view/route.

16. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular Features
T Y P E S C R I P T & E S 6
❖ TypeScript is a superset of JavaScript
❖ Static types make things like IDEs and
builders/compilers more effective
❖ TypeScript is apt for developers who
are coming from Java and C#
❖ ES6 modules help you to decouple your
code easily

17. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular Features
N AT I V E A P P D E V E L O P M E N T
❖ Create native mobile web application
using the same angular knowledge
❖ Build hybrid apps with the help of
Iconic support and native app using
NativeScript or React Native.

18. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Thank You