CON T EN T S

Get More Refcardz! Visit Refcardz.com

206

AngularJS Essentials

What is AngularJS?
AngularJS Building Blocks
Setting up the Environment
AngularJS Bootstrap
Modules
Controllers...and more!

By Gil Fink

W h at is A n g u l a r J S?
AngularJS is a very popular MVW (Model/View/Whatever)
framework which is maintained by Google. AngularJS enables
web developers to impose MVC structure on their client-side
code and to build dynamic web applications easily.
AngularJS introduces component-based architecture. It also
includes a variety of conventions that developers should know
and use that will be presented in this Refcard. AngularJS
includes a wide range of features that help to build Single Page
Applications (SPAs) faster and is considered a one stop shop
for creating SPAs.

Lets explore how some of these parts relate to the MVC design
pattern:

You will find out that AngularJS is expressive, readable,

extensible, and quick to develop. All these qualities make
AngularJS one of the best JavaScript frameworks for application
development.
In this Refcard you will get to know the essential parts of
AngularJS. The Refcard will also try to help you speed up your
development process when you use the AngularJS.

A n g u l a r J S B u i l di n g B lo c k s
The Model

AngularJS includes a few building blocks that you should know

and understand:
Version

angular
js essentials
Java Enterprise
Edition 7

Modules

Im plem entations

Logical containers for different parts of

AngularJS objects

Controllers

A constructor functions that are used to hold

scopes and expose behaviors that views can
use

Scopes

Objects that reference the application model

Views

HTML that presents the models and interacts

with the user

Templates
Services
Filters

Directives
Routing
Dependency
Injection

The model is the data structure that holds some business data.
It will usually reside from the server side using a REST API or
from a service. The model is exposed to the AngularJS view
using the $scope object.
The View

The HTML part that presents the data structure and enables
user interactions. The view binds to a model using the $scope
object. It can call controller functions through the $scope
object as well. It uses filters to transform the model data to an
appropriate representation. It also uses directives as reusable
web components and for DOM manipulation.

HTML that contains AngularJS specific

elements and attributes
Objects that enable you to organize and share
code in an AngularJS application
Transform the model data to an appropriate
representation in the view
Reusable web components that tell AngularJS
HTML compiler how to render then and how
the components behave
Client-side routing mechanism
Design pattern that deals with how to inject
dependencies to a dependent object

The following diagram shows how the building blocks work

together to build the AngularJS ecosystem:

D Z o ne, Inc.

dz o ne.c o m

2
The Controller

angular js essentials

The following diagram shows the process:

The controller performs all the business logic and orchestrates

operations. It is responsible for initializing the $scope, can interact
with AngularJS services, and exposes functions to the view using
the $scope object. The controller is also responsible for updating
the model based on users view interactions.

S e tti n g u p t h e E n vi ro n m e n t
The first thing that you want to do is to setup the environment.
AngularJS can be downloaded from www.angularjs.org and
included in your web page or it can be included directly from Google
Content Delivery Network (CDN):
Manual Bootstrap

Sometimes you want to perform operations before AngularJS starts.

These operations can be configurations, achieving relevant data
or anything else you might think about. AngularJS enables you to
manually bootstrap the application. You will need to remove the
ng-app directive from the HTML and use the angular.bootstrap
function instead. Make sure that you declare your modules before
using them in the angular.bootstrap function. The following code
shows a snippet of using manual bootstrap:

<script src=https://ajax.googleapis.com/ajax/libs/
angularjs/1.2.9/angular.min.js></script>

Another option is to install AngularJS using your favorite package

manager and then include its script. For example, you can use
Bower to install AngularJS using the following syntax:
bower install angular

Once AngularJS is installed in your web application, you can start

working with it.

angular.element(document).ready(function() {
angular.module(myApp, []);
angular.bootstrap(document, [myApp]);
});

The ngApp Directive

One of the most important AngularJS directives is the ng-app

