AngularJS Half Day RecapLos Angeles, CA - 8 November 2014 Troy Miles

Agenda

Starting an App

Providers / Config / Run

Routing

Controllers & Filters

Services

$http

$q

Caching

Animation

Unit Test

chapter 1: starting an app

Bootstrap 3

Bootstrap 3

Start Bootstrap website

Specifically using Simple Sidebar

steps

add scripts to index.html

create app.js

use IIFE

Config / Run

angular.module

config used to setup modules

run is like a “main” method

configs always executed before run

Providers

Think of them like recipes

Constants

Values

Providers

Decorators

What are providers?

Objects that are instantiated and wired together automatically by the injector service

The injector creates two kinds of objects:

services - defined by the developer

specialized objects - Angular framework pieces, controllers, directives, filters, or animations

chapter 2: routing

ngRoute

Provides routing and deep linking services and directives

Must include angular-route.js in HTML, after angular.js

Must mark ngRoute as a dependent module

routing steps

add script to index.html

add hrefs to index.html

add ngRoute to app.js

create routes.js

create templates

chapter 3: controllers

Controller StylesAs syntax

Binds methods and properties onto the controller using this

ng-controller="SettingsController1 as settings"

Scope syntax

Injects a $scope into the controller

ng-controller="SettingsController2"

Controller Don’ts

DOM manipulation

Format input

Filter output

Share code or state

Do too much

controller steps

create the four controller files: session.js, sessions.js, presenter.js, presenters.js

inject $routeParams

FiltersUsed to format data displayed to user

Strictly front-end, doesn’t change model data

Accessible using declarative or imperative syntax

{{ expression [| filter_name[:parameter_value] ... ] }}

$scope.originalText = 'hello';$scope.filteredText = $filter('uppercase')($scope.originalText);

Strict Contextual Escaping

aka sce

Allows you put HTML markup onto your page

Helps you to secure the markup from security vulnerabilities like XSS, clickjacking, etc.

Building custom filterstempApp.filter('minimum', [function () { return function (arrTemp, minimum) { var filteredArray = []; var min = minimum ? minimum : 15; angular.forEach(arrTemp, function (value, key) { if (value.temp >= min) filteredArray.push(value); }); return filteredArray; }; }]);

filters steps

add the unsafe filter to app.js

don’t forget to inject $sce

add the jsonDate filter to app.js

don’t forget to inject $filter

add filters to markup and code

chapter 4: services

Services

Substitutable objects that are wired together using DI

Used to organize and share code across app

Only instantiated when an app component depends on it

Singletons

Built-in services always start with “$”

services steps

create a new file, dataServices.js

move the JSON data to dataService

modify the controllers to use dataService

chapter 5: $http

$http steps

modify dataServices

inject $http

inject our two constants: SESSIONS_URL & PRESENTERS_URL

modify the controllers

chapter 6: $q

Promises in Angular with $q

A promise has two components:

Deferreds - represents a unit of work

Promises - represents data for the Deferreds

$q steps

in dataService.js, replace callback with $q

modify controllers

chapter 7 - caching

caching steps

add angular-cache.min.js to index.html

modify app.js and its run method

modify dataServices.js

chapter 8: animation

ngAnimate

angularjs version 1.1.5 and greater

Provides support JavaScript, CSS3 transition/keyframe animation

ngAnimate attaches two classes to the DOM element

Enter: animate-enter & animate-enter-active

Leave: animate-leave & animate-leave-active

supported directives

ngRepeat

ngView

ngInclude

ngSwitch

ngIf

ngClass

ngShow & ngHide

form & ngModel

ngMessages

ngMessage

animate steps

include the animation.css in index.html

include angular-animate.min.js in index.html

include ngAnimate in app.js

add class tags to ng-view

jasmine unit testing

Jasmine

The default unit tester for AngularJS

Behavior Driven Development BDD

aka red-green tester

Others will work also

describe - test suite

describe is a global jasmine function

two params

string - name of the test suite

function - implementation of the suite

Can be nested

it - specs

it is a global jasmine function

looks like describe

a spec contains one or more expections

if all expectations true, it is a passing spec

it any expectation fails, it is a failing spec

expectations

expect function

one param

the actual

chained to a Matcher function

Matchers

take the output of the expect function and compare it to something

implement a boolean compare between actual value and expected

reports to Jasmine if the expectation is true or false

any matcher can be negated with a not before it

some matchers

toBe - compares using ===

toEqual - works for literal variables and objects

toMatch - for regular expressions

toBeDefined - compares against 'undefined'

toBeUndefined - also compares against 'undefined'

yet more matchers

toBeNull

toBeTruthy

toBeFalsy

toContain - finds an item in array

toBeLessThan

beforeEach / afterEachAre setup and teardown functions

called before and after each spec it

this

beforeEach, it, and afterEach share the same this

it is cleared before call spec call

any beforeEach not included in a describe block is executed before any Jasmine test

disabling suites and specs

prepend an 'x' before describe or it

specs inside a disabled suite are not ran

Summary

We built a simple but more full featured site using standard open source tools

Resourceshttps://github.com/johnpapa/angularjs-styleguide#resolving-promises-for-a-controller

http://www.yearofmoo.com/2013/09/advanced-testing-and-debugging-in-angularjs.html

http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html

http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/

http://www.nganimate.org/