SlideShare a Scribd company logo
www.edureka.co/angular-js
View AngularJS course details at www.edureka.co/angular-js
For Queries during the session and class recording:
Post on Twitter @edurekaIN: #askEdureka
Post on Facebook /edurekaIN
For more details please contact us:
US : 1800 275 9730 (toll free)
INDIA : +91 88808 62004
Email us : sales@edureka.co
Deep dive into angularJS JavaScript Framework
Slide 2 www.edureka.co/angular-js
Objectives
At the end of the session you will be able to learn:
Intorduction to AngularJS
AngularJS Features
Controller Inheritance
Nested Routes
Building widgets
Slide 3 www.edureka.co/angular-jsSlide
What is AngularJS?
Now its an OpenSource client side JavaScript framework
created by Google
It designed for web developers and designers, who
needs to have more control over their web Applications
 For a web developer, it means having a rich feature
that allows them to add more value to the client side of
the applications
 AngularJS accomplishes a lot by embracing HTML,
JavaScript and CSS
AngularJS was originally developed in 2009 by Misko
Hevery and Adam Abrons at Brat Tech LLC, firstly
named as GetAngular
Slide 4 www.edureka.co/angular-js
Features of AngularJS
Slide 5 www.edureka.co/angular-jsSlide
Static
DOM
Dynamic
DOM
DOM Content
Load Event
ng-app=“application name”
$injector
$compile $rootscope
$compile(dom, $rootscope)
Browser AngularJS
HTML
AngularJS: Architecture
Slide 6 www.edureka.co/angular-js
Controller Inheritance
Inherit parent controller property in child controller.
It's main uses are to enabling polymorphism and code re usability.
Keep the common methods in parent controller. So we should be able to access that method in all child controllers.
Sample :
Slide 7 www.edureka.co/angular-js
Controller Inheritance
DEMO
Slide 8 www.edureka.co/angular-js
Angular Routes
ng-router
» ngView directive that uses $route service to render the template into main layout.
» Every time the current route changes, the included view changes with it according to the configuration of the
$route service.
» The $routeParams service allows you to retrieve the current set of route parameters in controller, filters or
directives.
UI Router :
» AngularUI Router is a routing framework for AngularJS, which allows you to apply the view based on sates
instead of routes.
» States are bound to named, nested and parallel views, allowing you to powerfully manage your application's
interface.
Slide 9 www.edureka.co/angular-js
Angular Routes
DEMO
Slide 10 www.edureka.co/angular-js
Building AngularJS Widgets
Using AngularJS custom directive feature we can create our own reusable functionality
Custom directives let you to define the view and functionality of the element.
Directives can be four different types.
» Element
» Attribute
» Class
» Comment
Directives creates it's own scope (isolated scope). So we cannot access those scope variables from controller.
 We can pass controller scope variables and methods to directive.
Slide 11 www.edureka.co/angular-js
Building Angular Widgets
DEMO
Slide 12 www.edureka.co/angular-js
Course Topics
 Module 1
» Introduction to JavaScript MVC Framework
and AngularJS
 Module 2
» Dependency Injection and Controllers
 Module 3
» Route, Directive and Filters
 Module 4
» Creating Custom Directives and Filters
 Module 5
» Third-party AngularJS Modules and Testing
Angular
 Module 6
» AngularJS with Node.js, Yeoman and Rest
Exposure
 Module 7
» Project Discussion
Slide 13 www.edureka.co/angular-js
LIVE Online Class
Class Recording in LMS
24/7 Post Class Support
Module Wise Quiz
Project Work
Verifiable Certificate
Course Features
Slide 14 www.edureka.co/angular-js
Questions
Slide 15 www.edureka.co/angular-js

More Related Content

What's hot (20)

PDF
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Edureka!
 
PDF
Learn How to Animate your Android App
Edureka!
 
PDF
Using Android 5.0 Lollipop
Edureka!
 
