Leveling up with AngularJS

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’
},
{
color: ‘blue’,
link: ‘apple.com’,
},
{
color: ‘purple’,
link: ‘theverge.com’,
},
{
color: ‘green’,
link: ‘techcrunch.com’,
}
]
<ul class=“slider”>
<li class=“slide” style=“background-
color:red” data-duration=“2000”>
<a href=“google.com”>
<img src=“img/slide01.jpg” />
</a>
</li>
color:blue” data-duration=“3000”>
<a href=“apple.com”>
</a>
</li>
color:purple” data-duration=“2500”>
<a href=“theverge.com”>
</a>
</li>
color:green” data-duration=“1500”>
<a href=“techcrunch.com”>
</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
provided with an instance of the
function. In other words new
FunctionYouPassedToService().
Providers
Syntax:
module.provider('providerName',
function);
Result:
When declaring providerName as an
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 with AngularJS

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Leveling up with AngularJS (20)

Recently uploaded (20)

Leveling up with AngularJS