AngularJS Web Application Development Cookbook

Over 90 hands-on recipes to architect performant applications and implement best practices in AngularJS

AngularJS Web Application Development Cookbook

Cookbook
Matt Frisbie

2 customer reviews
Over 90 hands-on recipes to architect performant applications and implement best practices in AngularJS
$29.99
$49.99
RRP $29.99
RRP $49.99
eBook
Print + eBook
Preview in Mapt

Book Details

ISBN 139781783283354
Paperback346 pages

Book Description

Packed with easy-to-follow recipes, this practical guide will show you how to unleash the full might of the AngularJS framework. Skip straight to practical solutions and quick, functional answers to your problems without hand-holding or slogging through the basics. Avoid antipatterns and pitfalls, and squeeze the maximum amount out of the most powerful parts of the framework, from creating promise-driven applications to building an extensible event bus. Throughout, take advantage of a clear problem-solving approach that offers code samples and explanations of components you should be using in your production applications.

 

 

Read an Extract from the book

Configuring and using AngularJS events

AngularJS offers a powerful event infrastructure that affords you the ability to control the application in scenarios where data binding might not be suitable or pragmatic. Even with a rigorously organized application topology, there are lots of applications for events in AngularJS.

How to do it…

AngularJS events are identified by strings and carry with them a payload that can take the form of an object, a function, or a primitive. The event can either be delivered via a parent scope that invokes $scope.$broadcast(), or a child scope (or the same scope) that invokes $scope.$emit().

The $scope.$on() method can be used anywhere a scope object can be used, as shown here:

(app.js) angular.module('myApp', []) .controller('Ctrl', function($scope, $log) { $scope.$on('myEvent', function(event, data) { $log.log(event.name + ' observed with payload ', data); }); });

Broadcasting an event

The $scope.$broadcast() method triggers the event in itself and all child scopes. The 1.2.7 release of AngularJS introduced an optimization for $scope.$broadcast(), but since this action will still bubble down through the scope hierarchy to reach the listening child scopes, it is possible to introduce performance problems if this is overused. Broadcasting can be implemented as follows:

(app.js) angular.module('myApp', []) .directive('myListener', function($log) { return { restrict: 'E', // each directive should be given its own scope scope: true, link: function(scope, el, attrs) { // method to generate event scope.sendDown = function() { scope.$broadcast('myEvent', {origin: attrs.local}); }; // method to listen for event scope.$on('myEvent', function(event, data) { $log.log( event.name + ' observed in ' + attrs.local + ', originated from ' + data.origin ); }); } }; }); (index.html) <div ng-app="myApp"> <my-listener local="outer"> <button ng-click="sendDown()">Send Down</button> <my-listener local="middle"> <my-listener local="first inner"></my-listener> <my-listener local="second inner"></my-listener> </my-listener> </my-listener> </div>

In this setup, clicking on the Send Down button will log the following in the browser console:

myEvent observed in outer, originated from outer myEvent observed in middle, originated from outer myEvent observed in first inner, originated from outer myEvent observed in second inner, originated from outer

Emitting an event

As you might expect, $scope.$emit() does the opposite of $scope.$broadcast(). It will trigger all listeners of the event that exist within that same scope, or any of the parent scopes along the prototype chain, all the way up to $rootScope. This can be implemented as follows:

(app.js) angular.module('myApp', []) .directive('myListener', function($log) { return { restrict: 'E', // each directive should be given its own scope scope: true, link: function(scope, el, attrs) { // method to generate event scope.sendUp = function() { scope.$emit('myEvent', {origin: attrs.local}); }; // method to listen for event scope.$on('myEvent', function(event, data) { $log.log( event.name + ' observed in ' + attrs.local + ', originated from ' + data.origin ); }); } }; }); (index.html) <div ng-app="myApp"> <my-listener local="outer"> <my-listener local="middle"> <my-listener local="first inner"> <button ng-click="sendUp()"> Send First Up </button> </my-listener> <my-listener local="second inner"> <button ng-click="sendUp()"> Send Second Up </button> </my-listener> </my-listener> </my-listener> </div>

In this example, clicking on the Send First Up button will log the following to the browser console:

myEvent observed in first inner, originated from first inner myEvent observed in middle, originated from first inner myEvent observed in outer, originated from first inner

Clicking on the Send Second Up button will log the following to the browser console:

myEvent observed in second inner, originated from second inner myEvent observed in middle, originated from second inner myEvent observed in outer, originated from second inner

Deregistering an event listener

Similar to $scope.$watch(), once an event listener is created, it will last the lifetime of the scope object they are added in. The $scope.$on() method returns the deregistration function, which must be captured upon declaration. Invoking this deregistration function will prevent the scope from evaluating the callback function for this event. This can be toggled with a setup/teardown pattern, as follows:

(app.js) angular.module('myApp', []) .controller('Ctrl', function($scope, $log) { $scope.setup = function() { $scope.teardown = $scope.$on('myEvent',function(event, data) { $log.log(event.name + ' observed with payload ', data); }); }; });

Invoking $scope.setup() will initialize the event binding, and invoking $scope.teardown() will destroy that binding.

 

Table of Contents

Chapter 1: Maximizing AngularJS Directives
Introduction
Building a simple element directive
Working through the directive spectrum
Manipulating the DOM
Linking directives
Interfacing with a directive using isolate scope
Interaction between nested directives
Optional nested directive controllers
Directive scope inheritance
Directive templating
Isolate scope
Directive transclusion
Recursive directives
Chapter 2: Expanding Your Toolkit with Filters and Service Types
Introduction
Using the uppercase and lowercase filters
Using the number and currency filters
Using the date filter
Debugging using the json filter
Using data filters outside the template
Using built-in search filters
Chaining filters
Creating custom data filters
Creating custom search filters
Filtering with custom comparators
Building a search filter from scratch
Building a custom search filter expression from scratch
Using service values and constants
Using service factories
Using services
Using service providers
Using service decorators
Chapter 3: AngularJS Animations
Introduction
Creating a simple fade in/out animation
Replicating jQuery's slideUp() and slideDown() methods
Creating enter animations with ngIf
Creating leave and concurrent animations with ngView
Creating move animations with ngRepeat
Creating addClass animations with ngShow
Creating removeClass animations with ngClass
Staggering batched animations
Chapter 4: Sculpting and Organizing your Application
Introduction
Manually bootstrapping an application
Using safe $apply
Application file and module organization
Hiding AngularJS from the user
Managing application templates
The "Controller as" syntax
Chapter 5: Working with the Scope and Model
Introduction
Configuring and using AngularJS events
Managing $scope inheritance
Working with AngularJS forms
Working with <select> and ngOptions
Building an event bus
Chapter 6: Testing in AngularJS
Introduction
Configuring and running your test environment in Yeoman and Grunt
Understanding Protractor
Incorporating E2E tests and Protractor in Grunt
Writing basic unit tests
Writing basic E2E tests
Setting up a simple mock backend server
Writing DAMP tests
Using the Page Object test pattern
Chapter 7: Screaming Fast AngularJS
Introduction
Recognizing AngularJS landmines
Creating a universal watch callback
Inspecting your application's watchers
Deploying and managing $watch types efficiently
Optimizing the application using reference $watch
Optimizing the application using equality $watch
Optimizing the application using $watchCollection
Optimizing the application using $watch deregistration
Optimizing template-binding watch expressions
Optimizing the application with the compile phase in ng-repeat
Optimizing the application using track by in ng-repeat
Trimming down watched models
Chapter 8: Promises
Introduction
Understanding and implementing a basic promise
Chaining promises and promise handlers
Implementing promise notifications
Implementing promise barriers with $q.all()
Creating promise wrappers with $q.when()
Using promises with $http
Using promises with $resource
Using promises with Restangular
Incorporating promises into native route resolves
Implementing nested ui-router resolves
Chapter 9: What's New in AngularJS 1.3
Introduction
Using HTML5 datetime input types
Combining watchers with $watchGroup
Sanity checking with ng-strict-di
Controlling model input with ngModelOptions
Incorporating $touched and $submitted states
Cleaning up form errors with ngMessages
Trimming your watch list with lazy binding
Creating and integrating custom form validators
Chapter 10: AngularJS Hacks
Introduction
Manipulating your application from the console
DRYing up your controllers
Using ng-bind instead of ng-cloak
Commenting JSON files
Creating custom AngularJS comments
Referencing deep properties safely using $parse
Preventing redundant parsing

What You Will Learn

  • Architect AngularJS applications that are designed to scale
  • Implement best practices used by the top AngularJS developers
  • Write robust test suites with full application coverage
  • Create application modules with maximum reusability and extensibility
  • Master the most difficult aspects of AngularJS such as animation, testing, and promises
  • Learn how to integrate all the new components introduced in the latest 1.3 release
  • Discover syntax and browser tricks to make using AngularJS even better
  • Optimize your AngularJS application for maximum performance

Authors

Table of Contents

Chapter 1: Maximizing AngularJS Directives
Introduction
Building a simple element directive
Working through the directive spectrum
Manipulating the DOM
Linking directives
Interfacing with a directive using isolate scope
Interaction between nested directives
Optional nested directive controllers
Directive scope inheritance
Directive templating
Isolate scope
Directive transclusion
Recursive directives
Chapter 2: Expanding Your Toolkit with Filters and Service Types
Introduction
Using the uppercase and lowercase filters
Using the number and currency filters
Using the date filter
Debugging using the json filter
Using data filters outside the template
Using built-in search filters
Chaining filters
Creating custom data filters
Creating custom search filters
Filtering with custom comparators
Building a search filter from scratch
Building a custom search filter expression from scratch
Using service values and constants
Using service factories
Using services
Using service providers
Using service decorators
Chapter 3: AngularJS Animations
Introduction
Creating a simple fade in/out animation
Replicating jQuery's slideUp() and slideDown() methods
Creating enter animations with ngIf
Creating leave and concurrent animations with ngView
Creating move animations with ngRepeat
Creating addClass animations with ngShow
Creating removeClass animations with ngClass
Staggering batched animations
Chapter 4: Sculpting and Organizing your Application
Introduction
Manually bootstrapping an application
Using safe $apply
Application file and module organization
Hiding AngularJS from the user
Managing application templates
The "Controller as" syntax
Chapter 5: Working with the Scope and Model
Introduction
Configuring and using AngularJS events
Managing $scope inheritance
Working with AngularJS forms
Working with <select> and ngOptions
Building an event bus
Chapter 6: Testing in AngularJS
Introduction
Configuring and running your test environment in Yeoman and Grunt
Understanding Protractor
Incorporating E2E tests and Protractor in Grunt
Writing basic unit tests
Writing basic E2E tests
Setting up a simple mock backend server
Writing DAMP tests
Using the Page Object test pattern
Chapter 7: Screaming Fast AngularJS
Introduction
Recognizing AngularJS landmines
Creating a universal watch callback
Inspecting your application's watchers
Deploying and managing $watch types efficiently
Optimizing the application using reference $watch
Optimizing the application using equality $watch
Optimizing the application using $watchCollection
Optimizing the application using $watch deregistration
Optimizing template-binding watch expressions
Optimizing the application with the compile phase in ng-repeat
Optimizing the application using track by in ng-repeat
Trimming down watched models
Chapter 8: Promises
Introduction
Understanding and implementing a basic promise
Chaining promises and promise handlers
Implementing promise notifications
Implementing promise barriers with $q.all()
Creating promise wrappers with $q.when()
Using promises with $http
Using promises with $resource
Using promises with Restangular
Incorporating promises into native route resolves
Implementing nested ui-router resolves
Chapter 9: What's New in AngularJS 1.3
Introduction
Using HTML5 datetime input types
Combining watchers with $watchGroup
Sanity checking with ng-strict-di
Controlling model input with ngModelOptions
Incorporating $touched and $submitted states
Cleaning up form errors with ngMessages
Trimming your watch list with lazy binding
Creating and integrating custom form validators
Chapter 10: AngularJS Hacks
Introduction
Manipulating your application from the console
DRYing up your controllers
Using ng-bind instead of ng-cloak
Commenting JSON files
Creating custom AngularJS comments
Referencing deep properties safely using $parse
Preventing redundant parsing

Book Details

ISBN 139781783283354
Paperback346 pages
Read More
From 2 reviews

Read More Reviews