PDF
AngularJS : Superheroic Javascript MVW Framework
Edureka!
 
PDF
Webinar: Microsoft .NET Framework : An IntelliSense Way of Web Development
Edureka!
 
PDF
iOS Development Using Swift 2
Edureka!
 
PDF
Android development 1july
Edureka!
 
PDF
Top 8 angular js framework for web development
MobMaxime
 
PDF
Introduction to Android Development
Edureka!
 
PPTX
Java/J2EE & SOA
Edureka!
 
PDF
Angularjs tutorial
HarikaReddy115
 
PDF
Design patterns 1july
Edureka!
 
PDF
Webinar: Microsoft SharePoint-The Ultimate Enterprise Collaboration Platform
Edureka!
 
PDF
Day In A Life Of A Node.js Developer
Edureka!
 
PPTX
Go live with angular 4
Indra Gunawan
 
PPTX
Front-End Web Development
Yash Sati
 
PDF
9 reasons why angular js web development should be your choice in 2020
Biztech Consulting & Solutions
 
PPT
SD Forum Java SIG - Service Oriented UI Architecture
Jeff Haynie
 
PDF
Design Patterns : Solution to Software Design Problems
Edureka!
 
PPTX
Angular 5,6,7
snehalkamble29
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Edureka!
 
Learn How to Animate your Android App
Edureka!
 
Using Android 5.0 Lollipop
Edureka!
 
AngularJS : Superheroic Javascript MVW Framework
Edureka!
 
Webinar: Microsoft .NET Framework : An IntelliSense Way of Web Development
Edureka!
 
iOS Development Using Swift 2
Edureka!
 
Android development 1july
Edureka!
 
Top 8 angular js framework for web development
MobMaxime
 
Introduction to Android Development
Edureka!
 
Java/J2EE & SOA
Edureka!
 
Angularjs tutorial
HarikaReddy115
 
Design patterns 1july
Edureka!
 
Webinar: Microsoft SharePoint-The Ultimate Enterprise Collaboration Platform
Edureka!
 
Day In A Life Of A Node.js Developer
Edureka!
 
Go live with angular 4
Indra Gunawan
 
Front-End Web Development
Yash Sati
 
9 reasons why angular js web development should be your choice in 2020
Biztech Consulting & Solutions
 
SD Forum Java SIG - Service Oriented UI Architecture
Jeff Haynie
 
Design Patterns : Solution to Software Design Problems
Edureka!
 
Angular 5,6,7
snehalkamble29
 

Viewers also liked (10)

PDF
29 Essential AngularJS Interview Questions
Arc & Codementor
 
PPTX
AngularJS - Part 1
Nishikant Taksande
 
PPTX
Angular JS deep dive
Axilis
 
PDF
Advantages of AngularJS over jQuery
Dipendra Shekhawat
 
PDF
AngularJS for Beginners
Edureka!
 
PDF
A Work Day Of A Web Developer
Edureka!
 
PPTX
Overview about AngularJS Framework
Camilo Lopes
 
PDF
Angular js
Knoldus Inc.
 
PPTX
Benefits of developing single page web applications using angular js
Harbinger Systems - HRTech Builder of Choice
 
PPTX
AngularJS Architecture
Eyal Vardi
 
29 Essential AngularJS Interview Questions
Arc & Codementor
 
AngularJS - Part 1
Nishikant Taksande
 
Angular JS deep dive
Axilis
 
Advantages of AngularJS over jQuery
Dipendra Shekhawat
 
AngularJS for Beginners
Edureka!
 
A Work Day Of A Web Developer
Edureka!
 
Overview about AngularJS Framework
Camilo Lopes
 
Angular js
Knoldus Inc.
 
Benefits of developing single page web applications using angular js
Harbinger Systems - HRTech Builder of Choice
 
AngularJS Architecture
Eyal Vardi
 
Ad

Similar to Deep Dive into AngularJS Javascript Framework (20)

