SlideShare a Scribd company logo
LEVELING UP
LEVELING UP
Bring AngularJS beginners up to speed and level up everyone’s skills so
we can understand core concepts and develop complex web
applications for our clients more effectively.
OBJECTIVE
LEVELING UP
HTML is great for declaring static documents, but it falters when we try
to use it for declaring dynamic views in web-applications. AngularJS
lets you extend HTML vocabulary for your application. The resulting
environment is extraordinarily expressive, readable, and quick to
develop.
WHY USE ANGULAR?
LEVELING UP
WHY USE ANGULAR?
MV* Pattern
Modular code
Future proof your code
Develop faster
Two-way data binding/Scope
Directives
Filters
Dependency injection
Services
Routes
Simple API Consumption
It’s Awesome!
LEVELING UP
ANGULAR IS AN MV* FRAMEWORK
Model
View Controller
Model-View-Controller is an architectural design pattern
that encourages improved application organization through
a separation of concerns. It enforces the isolation of
business data (Models) from user interfaces (Views), with a
third component (Controllers) traditionally present to
manage logic, user-input and the coordination of models
and views.
LEVELING UP
Scope is an object that refers to the application model. It is an
execution context for expressions. Scopes are arranged in hierarchical
structure which mimic the DOM structure of the application. Scopes
can watch expressions and propagate events.
SCOPE
LEVELING UP
Data-binding in Angular apps is the automatic synchronization of data
between the model and view components. The way that Angular
implements data-binding lets you treat the model as the single-source-
of-truth in your application. The view is a projection of the model at all
times. When the model changes, the view reflects the change, and vice
versa.
TWO-WAY DATA BINDING
LEVELING UP
At a high level, directives are markers on a DOM element (such as an
attribute, element name, comment or CSS class) that tell AngularJS's
HTML compiler ($compile) to attach a specified behavior to that DOM
element or even transform the DOM element and its children.
DIRECTIVES
<slide duration=“500” color=“blue” src=“img/slide-01.jpg” link=“http://google.com/” />
LEVELING UPDIRECTIVES
<slides>
<slide ng-repeat=“slide in slides”
duration=“{{slide.duration}}”
color=“{{slide.color}}”
src=“{{slide.img}}”
link=“{{slide.link}}” />
</slides>
$scope.slides = [
{
img: ‘img/slide01.jpg’,
color: ‘red’,
link: ‘google.com’,
duration: ‘2000’
},
{
img: ‘img/slide02.jpg’,
color: ‘blue’,
link: ‘apple.com’,
duration: ‘3000’
},
{
img: ‘img/slide03.jpg’,
color: ‘purple’,
link: ‘theverge.com’,
duration: ‘2500’
},
{
img: ‘img/slide04.jpg’,
color: ‘green’,
link: ‘techcrunch.com’,
duration: ‘1500’
}
]
<ul class=“slider”>
<li class=“slide” style=“background-
color:red” data-duration=“2000”>
<a href=“google.com”>
<img src=“img/slide01.jpg” />
</a>
</li>
<li class=“slide” style=“background-
color:blue” data-duration=“3000”>
<a href=“apple.com”>
<img src=“img/slide02.jpg” />
</a>
</li>
<li class=“slide” style=“background-
color:purple” data-duration=“2500”>
<a href=“theverge.com”>
<img src=“img/slide03.jpg” />
</a>
</li>
<li class=“slide” style=“background-
color:green” data-duration=“1500”>
<a href=“techcrunch.com”>
<img src=“img/slide04.jpg” />
</a>
</li>
</ul>
LEVELING UP
A filter formats the value of an expression for display to the user. They
can be used in view templates, controllers or services and it is easy to
define your own filter.
FILTERS
{{ expression | filter }}
LEVELING UP
Dependency Injection is a software design pattern that deals with how
components get hold of their dependencies. The Angular injector
subsystem is in charge of creating components, resolving their
dependencies, and providing them to other components as requested.
DEPENDENCY INJECTION
app.controller('DynamicFormCtrl', ['$scope', '$http', '$modal', '$filter',
function($scope, $http, $modal, $filter) { ... }]);
LEVELING UP
Angular services are substitutable objects that are wired together using
dependency injection. You can use services to organize and share code
across your app.
SERVICES
LEVELING UP
THREE TYPES OF SERVICES
Factories
Syntax:
module.factory('factoryName',
function);
Result:
When declaring factoryName as an
injectable argument you will be
provided with the value that is returned
by invoking the function reference
passed to module.factory.
Services
Syntax:
module.service('serviceName',
function);
Result:
When declaring serviceName as an
injectable argument you will be
provided with an instance of the
function. In other words new
FunctionYouPassedToService().
Providers
Syntax:
module.provider('providerName',
function);
Result:
When declaring providerName as an
injectable argument you will be
provided with ProviderFunction().$get().
The constructor function is instantiated
before the $get method is called -
ProviderFunction is the function
reference passed to module.provider.
LEVELING UP
Routes enable you to create different URLs for different content in your
application. Having different URLs for different content enables the user
to bookmark URLs to specific content, and send those URLs to friends
etc. In AngularJS each such bookmarkable URL is called a route.
ROUTES
LEVELING UP

