AngularJS

Fundamentals
by Jeremy Zerr

Blog: http://www.jeremyzerr.com
LinkedIn: http://www.linkedin.com/in/jrzerr
Twitter: http://www.twitter.com/jrzerr
 What is AngularJS

Open Source Javascript MVC/MVVM framework.

Helps manage complexity of your client-side Javascript

code.

Extend HTML vocabulary with your own elements and

attributes.

Built-in HTTP and more importantly REST API web

service integration.
 What is AngularJS

Includes its own client-side templating language.

Two-way data binding to allow the Model to be used as

the source of truth.

Has client-side routing to enable creating single page

apps (SPA)

Sponsored by Google, lots of contributions by Google

employees, but on Github as public repo.
 What Can You Create
With AngularJS?

Web Apps

Mobile Apps (Ionic)

Desktop apps (Chrome App, Electron)

AngularJS Examples
 Starter AngularJS app

We’ll start by defining some Javascript objects in a

controller to represent our Models

Then we will display the object using AngularJS built-in

template system

Follow along with this Plunker

Starter AngularJS app
(templating)

This shows what AngularJS

client-side templating looks like

ng-controller provides an
identifier to link with code

ng-repeat iterates through a

variable in the controller’s
$scope
Starter AngularJS App
(controller)

The name of our app is myApp

Controller is ToddlerCtrl

We define the controller and fill

our scope up with Toddler
objects. (its just a Javascript
data structure - JSON)
 What is a $scope?

$scope is the application ViewModel

It is the glue between the controller and the view.

AngularJS documentation on $scope

Using client-side models from
different data sources

Data sources:

Using JSON in the initial page load to pre-populate Services

Using a static JSON file

Using a REST API

We’ll build on the previous example by creating our Models using

different data sources.

Follow along with this Plunker

Using JSON in initial page
load

Assign the JSON to a variable in a <script>

tag.

Create a Service using $resource

Pass the JSON to the constructor

Using REST API & JSON file

You create a URL

template. This
identifies the object
ID field (aid)

Controller body shows

initializing data 4
different ways

With the same Adult

resource, you do a
get() to request a
single object
 Templating methods

Directives + AngularJS templating allows you to create custom HTML markup, both elements
and attributes

Templating types:

We’ve already seen inline HTML

Can define within Javascript

Can include within <script> tags

Can include in an external HTML file

We’ll take our existing code, pick the local JSON file as the data source, and show a
comparison between these different templating methods.

Follow along with this Plunker

 Templating method:
Javascript

We use an AngularJS directive

Can also declare your template right in Javascript

Templating method: <script>

Template cache can be pre-loaded by including a template within <script>

tags, using a special type.

Any directive that references teen-internal.html first looks in template cache

before requesting the html file from the server.
 Two-way data binding

You can bind a variable in $scope to elements or inputs

You can also use a $scope variable to control which CSS class
gets applied to an element

If the input changes its value, the underlying $scope variable also
changes.

Follow along with this Plunker

How would you have done this with jQuery + Mustache? See this
Plunker
 Two-way data binding:
ng-model + ng-class

To achieve 2-way data binding, you use ng-model to attach an element to

something in the $scope

As the checkbox is clicked, the underlying structure changes

The ng-class construct also applies the appropriate class as the underlying
model changes

You can also do read-only data binding using ng-bind instead of ng-model
 Filters and Formatters

There are several built-in filters, which can do either filtering

or formatting of data within your client side templates.

Formatters: currency, date, json, lowercase, number,

uppercase

Filters: limitTo, orderBy

Let’s take a look at how date formatting can be done.

Follow along with this Plunker

 Watch a $scope variable

AngularJS allows us to monitor a $scope variable using

$watch

Allows you to have a callback fire whenever the value

changes

It is an alternative to using ng-click or ng-change

Replaces jQuery click or change events.

Follow along with this Plunker

Watch a $scope variable (code)

You can use $watch on a $scope variable to hook into whenever it is changed
 Client-side routing

Allows you to map URL fragments, using #, to templates and

controllers to design single page apps easier.

Perfect for perma-linking and allowing browser history to work like

the user would expect.

Uses ngRoute to accomplish this mapping of URL paths to templates

and controllers.

Similar function to a Front Controller design pattern that you would

use server-side in MVC design.

Follow along with this Plunker

Client-side routing (code)

You map hash routes

to a controller and
template

#/adults is how the

path would look in the
address bar. (or #/
adults/1)
Other Notable Directives…

The AngularJS API page has a full list of directives.

ngShow and ngHide similar to jQuery .show() and .hide()

ngInclude, ngIf, ngSwitch to use a template and

manipulate the DOM based on a condition
Interacting with a REST API

As seen in other examples, the syntax makes the Asynchronous REST API
call “appear” synchronous.

The call to query() returns an empty object, that is filled back in when the
AJAX response returns.

There are a lot of default methods provided in ngResource, get(), query(),

remove(), delete(), save().

Let’s do a $save, Follow along with this Plunker

Interacting with a REST API
(code)

Other than $watch, you have a lot of other hooks into view changes. Here we use ng-change to call a
function to issue an AJAX $save to the REST API

The argument to the Adult REST API is pulled from the $routeParams, the server is called like /adults/1.json
 How Does $watch Work

The whole $watch process is a great design pattern to follow in