PDF
Getting Started with AngularJS
Edureka!
 
PDF
An Implementation Tour to AngularJS
rahulmonikasharma
 
PPTX
Training On Angular Js
Mahima Radhakrishnan
 
PPTX
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
 
PDF
AngularJS Curriculum-Zeolearn
Hamdi Ceylan
 
PPTX
Angular js for Beginnners
Santosh Kumar Kar
 
DOCX
angularjs_tutorial.docx
telegramvip
 
PPTX
AngularJS One Day Workshop
Shyam Seshadri
 
PPT
Angular js
Hritesh Saha
 
PPTX
AgularJS basics- angular directives and controllers
jobinThomas54
 
PDF
AngularJS Workshop
Gianluca Cacace
 
PPTX
Angular js
Baldeep Sohal
 
PDF
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
Edureka!
 
PPTX
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
PPT
Angularjs for kolkata drupal meetup
Goutam Dey
 
PPSX
Angular js
Arun Somu Panneerselvam
 
PPTX
Basics of AngularJS
Filip Janevski
 
PDF
AngularJS Basics
Ravi Mone
 
PPTX
Angular js Classes in Pune
harshclassboat
 
PPTX
AngularJS Introduction (Talk given on Aug 5 2013)
Abhishek Anand
 
Getting Started with AngularJS
Edureka!
 
An Implementation Tour to AngularJS
rahulmonikasharma
 
Training On Angular Js
Mahima Radhakrishnan
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
 
AngularJS Curriculum-Zeolearn
Hamdi Ceylan
 
Angular js for Beginnners
Santosh Kumar Kar
 
angularjs_tutorial.docx
telegramvip
 
AngularJS One Day Workshop
Shyam Seshadri
 
Angular js
Hritesh Saha
 
AgularJS basics- angular directives and controllers
jobinThomas54
 
AngularJS Workshop
Gianluca Cacace
 
Angular js
Baldeep Sohal
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
Edureka!
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
Angularjs for kolkata drupal meetup
Goutam Dey
 
Basics of AngularJS
Filip Janevski
 
AngularJS Basics
Ravi Mone
 
Angular js Classes in Pune
harshclassboat
 
AngularJS Introduction (Talk given on Aug 5 2013)
Abhishek Anand
 
Ad

More from Edureka! (20)

PDF
What to learn during the 21 days Lockdown | Edureka
Edureka!
 
PDF
Top 10 Dying Programming Languages in 2020 | Edureka
Edureka!
 
PDF
Top 5 Trending Business Intelligence Tools | Edureka
Edureka!
 
PDF
Tableau Tutorial for Data Science | Edureka
Edureka!
 
PDF
Python Programming Tutorial | Edureka
Edureka!
 
PDF
Top 5 PMP Certifications | Edureka
Edureka!
 
PDF
Top Maven Interview Questions in 2020 | Edureka
Edureka!
 
PDF
Linux Mint Tutorial | Edureka
Edureka!
 
PDF
How to Deploy Java Web App in AWS| Edureka
Edureka!
 
PDF
Importance of Digital Marketing | Edureka
Edureka!
 
PDF
RPA in 2020 | Edureka
Edureka!
 
PDF
Email Notifications in Jenkins | Edureka
Edureka!
 
PDF
EA Algorithm in Machine Learning | Edureka
Edureka!
 
PDF
Cognitive AI Tutorial | Edureka
Edureka!
 
PDF
AWS Cloud Practitioner Tutorial | Edureka
Edureka!
 
PDF
Blue Prism Top Interview Questions | Edureka
Edureka!
 
PDF
Big Data on AWS Tutorial | Edureka
Edureka!
 
PDF
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
Edureka!
 
PDF
Kubernetes Installation on Ubuntu | Edureka
Edureka!
 
PDF
Introduction to DevOps | Edureka
Edureka!
 
What to learn during the 21 days Lockdown | Edureka
Edureka!
 