More Related Content

ODP
Angular2
kunalkumar376
 
PPTX
Angular JS training institute in Jaipur
HEMANT SAXENA
 
PPTX
Stephen Kennedy Silverlight 3 Deep Dive
MicrosoftFeed
 
PDF
Modern webtechnologies
Besjan Xhika
 
PPTX
AngularJS = Browser applications on steroids
Maurice De Beijer [MVP]
 
PPTX
Angular js
ParmarAnisha
 
PPTX
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
PPTX
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
Angular2
kunalkumar376
 
Angular JS training institute in Jaipur
HEMANT SAXENA
 
Stephen Kennedy Silverlight 3 Deep Dive
MicrosoftFeed
 
Modern webtechnologies
Besjan Xhika
 
AngularJS = Browser applications on steroids
Maurice De Beijer [MVP]
 
Angular js
ParmarAnisha
 
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 

What's hot (20)

PPTX
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
PPTX
Angular js 1.3 basic tutorial
Al-Mutaz Bellah Salahat
 
PPTX
Angular crash course
Birhan Nega
 
PPTX
Introduction to AngularJS
David Parsons
 
PPTX
Introduction to single page application with angular js
Mindfire Solutions
 
DOCX
Single Page Application
Prasad Narasimhan
 
PPT
introduction to Angularjs basics
Ravindra K
 
PPTX
Angular js presentation at Datacom
David Xi Peng Yang
 
PPTX
Angular introduction basic
jagriti srivastava
 
PPTX
angularJS Practicle Explanation
Abhishek Sahu
 
PDF
Introduction to Angular Js
Professional Guru
 
PPT
Examples of My Work and Creativity
leewpederson
 
PPT
MVC Architecture
Prasanna Venkatesh
 
PPTX
AngularJS Overview
GDG Ciudad del Este
 
PDF
Itroducing Angular JS
Carlos Emanuel Mathiasen
 
PDF
AngularJS
Hiten Pratap Singh
 
PPT
Why MVC?
Wayne Tun Myint
 
PPTX
Getting Started with Angular JS
Akshay Mathur
 
PPTX
MVC Training Part 1
Lee Englestone
 
Kalp Corporate Angular Js Tutorials
Kalp Corporate
 
Angular js 1.3 basic tutorial
Al-Mutaz Bellah Salahat
 
Angular crash course
Birhan Nega
 
Introduction to AngularJS
David Parsons
 
Introduction to single page application with angular js
Mindfire Solutions
 
Single Page Application
Prasad Narasimhan
 
introduction to Angularjs basics
Ravindra K
 
Angular js presentation at Datacom
David Xi Peng Yang
 
Angular introduction basic
jagriti srivastava
 
angularJS Practicle Explanation
Abhishek Sahu
 
Introduction to Angular Js
Professional Guru
 
Examples of My Work and Creativity
leewpederson
 
MVC Architecture
Prasanna Venkatesh
 
AngularJS Overview
GDG Ciudad del Este
 
Itroducing Angular JS
Carlos Emanuel Mathiasen
 
Why MVC?
Wayne Tun Myint
 
Getting Started with Angular JS
Akshay Mathur
 
MVC Training Part 1
Lee Englestone
 
Ad

Viewers also liked (20)

PPTX
Laura aguirre
Nataly0101
 
PPTX
Put the whiteboard in your database
Jørgen Braseth
 
PDF
KDK Events
peffler
 
PPT
Paul M Lawless
Perry Benton
 
PPTX
Crown Packaging Customer Interface
kirkh44
 
PPTX
Test
19911865
 
PPTX
Calidad y Evaluación de Contenidos Electrónicos
Haydee2251
 
DOCX
Carmen cauja-manejo de word
Karina Cauja
 
DOCX
La poésie definition
EGM16081984
 
DOCX
Documento sub. controle 3 pag.32
Elias Ribeiro Elias
 
PPTX
Tipos de memoria ram
Carito2205
 