Web Applications. This is generically called the Observer design
pattern.

It goes along with $digest and $apply, it is a part of the Digest cycle.

When an $apply is run, this causes the Digest cycle to kick off and
compare the variable values, previous to current. This only happens
to variables you have bound to.

This part of AngularJS is likely where you are first exposed to it’s
inner workings. Why? Custom Directives!
Custom Directives
Let’s build a mini-app
X-Files Villains App - Demo

X-Files is Baaaaaacck!!!!

Vote on how creepy each

of the different X-Files
villains are.

Plunker Link
 X-Files Villains App

We will design this using one controller, three directives,

one for each section of the app

Data is all stored on $scope in controller, and passed via

directive scope into the directives, where it is modified
via 2-way binding.

Controller <-> Directive 1 (2 way data binding)

 X-Files Villains App
Controller

Villains data is an array of

objects
 X-Files Villains App
Main Template

See 3 Directives, they accept data.villains and

data.selectedVillain, are the two items on the controller scope
 X-Files Villains App
Villain List Directive

We use scope to define the

attributes

The ‘=‘ is for two way data

binding

templateUrl points to a HTML

template

The ng-model will change

selectedVillain on the main
controller
 X-Files Villains App
Villain Detail Directive

Villain Detail ng-model

shows the creepy
attribute

Clicking on the buttons

calls a function on the
$scope of the controller
 X-Files Villains App
Villain Detail Directive

Here we show using a filter on an array of objects

orderBy takes a parameter, the property on the object to use

to sort by.
 Directive Best Practices

Choices to consider

Using Attribute vs. Element

Using proper HTML5/XHTML5 markup

Scope considerations for reusable code

See my blog post on AngularJS Directive Best Practices

Directive Best Practices
(Forms of directives)

Ways to reference a
directive from within
a template.

Equivalent examples
of an attribute that
would match ng-
bind.
 What I haven’t (and won’t)
cover in detail

Form validation

Instead of ngResource, you can just use $http for lower level
control (closer to jQuery ajax/get)

Promises (Deferred API)

Writing tests + how the $injector works

Animations

Lots more…
Why Use AngularJS?
Now we know what AngularJS can do.
Why should we integrate it into our web application?
Why should you use AngularJS
in your next web app?

Encourages good web app front-end design practices

Model as the source of truth

Using classes for style not functionality

Dependency Injection core to framework to have code that is test-

ready

Use client-side objects that are similar to server-side objects

Easy to hook up to REST API to have server just providing data

and HTML/templates
Less code to write, recall the jQuery vs. AngularJS example

Creating directives that encourage re-use and easy to be

shared with others

Easy to collaborate with other developers by using object-

oriented design principles, reusable components, and
focus on testability

Client-side templating

Does not depend on jQuery, so you don’t need to include

both.
 Weaknesses of AngularJS

No server-side templating (supposedly version 2.0).

No easy way to switch out to use a different templating engine

Putting functionality embedded in HTML may not feel like good enough
separation of presentation and code.

SEO for public-facing web apps is difficult to achieve due to no server-side

templating

Using PhantomJS to create snapshots and save, then use #! in URL: link

Have to be careful of over-$watching. You can watch all properties of every

object if you really want to.
 Angular 1.5 vs. React

React by itself is not a fair comparison with AngularJS. React is typically paired with
something like Flux or Redux to be able to do full apps.

AngularJS is all about 2 way data binding. React approach is about managing state and
one way data flow.

AngularJS uses watches and data binding to know when to update DOM. React uses a
Virtual DOM to improve DOM updating efficiency by only applying changes.

React encourages using immutable data structures, resulting in operations one way.

AngularJS uses its own templating system, React can use JSX templates that exist right
alongside code.

AngularJS has a lot more contributed libraries and UI components because it has been
around longer.
 Angular 1.5 vs. Angular 2

Angular 2 is currently in beta.

Angular 2 apps will be built entirely of components, like React. Directives in 1.x are the
closest thing we have to what a component looks like.

Angular 1.x release are adding small steps you can take to make the upgrade easier.
Angular 1.5 even added a component type, that is basically a more restrictive directive.

Will be able to use server side templating, able to be used easier in all types of apps in
more Javascript environments.

Most examples are in TypeScript, but will also be able to use ES2015.

Just like React, encourages using explicit data operations, resulting in operations one
way and in general improving app performance over Angular 1.
 Frontend Web Dev Trends

Frontend separate from backend, using API for communication. Enables web
apps, and mobile apps, to be developed without rethinking architecture.
Ready to scale and allows developer specialization.

Movement towards using a single app state (React+Redux and Om)

Improving rendering performance by minimizing direct DOM interaction (React

and Angular 2)

Javascript mobile apps using a hybrid approach of native UI components and

WebView for improved performance over WebView-only (React Native)
 Where do you go next?

Basic Tutorial on AngularJS site

Developer Guide on AngularJS site

Angular 2 Site - angular.io

ng-conf 2015 videos are on YouTube

Paid video-based training at egghead.io

See all the code from this presentation, and more, at My Plunker Page

Build Something Great!

 Thanks!
Jeremy Zerr

Blog: http://www.jeremyzerr.com
LinkedIn: http://www.linkedin.com/in/jrzerr
Twitter: http://www.twitter.com/jrzerr