Top 10 Dying Programming Languages in 2020 | Edureka
Edureka!
 
Top 5 Trending Business Intelligence Tools | Edureka
Edureka!
 
Tableau Tutorial for Data Science | Edureka
Edureka!
 
Python Programming Tutorial | Edureka
Edureka!
 
Top 5 PMP Certifications | Edureka
Edureka!
 
Top Maven Interview Questions in 2020 | Edureka
Edureka!
 
Linux Mint Tutorial | Edureka
Edureka!
 
How to Deploy Java Web App in AWS| Edureka
Edureka!
 
Importance of Digital Marketing | Edureka
Edureka!
 
RPA in 2020 | Edureka
Edureka!
 
Email Notifications in Jenkins | Edureka
Edureka!
 
EA Algorithm in Machine Learning | Edureka
Edureka!
 
Cognitive AI Tutorial | Edureka
Edureka!
 
AWS Cloud Practitioner Tutorial | Edureka
Edureka!
 
Blue Prism Top Interview Questions | Edureka
Edureka!
 
Big Data on AWS Tutorial | Edureka
Edureka!
 
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
Edureka!
 
Kubernetes Installation on Ubuntu | Edureka
Edureka!
 
Introduction to DevOps | Edureka
Edureka!
 

Recently uploaded (20)

PDF
Empowering Cloud Providers with Apache CloudStack and Stackbill
ShapeBlue
 
PDF
Novus Safe Lite- What is Novus Safe Lite.pdf
Novus Hi-Tech
 
PDF
How Current Advanced Cyber Threats Transform Business Operation
Eryk Budi Pratama
 
PDF
2025-07-15 EMEA Volledig Inzicht Dutch Webinar
ThousandEyes
 
PPTX
Top Managed Service Providers in Los Angeles
Captain IT
 
PDF
TrustArc Webinar - Data Privacy Trends 2025: Mid-Year Insights & Program Stra...
TrustArc
 
PPTX
Simplifying End-to-End Apache CloudStack Deployment with a Web-Based Automati...
ShapeBlue
 
PPTX
python advanced data structure dictionary with examples python advanced data ...
sprasanna11
 
PDF
Arcee AI - building and working with small language models (06/25)
Julien SIMON
 
PDF
Rethinking Security Operations - Modern SOC.pdf
Haris Chughtai
 
PDF
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
PPTX
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
PDF
Trading Volume Explained by CIFDAQ- Secret Of Market Trends
CIFDAQ
 
PDF
TrustArc Webinar - Navigating Data Privacy in LATAM: Laws, Trends, and Compli...
TrustArc
 
PDF
NewMind AI Journal - Weekly Chronicles - July'25 Week II
NewMind AI
 
PDF
Integrating IIoT with SCADA in Oil & Gas A Technical Perspective.pdf
Rejig Digital
 
PDF
Productivity Management Software | Workstatus
Lovely Baghel
 
PDF
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
PDF
How a Code Plagiarism Checker Protects Originality in Programming
Code Quiry
 
PDF
Lecture A - AI Workflows for Banking.pdf
Dr. LAM Yat-fai (林日辉)
 
Empowering Cloud Providers with Apache CloudStack and Stackbill
ShapeBlue
 
Novus Safe Lite- What is Novus Safe Lite.pdf
Novus Hi-Tech
 
How Current Advanced Cyber Threats Transform Business Operation
Eryk Budi Pratama
 
2025-07-15 EMEA Volledig Inzicht Dutch Webinar
ThousandEyes
 
Top Managed Service Providers in Los Angeles
Captain IT
 
TrustArc Webinar - Data Privacy Trends 2025: Mid-Year Insights & Program Stra...
TrustArc
 
Simplifying End-to-End Apache CloudStack Deployment with a Web-Based Automati...
ShapeBlue
 
python advanced data structure dictionary with examples python advanced data ...
sprasanna11
 
Arcee AI - building and working with small language models (06/25)
Julien SIMON
 