directive. ng-app bootstraps the application, and instructs
AngularJS to load the main module, which is given as the directive
parameter. The next code example shows how to setup the ng-app
directive to myApp module:

In the previous code you can see the use of AngularJSs ready
function, which will wire an event handler to the Dom Content
Loaded event underneath. Later on we (can/will) create a module
with the name myApp and bootstrap the DOM with the module.
This of course brings us the question what is an AngularJS
module?

<!doctype html>
<html ng-app=myApp>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/
angularjs/1.2.9/angular.min.js></script>
</head>
<body>
<div>
</div>
</body>
</html>

modules
What is a Module?

AngularJS modules are logical containers for different parts of

AngularJS objects. AngularJS applications are typically created with
one or more modules. Modules can have dependencies on other
modules. Those dependencies will be resolved automatically by
AngularJS when a module is loaded into memory.
Creating a Module

A n g u l a r J S B o o tst r a p

You create modules using the angular.module function. Each

created module should have a unique name that is passed as the
first argument to the angular.module function. The second angular.
module argument is an array of dependencies that can have zero
to many dependencies. Here is an example of using the angular.
module function to declare a myApp module that is dependent on a
storageService:

Once a web page is loaded by the browser and it includes AngularJS

script along with the ng-app directive, AngularJS is bootstrapping.
There are two options for bootstrapping: automatic bootstrap and
manual bootstrap. Lets explore both of the options:
Automatic Bootstrap

Three main things happen when AngularJS is automaticly

bootstrapping. First of all, AngularJS creates an injector object
that will be used later for dependency injection. Then, AngularJS
creates the root scope, which is the root for all the scopes in the
application. Finally, AngularJS compiles the Document Object Model
(DOM), strating from the ng-app directive and compiling and
processing all the directives and bindings that it finds in the DOM.

D Z o ne, Inc .

angular.module(myApp, [storageService]);

Configuring a Module

You can add module configuration using the config function once
you declare a module. The configuration will get executed when the
module is loading. You can inject providers or constants (which will
be discussed later in the refcard) to the configuration block you are
writing. Here is an example of a call for the config function:

dz o ne .c o m

angular js essentials

Co n t ro l l e r s

angular.module(myApp, [storageService])
.config(function ($provide, $filterProvider) {
$provide.value(myValue, 1);
$filterProvider.register(myFilter, ...);
});

What is a Controller?

AngularJS controllers are just JavaScript constructor functions that

are used to hold scopes and to expose behaviors that views can use.
You can think about controllers as the logic behind the view. Each
controller has a new child scope which is available as the $scope
argument in the constructor function. When a controller is created
during runtime, the $injector will inject the $scope argument.
Controllers add properties and functions to the $scope.

In the previous code, there are to injectable - $provide and

$filterProvider. In the config function body, we create a constant
value called myValue which is set to 1. We also register a filter called
myFilter into the $filterProvider.
Another option to interfere with AngularJS module execution is to
use the run function. The run function runs after all the modules
have been loaded. The function is used to literally run the AngularJS
application. You can inject instances and contants into the run
function callback. The following code shows how to use the run
function:

Creating a Controller

In order to create a controller, all you need to do is to declare a

constructor function. The following code shows a simple controller:
function MyController($scope) {
$scope.doSomething = function() {
// the function implemetation
};
}

angular.module(myApp, [storageService])
.run(function (someInstance) {
someInstance.doSomething();
});

The way to wire a controller constructor function to a view is using

the ng-controller directive:

Now that we understand how to create and use modules, lets

explore the AngularJS dependency injection (DI) mechanism.

<div ng-controller=MyController>
</div>

AngularJS Dependency Injection

Each AngularJS application includes an $injector object. The

$injector is responsible for dependency management and for
dependency lookups. Here is a diagram that shows how DI works in
AngularJS:

Another option to create a controller is to use the module controller

function:
var myApp = angular.module(myApp,[]);
myApp.controller(MyController , function($scope) {
});

