SlideShare a Scribd company logo
LEARNING & DEVELOPMENT
Introduction to
AngularJS
Presented by: Shyjal Raazi
Agenda
● Need of framework in SPA
● What is angularJS
● Features of angular
● Angular concepts
● How an angular app starts
● Two way data binding
● Directives
● Controllers
● View - Controller interaction
● Modules
● Services
● Routing
Why a framework
Things to consider for developing SPA
DOM manipulation
- how to manipulate view effectively
History
- What happens when pressing back button
Routing
- Readable urls
Data binding
- How to bind data from model to view
View Loading
- how to load view in html
Hence use Frameworks
SPA framework in Javascript
Implements client side mvc pattern
No direct manipulation of DOM, less code, less complexity
Supported by major browsers
Large and fast growing open source community
Help developers write more meaningful html
Features
● Dependency injection
● Two way data binding
● Declarative html approach
● Reusable components
● Routing
● Module based
Angular Concepts
● Templates
● Directive
● Expressions
● Data binding
● Scope
● Controllers
● Modules
● Filters
● Services
● Routing
How angular app starts
Two way binding
https://gist.github.com/shyjal/878ade7231c9a2ceab27
Directives
Directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class)
Directives tell AngularJS's HTML compiler to attach a specified behavior to
that DOM element or even transform the DOM element and its children.
<body ng-app=”myapp”>
<ng-view></ng-view>
</body>
Controllers
Provides logic to your app
ng-controller directive specifies controller in html
Don't modify dom from controller. so how we communicate
with view?
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope',
function($scope) {
$scope.greeting = 'Hola!';
}]);
View - Controller interaction
$scope is an object that can be used to communicate
between view and controller
https://gist.github.com/shyjal/aa9a0e4b15029f7ea624
Modules
Re usable container for different features of an app or app itself
- controllers, services, filters, directives, etc.
Modules can be loaded in any order
No need of use require js like AMD’s as angular have
dependency injection mechanism
var myApp = angular.module('myApp',[ngRoute]);
Services
View-Independent business logic should not be in controller it should be in
service
Controllers are view specific but services are app specific
Demos
Angular tabs implementation :
https://gist.github.com/shyjal/bc40f48fbd8293caca6e
ng-repeat Example :
https://gist.github.com/shyjal/f0ab059d4df553991ea2
Routing
ngRoute (a module in angular package) / UI router ( Thirdparty )
Linking between pages, what should happen on back button, readable urls
Further
https://www.codeschool.com/courses/shaping-up-with-angular-js/
https://docs.angularjs.org/guide
https://www.airpair.com/angularjs/posts/angular-vs-react-the-tie-breaker
Ad

Recommended

AngularJS = Browser applications on steroids
AngularJS = Browser applications on steroids
Maurice De Beijer [MVP]
 
Itroducing Angular JS
Itroducing Angular JS
Carlos Emanuel Mathiasen
 
Intro to AngularJS
Intro to AngularJS
Sparkhound Inc.
 
Angular introduction basic
Angular introduction basic
jagriti srivastava
 
Angularjs PPT
Angularjs PPT
Amit Baghel
 
Angular js
Angular js
Mindtree
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Introduction to Angularjs : kishan kumar
Introduction to Angularjs : kishan kumar
Appfinz Technologies
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
Armin Vieweg
 
Introduction to AngularJS
Introduction to AngularJS
David Parsons
 
Angular js anupama
Angular js anupama
Anupama Prabhudesai
 
Angularjs overview
Angularjs overview
VickyCmd
 
Introduction to AngularJS Framework
Introduction to AngularJS Framework
Raveendra R
 
Overview about AngularJS Framework
Overview about AngularJS Framework
Camilo Lopes
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with Angular
Sparkhound Inc.
 
AngularJs (1.x) Presentation
AngularJs (1.x) Presentation
Raghubir Singh
 
AngularJS
AngularJS
Maurice De Beijer [MVP]
 
Responsive web design with Angularjs
Responsive web design with Angularjs
Arnab Pradhan
 
Component based architecture
Component based architecture
Zaiyang Li
 
Introduction to Android Programming
Introduction to Android Programming
Raveendra R
 
Angular js- 1.X
Angular js- 1.X
Nitin Giri
 
Angular patterns
Angular patterns
Premkumar M
 
Asp.net mvc
Asp.net mvc
Naga Harish M
 
Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
Max Klymyshyn
 
Silver Light By Nyros Developer
Silver Light By Nyros Developer
Nyros Technologies
 
What's new in Angular 2?
What's new in Angular 2?
Alfred Jett Grandeza
 
React js
React js
Alireza Akbari
 
Angular js 1.3 presentation for fed nov 2014
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
Intoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
 

More Related Content

What's hot (20)

Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
Armin Vieweg
 
Introduction to AngularJS
Introduction to AngularJS
David Parsons
 
Angular js anupama
Angular js anupama
Anupama Prabhudesai
 