Rethinking Security Operations - Modern SOC.pdf
Haris Chughtai
 
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
Trading Volume Explained by CIFDAQ- Secret Of Market Trends
CIFDAQ
 
TrustArc Webinar - Navigating Data Privacy in LATAM: Laws, Trends, and Compli...
TrustArc
 
NewMind AI Journal - Weekly Chronicles - July'25 Week II
NewMind AI
 
Integrating IIoT with SCADA in Oil & Gas A Technical Perspective.pdf
Rejig Digital
 
Productivity Management Software | Workstatus
Lovely Baghel
 
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
How a Code Plagiarism Checker Protects Originality in Programming
Code Quiry
 
Lecture A - AI Workflows for Banking.pdf
Dr. LAM Yat-fai (林日辉)
 

Deep Dive into AngularJS Javascript Framework

  • 1. www.edureka.co/angular-js View AngularJS course details at www.edureka.co/angular-js For Queries during the session and class recording: Post on Twitter @edurekaIN: #askEdureka Post on Facebook /edurekaIN For more details please contact us: US : 1800 275 9730 (toll free) INDIA : +91 88808 62004 Email us : [email protected] Deep dive into angularJS JavaScript Framework
  • 2. Slide 2 www.edureka.co/angular-js Objectives At the end of the session you will be able to learn: Intorduction to AngularJS AngularJS Features Controller Inheritance Nested Routes Building widgets
  • 3. Slide 3 www.edureka.co/angular-jsSlide What is AngularJS? Now its an OpenSource client side JavaScript framework created by Google It designed for web developers and designers, who needs to have more control over their web Applications  For a web developer, it means having a rich feature that allows them to add more value to the client side of the applications  AngularJS accomplishes a lot by embracing HTML, JavaScript and CSS AngularJS was originally developed in 2009 by Misko Hevery and Adam Abrons at Brat Tech LLC, firstly named as GetAngular
  • 5. Slide 5 www.edureka.co/angular-jsSlide Static DOM Dynamic DOM DOM Content Load Event ng-app=“application name” $injector $compile $rootscope $compile(dom, $rootscope) Browser AngularJS HTML AngularJS: Architecture
  • 6. Slide 6 www.edureka.co/angular-js Controller Inheritance Inherit parent controller property in child controller. It's main uses are to enabling polymorphism and code re usability. Keep the common methods in parent controller. So we should be able to access that method in all child controllers. Sample :
  • 8. Slide 8 www.edureka.co/angular-js Angular Routes ng-router » ngView directive that uses $route service to render the template into main layout. » Every time the current route changes, the included view changes with it according to the configuration of the $route service. » The $routeParams service allows you to retrieve the current set of route parameters in controller, filters or directives. UI Router : » AngularUI Router is a routing framework for AngularJS, which allows you to apply the view based on sates instead of routes. » States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.
  • 10. Slide 10 www.edureka.co/angular-js Building AngularJS Widgets Using AngularJS custom directive feature we can create our own reusable functionality Custom directives let you to define the view and functionality of the element. Directives can be four different types. » Element » Attribute » Class » Comment Directives creates it's own scope (isolated scope). So we cannot access those scope variables from controller.  We can pass controller scope variables and methods to directive.
  • 12. Slide 12 www.edureka.co/angular-js Course Topics  Module 1 » Introduction to JavaScript MVC Framework and AngularJS  Module 2 » Dependency Injection and Controllers  Module 3 » Route, Directive and Filters  Module 4 » Creating Custom Directives and Filters  Module 5 » Third-party AngularJS Modules and Testing Angular  Module 6 » AngularJS with Node.js, Yeoman and Rest Exposure  Module 7 » Project Discussion
  • 13. Slide 13 www.edureka.co/angular-js LIVE Online Class Class Recording in LMS 24/7 Post Class Support Module Wise Quiz Project Work Verifiable Certificate Course Features