A few notes about controller good practices:

Controllers should contain only business logic that relates to the

view that they are bound to.

Business logic that isnt related to the controller bound view

should be injected into controllers as services.

Dont use controllers for DOM manipulation, formatting and

filtering. We will discuss the ways to do those operations later
in the Refcard.

Lets analyze what is going on in the diagram. Once the root

module is created, AngularJS will create a new $injector object.
While the application is running, a lot of objects such as controllers,
services, filters, and more are registered in the $injector container.
Later on, if an object has a dependency, AngularJS will use the
$injector object to search it. If an instance of the dependency is
available, it is returned by the $injector. If there is no instance of
the dependency, a new object is created using the $injector instance
factory. The new object is returned and also stored in the instance
cache.

Once you are familiar with controllers lets talk about scopes.

s co p e s
What is a scope?

Scopes are objects that include properties and the functions set by
controllers that a view can later use. You can think about scopes as
the glue between a controller and a single view.
Once a controller is attached to a view using the ng-controller
directive, all the scope properties and functions are data bound
to the view and it can use them. Changes to scope properties are
reflected in the bounded view, and user interactions can also
change the bound properties.

Some of the main AngularJS objects such as modules, controllers,

and services can declare that they need a dependency. In order to
do that, you need to add function arguments with the exact name
of the dependency. That means that if you have an object named
obj and want to inject it, you will have to have a function argument
in the AngularJS object with the same name. Here is a controller
example that declares it needs a $scope injected object:

Using Scopes in Code

AngularJS runtime injects a scope object into a controller, and then

the controller can set the $scope with properties and behaviors. The
following example shows how to add a property called message and
a function called myFunc to a scope object:

var myApp = angular.module(myApp,[]);

myApp.controller(MyController , function($scope) {
});

Speaking about controllers, lets explore what these AngularJS

objects are.
D Z o ne, Inc .

dz o ne .c o m

angular js essentials

Creating a Custom Service

var myApp = angular.module(myApp,[]);

myApp.controller(MyController , function($scope) {
$scope.message = hello;
$scope.myFunc = function() {
// do something
}
});

There are four options for service creation in AngularJS:

You can also put inside scope properties full model objects that later
can be used by a view.

V i e ws
Views are a dynamic HTML that present the models and interact
with the user. AngularJS views can be bound to a controller using
the ng-controller directive. Once a binding is set, you can use scope
properties and functions in the view. In order to harness the full
potential of views you should understand two AngularJS concepts
which relate to views: templates and expressions.

Service
Type

Description

value

Use the modules value function with a given

name and value. The injector will return the exact
value.

factory

Use the modules factory function with a given

name and a factory function. The injector will
invoke the given function.

service

Use the modules service function with a given

name and constructor function. The injector will
use the new keyword to create the service single
instance

provider

Use the modules provider function with a given

name and provider function. The injector will
invoke the providers $get function.

templates

A template is a declarative specification that contains HTML parts.

It also contains AngularJS specific elements and attributes that
are called directives and AngularJS expressions. The directives
explain to AngularJS how to transform the template into a
dynamic view. The expressions are placeholders that are used for
data binding. The following example shows a template:

Here are usage examples for the first two options:

var myApp = angular.module(myApp,[]);
myApp.value(myValue, a constant value);
myApp.factory(myFactory, function(name) {
return Hi + name;
}

When you want to use the previous services you will inject them to
a dependent object by their name and use them. For example, here
is a controller that uses the previous services:

Expressions

In the previous template example you could see that we used curly
brackets to wrap btnText. This is an example of an expression.
Expressions are JavaScript code that is used for binding.
Expressions are placed in double curly brackets {{}}. When
AngularJS processes a template, it searches for expressions and
it parses them and evaluates them. The evaluation of expressions
is being done against the controller scope object. If the scope
doesnt contain the expression value, AngularJS will not throw an
exception. This behavior enables you to perform lazy binding.

myApp.controller(myController, function($scope,
myValue, myFactory) {
$scope.value = myValue;
$scope.greet = myFactory;
});

Built-in AngularJS Services

AngularJS comes with several built-in services. Here are the

descriptions of some of them:

The following code example shows a simple expression that

evaluates to 5:

Built-in
Service

<div> 3+2={{3+2}} </div>

AngularJS expressions dont have access to global variables and you

should use AngularJS services in functions called from an
expression. Expressions can use control flow statements except
from the ternary operator (a ? b : c).

$http

You can also use expressions for one time binding. Any expression
that starts with :: will evaluate only once. The following code
example shows you how to use one time binding on a message
property:

$resource

<div> One time binding: {{::message}} </div>

$q
$log

S e rvi c e s

$location

What is a Service?

Services in AngularJS are a singleton objects that are used to

perform a specific task. Services are UI independent, meaning that
they shouldnt manipulate or use UI elements (this is the role of the
controller). You can inject services to modules, controllers, filters,
directives and of course to other services as well.

D Z o ne, Inc .

Description

Used for communicating over HTTP with remote

servers. The service receives as argument a
configuration object for configuring the HTTP
request.
Abstraction on top of $http for interaction with
REST services. Require a dependency on ngResource
module. Exposes functions such as get, save and
delete.
Exposes the ability to create promises (deferred
objects) for cleaner design of asynchronous code.
Enable to log messages
Includes the current parsed URL. Changes to
$location are reflected to the browser address bar.

There are many other services such as $animate, $window,

$rootScope, $interval, $document and more. You can read about
those services in AngularJS documentation: https://docs.angularjs.
org/api/ng/service.

dz o ne .c o m

Directives are custom HTML elements and attributes that AngularJS

recognizes as part of its ecosystem. Directives allow you to extend
the existing HTML with your own elements or attributes and to add
behavior to existing elements or attributes. You already saw a few of
the AngularJS built-in directives such as ng-app and ng-controller.

F i lt e r s
What is a Filter?

Filters format an evaluated expression value to an appropriate

representation in the view. When you want to use a filter you just
pipe it using the | sign to the expression like in the following
code example:

When the AngularJS bootstrap runs, the AngularJSs HTML

compiler ($compile) is attaching a specified behavior to DOM
elements according to directives. The process is done in two
phases: compile and link. The compiler is traversing on the DOM
and collects all the directives. The linker combines directives with
their scope and produces a dynamic view.

{{ message | filter }}

For example, if you want to use a currency filter with a number

value you just state the name of the filter:
{{ 5 | currency }}

Creating a Custom Directive

Like controllers, services, and filters, directives are also registered

to modules. In order to register a directive you will use the
modules directive function, which receives a directive name and
a factory function. The factory function should return a directive
definition object. The following example will create a bare directive
with the name myDirective:

The output of the expression will be 5$.

Filters can have arguments using the semicolon sign and can be
chainable.
Creating a Custom Filter

var myApp = angular.module(myApp,[]);

myApp.directive(myDirective, function() {
return {
};
});

You can create your custom filters in two ways: using the modules
filter function or registering a filter in the $filterProvider service.
The first argument that a filter receives in its callback function is
the input value. All the other arguments are considered additional
arguments, which can be used by the filter function.

The returned directive definition object can include various

configuration options.

The following example shows how to register a filter that turns any
string to its upper case representation:

Directive
Configur ation

var myApp = angular.module(myApp,[]);

myApp.filter(uppercase, function() {
return function(str) {
return (text || ).toUpperCase();
};
\}

restrict

Built-in AngularJS Filters

template

AngularJS comes with a set of built-in filters that you can use. Here
are their descriptions:
Built-in
Filters

currency
date
number
json

replace

Description

Used to format numbers as currency

templateUrl

Used to format dates as string

Used to format numbers as string
Converts JavaScript object to their string
representation

lowercase

Transforms the give string into its lowercase

representation

uppercase

Transforms the give string into its uppercase

representation

limitTo

Creates a new array or string according to the

specified number of elements

orderBy

Orders a given array by a given expression

predicate

filter

angular js essentials

scope

transclude

Selects a subset of items form the given array

link

D i r e c tiv e s
What is a Directive?

Directives are one of the most powerful features in AngularJS.

D Z o ne, Inc .

dz o ne .c o m

Description

By default directives are restricted to

attributes. Using restrict you can restrict
the directive to A (attribute), E (element),
C (class) and M (comment)
Appends a given HTML as the child
element of the element
If set to true will replace the entire element
with a given template (used with the
template or templateUrl configurations)
A URL for a given template that would be
loaded and appended to the element
By default directive has the scope of its
parent controller. If Scope is set to {}, an
isolated scope is created for the directive,
You can map and bind parent properties to
an isolated scope using @ (one directional
mapping), = (bidirectional mapping), and
& (executes an expression in the parent
scope)
If set to true, the directive can wrap
content. In the template of the directive
you need to use the ng-transclude
directive in order to mark the place that
wraps content
A function that receives the scope,
directive element, the element attributes
as parameters and controllers. The
function should be used to add event
listeners or to manipulate the DOM

When AngularJS locates form elements in the DOM, it will make

them available as a property of the scope. The name of the property
will be the name of the form. Each input type in the form will be a
sub-property of the scope form property.

The following code example shows a simple directive declaration:

myApp.directive(myDialog, function() {
return {
restrict: EA,
scope: {},
template: <div class=dialog></div>,
link: function(scope, element, attrs) {
scope.message = hello;
}
};
});

Form Validation Directives

AngularJS provides a few built-in validation directives which can

set the form validation $error property. The available directives are:
Validation
Directive

When you want to use this directive you can write in your HTML:

required

<my-dialog></my-dialog>

or:
<div my-dialog></div>

Built-in Useful Directives

AngularJS includes many built-in and useful directives that you

can use.
Built-in
Directive

Description

ngModel

Binds an HTML element to a property in the

scope

ngEventName
(replace
EventName with
any DOM event)

angular js essentials

ngValue

ngBind

Binds an expression to the text content of

an HTML element. When the expression
changes the text content change as well

ngClass

Dynamically sets CSS classes on HTML

elements by evaluating the given expression

ngInclude

Retrieves an external HTML fragments,

compile it and add it to the DOM

ngRepeat

Collection iterator. In each item in the

collection, the template that is bound to the
directive is instantiated with its own scope

ngShow

Shows or hides an HTML element according

to the evaluated expression

ngSwitch

Enables to create DOM evaluation conditions

like a switch case statement

A required field

min

Validates the value is greater than the

minimum value

max

Validates the value is smaller than the

maximum value

minlength

Validates the value has length bigger than the

provided minimum

maxlength

Validates the value has length smaller than the

provided maximum

pattern

Validates the value against a given regular

expression

Here is an example of using form validation with AngularJS:

These directives enable you to add custom

behavior on the specified event

Binds a given expression to a value of an

input. When the input changes the bound
model (which is the ngModel) changes as
well

Description

<form name=myForm>
<div>
<input type=text name=username ngmodel=user.name required/>
</div>
<div>
<input type=password name=password ngmodel=user.password required />
</div>
<button ng-click=login(user)>
Login
</button>
</form>

In this form, the scope will have a property with the name myForm
which will be bound to the form. The myForm property will include
the username and password sub-properties, which will include
references to the input types. If the username and password
wouldnt be supplied, the $error of the form will be set to an error
and the form wouldnt submit.
AngularJS also decorates form elements and input types with CSS
classes. You can use those classes to change the presented style
of an element according to its state. The CSS classes that you can
use are:

ng-valid
ng-invalid

You can find more built-in directives in the following AngularJS

documentation: https://docs.angularjs.org/api/ng/directive.

ng-invalid-[validation name]
ng-pristine

Angul ar JS and For ms

ng-dirty

AngularJS adds two-way binding, state management, and

validation to HTML forms. You can bind HTML input types to
models using the ngModel directive, and AngularJS will provide all
the mechanisms.

D Z o ne, Inc .

Ro u ti n g
One of the most important mechanisms in Single Page Applications
(SPA) is client-side routing. Client-side routing enables developers

dz o ne .c o m

7
to intercept route changes and, instead of rendering a new page in
the server, render a document fragment in the client and replace
a shell element. This is how you move from one page to another
in SPAs. AngularJS provides a routing feature that can be used
to create this behavior to inject views into an ngView-decorated
element.

angular js essentials

Here is a use case example:

myApp.config(function($routeProvider) {
$routeProvider
.when(/about, {
templateUrl: views/about.html,
controller: myController
}).when(/cart, {
templateUrl: views/cart.html
}).otherwise({
templateUrl: views/home.html,
controller: myController
});
});

The ngRoute Module

The ngRoute module is a built-in router for AngularJS. In order to

use the module you will have to reference the angular-route script
and add ngRoute as a dependency of your ngApp module.
<script src=angular-route.js></script>
var myApp = angular.module(myApp, [ngRoute]);

A dditi o n a l R e s o u rc e s

In order to register routes, you use the $routeProvider service. The

$routeProvider service provides a when function to register routes
and a default route that is set using the otherwise function. Each
registered route includes a URL and a configuration object. The
configuration object includes the following main configurations:
Route
Configur ation
Option

Description

template/
templateUrl

The path/template string that represents

the template that is going to be attached to
an ngView

For further research about AngularJS, I suggest to explore the

following web sites:

AngularJS web site: https://angularjs.org/

AngularJS Developer Guide: https://docs.angularjs.org/guide
PhoneCat Tutorial App: https://docs.angularjs.org/tutorial
AngularJS official forum: https://groups.google.com/

controller

The controller that is bound to the

templates scope

redirectTo

Name of the route to redirect to when you

want to redirect to a different route

forum/#!forum/angular

AngularJS official Twitter handle: https://twitter.com/angularjs

ABOUT THE AUTHOR

RECOMMENDED BOOK

Gil Fink is a web development expert, ASP.NET/IIS Microsoft MVP

and the founder ofsparXys. He is currently consulting for various
enterprises and companies, where he helps to develop web and RIAbased solutions. He conducts lectures and workshops for individuals
and enterprises who want to specialize in infrastructure and web
development. He is also co-author of several Microsoft Official
Courses (MOCs) and training kits, co-author of Pro Single Page
Application Development book (Apress), the founder of Front-End.
IL Meetup and co-organizer of GDG Rashlatz Meetup. You can read
his publications in his blog: http://blogs.microsoft.co.il/gilf/.

Pro Single Page Application Development walks you through

building a SPA step-by-step. SPA development comes with
its own particular challenges, including tracking history,
user interface performance, and how to handle search engine
optimization. This book will be your one-stop shop for
creating fluid, modern applications on the web.

BUY NOW

Browse Our Collection of 250+ Free Resources, including:

Research Guides:
Refcardz:

Unbiased insight from leading tech experts

Library of 200+ reference cards covering the latest tech topics

Communities:

Share links, author articles, and engage with other tech experts

JOIN NOW
DZone, Inc.
150 Preston Executive Dr.
Cary, NC 27513

DZone communities deliver over 6 million pages each month to more than 3.3 million software
developers, architects and decision makers. DZone offers something for everyone, including news,
tutorials, cheat sheets, research guides, feature articles, source code and more.

888.678.0399
919.678.0300
Refcardz Feedback Welcome
refcardz@dzone.com

"DZone is a developer's dream," says PC Magazine.

dz oSponsorship
ne .c o m Opportunities

Copyright 2015 DZone, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted,
DZone,
D Z o ne, Inc
. in anyInc.
form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

sales@dzone.com

Version 1.0

$7.95