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