Angularjs overview
Angularjs overview
VickyCmd
 
Introduction to AngularJS Framework
Introduction to AngularJS Framework
Raveendra R
 
Overview about AngularJS Framework
Overview about AngularJS Framework
Camilo Lopes
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with Angular
Sparkhound Inc.
 
AngularJs (1.x) Presentation
AngularJs (1.x) Presentation
Raghubir Singh
 
AngularJS
AngularJS
Maurice De Beijer [MVP]
 
Responsive web design with Angularjs
Responsive web design with Angularjs
Arnab Pradhan
 
Component based architecture
Component based architecture
Zaiyang Li
 
Introduction to Android Programming
Introduction to Android Programming
Raveendra R
 
Angular js- 1.X
Angular js- 1.X
Nitin Giri
 
Angular patterns
Angular patterns
Premkumar M
 
Asp.net mvc
Asp.net mvc
Naga Harish M
 
Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
Max Klymyshyn
 
Silver Light By Nyros Developer
Silver Light By Nyros Developer
Nyros Technologies
 
What's new in Angular 2?
What's new in Angular 2?
Alfred Jett Grandeza
 
React js
React js
Alireza Akbari
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
Armin Vieweg
 
Introduction to AngularJS
Introduction to AngularJS
David Parsons
 
Angularjs overview
Angularjs overview
VickyCmd
 
Introduction to AngularJS Framework
Introduction to AngularJS Framework
Raveendra R
 
Overview about AngularJS Framework
Overview about AngularJS Framework
Camilo Lopes
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with Angular
Sparkhound Inc.
 
AngularJs (1.x) Presentation
AngularJs (1.x) Presentation
Raghubir Singh
 
Responsive web design with Angularjs
Responsive web design with Angularjs
Arnab Pradhan
 
Component based architecture
Component based architecture
Zaiyang Li
 
Introduction to Android Programming
Introduction to Android Programming
Raveendra R
 
Angular js- 1.X
Angular js- 1.X
Nitin Giri
 
Angular patterns
Angular patterns
Premkumar M
 
Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
Max Klymyshyn
 
Silver Light By Nyros Developer
Silver Light By Nyros Developer
Nyros Technologies
 

Similar to Introduction to AngularJS (20)

Angular js 1.3 presentation for fed nov 2014
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
Intoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
 
Introduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
Stéphane Bégaudeau
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
 
Introduction to Angular Js
Introduction to Angular Js
Professional Guru
 
Overview of the AngularJS framework
Overview of the AngularJS framework
Yakov Fain
 
Angularjs basic part01
Angularjs basic part01
Mohd Abdul Baquee
 
AngularJS
AngularJS
Srivatsan Krishnamachari
 
AngularJS is awesome
AngularJS is awesome
Eusebiu Schipor
 
AngularJS By Vipin
AngularJS By Vipin
Vipin Mundayad
 
Angular js interview question answer for fresher
Angular js interview question answer for fresher
Ravi Bhadauria
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
EPAM Systems
 
Training On Angular Js
Training On Angular Js
Mahima Radhakrishnan
 
Angular JS Indtrodution
Angular JS Indtrodution
adesh21
 
Angular js
Angular js
vu van quyet
 
Dive into Angular, part 1: Introduction
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
Angular workshop - Full Development Guide
Angular workshop - Full Development Guide
Nitin Giri
 
Angular presentation
Angular presentation
merlihan
 
Angular js 1.3 presentation for fed nov 2014
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
Intoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
Stéphane Bégaudeau
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
 
Overview of the AngularJS framework
Overview of the AngularJS framework
Yakov Fain
 
Angular js interview question answer for fresher
Angular js interview question answer for fresher
Ravi Bhadauria
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
EPAM Systems
 
Angular JS Indtrodution
Angular JS Indtrodution
adesh21
 
Dive into Angular, part 1: Introduction
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
Angular workshop - Full Development Guide
Angular workshop - Full Development Guide
Nitin Giri
 
Angular presentation
Angular presentation
merlihan
 
Ad

Recently uploaded (20)

Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
The Growing Value and Application of FME & GenAI
The Growing Value and Application of FME & GenAI
Safe Software
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
Mastering AI Workflows with FME by Mark Döring
Mastering AI Workflows with FME by Mark Döring
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdf
Priyanka Aash
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
The Growing Value and Application of FME & GenAI
The Growing Value and Application of FME & GenAI
Safe Software
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
Mastering AI Workflows with FME by Mark Döring
Mastering AI Workflows with FME by Mark Döring
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
pcprocore
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
Ad

Introduction to AngularJS

Editor's Notes

  • #4: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #5: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #6: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #7: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #8: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #9: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #10: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #11: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #12: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #13: Test is available in word document under 'Attention to Detail' notes. This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.
  • #14: Test is available in word document under 'Attention to Detail' notes. This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.
  • #15: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
  • #16: Test is available in word document under 'Attention to Detail' notes. This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.
  • #17: This  presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.   The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.