Further AngularJS

Workshop

Pete Bacon Darwin

AngularJS 1.x Team Lead

Get the slides

https://slides.com/petebd/further-angularjs-2016

FoodMe App

Install development tools

Make sure you have node installed

  • node.js - version 4/5
  • npm - version 2/3

Get the code

clone using git

git clone https://github.com/petebacondarwin/foodme-further

or download zip file

https://github.com/petebacondarwin/foodme-further/archive/master.zip

or copy from USB stick

Step 0

Set up the tools and workspace

Jasmine Test Specs

A JavaScript library for writing unit tests

  • describe('...', function() { ... });
  • beforeEach(function() { ... });
  • it('should ...', function() { ... });

Angular test helpers

angular-mocks.js provides helper methods

  • load a module: module('app'));
  • get hold of a service: inject(function($controller) { ... });

Karma Test Runner

http://karma-runner.github.io/0.13/index.html

  • Command line tool + library
  • Runs unit tests in one or more browsers
  • Aggregates and reports the results back

Step 1

Write and run some simple unit tests

ngMock and $httpBackend

Angular provides various mock services to help with testing

$httpBackend.when(...).respond(...);

$httpBackend.flush();

$rootScope.$digest();

Step 2

Mocking services in unit tests

Syntactic Injection Sugar

When injecting we can wrap params in underscores

inject(function(_$http_) { ... })

 

Getting filters for testing

There are two ways to get hold of a filter

  • Use the $filter service: var ratingFilter = $filter('rating');
  • Inject it directly: inject(function(ratingFilter) { ... })

Step 3

Create unit tests for rating filter

Testing Directives

The general approach is:

  • compile some HTML containing the directive
  • manipulate the scope and DOM and see what happens

Jasmine Matchers

We can clean up our tests by defining custom matchers:

expect(element.find('li')).toHaveClass('selected', 3);

Template Directive Tests

karma-ng-html2js-preprocessor

  • It is not easy to load up templates when testing due to ngMock $httpBackend
  • Instead we can add the template to the $templateCache programmatically
  • We can automate this with a karma preprocessor

Step 4

Create unit tests for `fmRating` component

Routing

uiRouter

Routes

  • URLs are mapped to states
  • States are mapped to views
  • The view is an HTML template
  • Routes are defined on the $stateProvider
  • Views are displayed via ui-view directive

Step 5

Implement routing to enable multiple URL driven views

 

Step 6

Add additional static views and navigation links

from ThoughtWorks blog

Step 7

Install & configure protractor

Create and run basic e2e tests

Step 8

Use a PageObject to make e2e tests clearer

$location

$location.path() provides the relative path to the current route

ngAnimate

Provides hooks to trigger animations declaratively

  • Built-in directives already support animations
  • Animations can be defined via:
    • CSS Transition
    • CSS Keyframe Animation
    • JavaScript callback Animation

CSS transitions

Applying a CSS class to an element, in combination with ngAnimate specific CSS classes, allows you to trigger animations with an animation enabled directive  

  • ngRepeat: ng-enter, ng-leave, ng-move
  • ngShow/ngHide: ng-hide-add, ng-hide-remove
  • ngClass: my-class-add my-class-remove

Step 9

Add animated navigation indicators

Step 10

Add a shared restaurantService

Route Params

Routes can be parameterized to match more than one URL:

 

 

 

The value of the parameters are made available on the $routeParams service


      .when('/restaurants/:id', { ... });

Step 11

Add a new view for a single restaurant showing its menu

Step 12

Display a menu on the restaurant page

Injecting Services

Services are injected based on named parameters:

 

 

But if you minimize the code then you lose the name

 

 

so you must annotate

 

 

or


 function FmRestaurantView(restaurantService, currentOrder, $state) { ... }

  function FmRestaurantView(a, b, c) { ... }

   ['restaurantService', 'currentOrder', '$state',
       function FmRestaurantView(restaurantService, currentOrder, $state) { ... }]



  FmRestaurantView.$inject = ['restaurantService', 'currentOrder', '$state'];

Step 13

Add injection annotations to prevent minification issues

Step 14

Enable ordering of items from the menu

Next Steps

  • Add payment and confirmation views
  • Minify the distributable file
Made with Slides.com