PPTX
Bluemix & Recruitment - Internship Challenge
Morocco JUG
 
PPTX
Lecture 11.1 : heaps
Vivek Bhargav
 
PDF
Meinprospekt.de
smithamos
 
PDF
Untitled Presentation
Andre Laplante
 
PDF
Report apprendistato
EnricoPanini
 
PPSX
#Viñas y #Vinos del Fin del Mundo
Cristina Ferro Fernández
 
PDF
A importância dos conceitos.
Fábio Fernandes
 
PDF
De la bellota al roble: construir identidad 2.0
Estudio de Comunicación
 
PDF
DeclarativeSql
Takaaki Suzuki
 
Laura aguirre
Nataly0101
 
Put the whiteboard in your database
Jørgen Braseth
 
KDK Events
peffler
 
Paul M Lawless
Perry Benton
 
Crown Packaging Customer Interface
kirkh44
 
Test
19911865
 
Calidad y Evaluación de Contenidos Electrónicos
Haydee2251
 
Carmen cauja-manejo de word
Karina Cauja
 
La poésie definition
EGM16081984
 
Documento sub. controle 3 pag.32
Elias Ribeiro Elias
 
Tipos de memoria ram
Carito2205
 
Bluemix & Recruitment - Internship Challenge
Morocco JUG
 
Lecture 11.1 : heaps
Vivek Bhargav
 
Meinprospekt.de
smithamos
 
Untitled Presentation
Andre Laplante
 
Report apprendistato
EnricoPanini
 
#Viñas y #Vinos del Fin del Mundo
Cristina Ferro Fernández
 
A importância dos conceitos.
Fábio Fernandes
 
De la bellota al roble: construir identidad 2.0
Estudio de Comunicación
 
DeclarativeSql
Takaaki Suzuki
 
Ad

Similar to Leveling up with AngularJS (20)

PPTX
Intoduction to Angularjs
Gaurav Agrawal
 
PPTX
Angular Js Get Started - Complete Course
EPAM Systems
 
PPTX
AngularJs Workshop SDP December 28th 2014
Ran Wahle
 
PPTX
Understanding angular js
Aayush Shrestha
 
PPTX
angularJs Workshop
Ran Wahle
 
PPTX
Angular workshop - Full Development Guide
Nitin Giri
 
PPTX
Angular js
vu van quyet
 
PDF
Angular Project Report
Kodexhub
 
PDF
Infosys Angular Interview Questions PDF By ScholarHat
Scholarhat
 
PPTX
Introduction to Angularjs
Manish Shekhawat
 
PDF
Introduction to Angularjs : kishan kumar
Appfinz Technologies
 
PDF
AngularJS By Vipin
Vipin Mundayad
 
PPTX
Angular js architecture (v1.4.8)
Gabi Costel Lapusneanu
 
PPTX
Angular js
Baldeep Sohal
 
PDF
Client Side MVC & Angular
Alexe Bogdan
 
PDF
Angular js interview question answer for fresher
Ravi Bhadauria
 
PPT
17612235.ppt
yovixi5669
 
PPTX
Training On Angular Js
Mahima Radhakrishnan
 
PPTX
Angular 18 course for begineers and experienced
tejaswinimysoola
 
PPTX
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
Learnimtactics
 
Intoduction to Angularjs
Gaurav Agrawal
 
Angular Js Get Started - Complete Course
EPAM Systems
 
AngularJs Workshop SDP December 28th 2014
Ran Wahle
 
Understanding angular js
Aayush Shrestha
 
angularJs Workshop
Ran Wahle
 
Angular workshop - Full Development Guide
Nitin Giri
 
Angular js
vu van quyet
 
Angular Project Report
Kodexhub
 
Infosys Angular Interview Questions PDF By ScholarHat
Scholarhat
 
Introduction to Angularjs
Manish Shekhawat
 
Introduction to Angularjs : kishan kumar
Appfinz Technologies
 
AngularJS By Vipin
Vipin Mundayad
 
Angular js architecture (v1.4.8)
Gabi Costel Lapusneanu
 
Angular js
Baldeep Sohal
 
Client Side MVC & Angular
Alexe Bogdan
 
Angular js interview question answer for fresher
Ravi Bhadauria
 
17612235.ppt
yovixi5669
 
Training On Angular Js
Mahima Radhakrishnan
 
Angular 18 course for begineers and experienced
tejaswinimysoola
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
Learnimtactics
 

Recently uploaded (20)

PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PDF
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PDF
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
PDF
A Day in the Life of Location Data - Turning Where into How.pdf
Precisely
 
PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PDF
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
PDF
Software Development Company | KodekX
KodekX
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
Architecture of the Future (09152021)
EdwardMeyman
 
PPTX
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
PPTX
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
PDF
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
PDF
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PDF
REPORT: Heating appliances market in Poland 2024
SPIUG
 
PDF
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
PDF
How-Cloud-Computing-Impacts-Businesses-in-2025-and-Beyond.pdf
Artjoker Software Development Company
 
PPTX
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
A Day in the Life of Location Data - Turning Where into How.pdf
Precisely
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
Software Development Company | KodekX
KodekX
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Architecture of the Future (09152021)
EdwardMeyman
 
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
REPORT: Heating appliances market in Poland 2024
SPIUG
 
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
How-Cloud-Computing-Impacts-Businesses-in-2025-and-Beyond.pdf
Artjoker Software Development Company
 
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 

Leveling up with AngularJS

  • 2. LEVELING UP Bring AngularJS beginners up to speed and level up everyone’s skills so we can understand core concepts and develop complex web applications for our clients more effectively. OBJECTIVE
  • 3. LEVELING UP HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. WHY USE ANGULAR?
  • 4. LEVELING UP WHY USE ANGULAR? MV* Pattern Modular code Future proof your code Develop faster Two-way data binding/Scope Directives Filters Dependency injection Services Routes Simple API Consumption It’s Awesome!
  • 5. LEVELING UP ANGULAR IS AN MV* FRAMEWORK Model View Controller Model-View-Controller is an architectural design pattern that encourages improved application organization through a separation of concerns. It enforces the isolation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally present to manage logic, user-input and the coordination of models and views.
  • 6. LEVELING UP Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. SCOPE
  • 7. LEVELING UP Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source- of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. TWO-WAY DATA BINDING
  • 8. LEVELING UP At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children. DIRECTIVES <slide duration=“500” color=“blue” src=“img/slide-01.jpg” link=“http://google.com/” />
  • 9. LEVELING UPDIRECTIVES <slides> <slide ng-repeat=“slide in slides” duration=“{{slide.duration}}” color=“{{slide.color}}” src=“{{slide.img}}” link=“{{slide.link}}” /> </slides> $scope.slides = [ { img: ‘img/slide01.jpg’, color: ‘red’, link: ‘google.com’, duration: ‘2000’ }, { img: ‘img/slide02.jpg’, color: ‘blue’, link: ‘apple.com’, duration: ‘3000’ }, { img: ‘img/slide03.jpg’, color: ‘purple’, link: ‘theverge.com’, duration: ‘2500’ }, { img: ‘img/slide04.jpg’, color: ‘green’, link: ‘techcrunch.com’, duration: ‘1500’ } ] <ul class=“slider”> <li class=“slide” style=“background- color:red” data-duration=“2000”> <a href=“google.com”> <img src=“img/slide01.jpg” /> </a> </li> <li class=“slide” style=“background- color:blue” data-duration=“3000”> <a href=“apple.com”> <img src=“img/slide02.jpg” /> </a> </li> <li class=“slide” style=“background- color:purple” data-duration=“2500”> <a href=“theverge.com”> <img src=“img/slide03.jpg” /> </a> </li> <li class=“slide” style=“background- color:green” data-duration=“1500”> <a href=“techcrunch.com”> <img src=“img/slide04.jpg” /> </a> </li> </ul>
  • 10. LEVELING UP A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter. FILTERS {{ expression | filter }}
  • 11. LEVELING UP Dependency Injection is a software design pattern that deals with how components get hold of their dependencies. The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested. DEPENDENCY INJECTION app.controller('DynamicFormCtrl', ['$scope', '$http', '$modal', '$filter', function($scope, $http, $modal, $filter) { ... }]);
  • 12. LEVELING UP Angular services are substitutable objects that are wired together using dependency injection. You can use services to organize and share code across your app. SERVICES
  • 13. LEVELING UP THREE TYPES OF SERVICES Factories Syntax: module.factory('factoryName', function); Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory. Services Syntax: module.service('serviceName', function); Result: When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService(). Providers Syntax: module.provider('providerName', function); Result: When declaring providerName as an injectable argument you will be provided with ProviderFunction().$get(). The constructor function is instantiated before the $get method is called - ProviderFunction is the function reference passed to module.provider.
  • 14. LEVELING UP Routes enable you to create different URLs for different content in your application. Having different URLs for different content enables the user to bookmark URLs to specific content, and send those URLs to friends etc. In AngularJS each such bookmarkable URL is called a route. ROUTES