Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Home > Web Development > Front End Web Development > AngularJS Web application development Cookbook
AngularJS Web application development Cookbook
AngularJS Web application development Cookbook

AngularJS Web application development Cookbook: Over 90 hands-on recipes to architect performant applications and implement best practices in AngularJS

Arrow left icon
Profile Icon Matthew Frisbie
Arrow right icon
$54.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5 (24 Ratings)
Paperback Dec 2014 346 pages 1st Edition
eBook
$9.99 $32.99
Paperback
$54.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Matthew Frisbie
Arrow right icon
$54.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5 (24 Ratings)
Paperback Dec 2014 346 pages 1st Edition
eBook
$9.99 $32.99
Paperback
$54.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$9.99 $32.99
Paperback
$54.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

AngularJS Web application development Cookbook

Chapter 2. Expanding Your Toolkit with Filters and Service Types

In this chapter, we will cover the following recipes:

  • 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

Introduction

In this chapter, you will learn how to effectively utilize AngularJS filters and services in your applications. Service types are essential tools required for code reuse, abstraction, and resource consumption in your application. Filters, however, are frequently glazed over in introductory courses as they are not considered integral to learning the framework basics. This is a pity as filters let you afford the ability to abstract and compartmentalize large chunks of application functionality cleanly.

All AngularJS filters perform the same class of operations on the data they are passed, but it is easier to think about filters in the context of a pseudo-dichotomy in which there are two kinds: data filters and search filters.

At a very high level, AngularJS data filters are merely tools that modulate JavaScript objects cleanly in the template. On the other half of the spectrum, search filters have the ability to select elements of an enumerable collection that match some of the...

Using the uppercase and lowercase filters

Two of the most basic built-in filters are uppercase and lowercase filters, and they can be used in the following fashion.

How to do it…

Suppose that you define the following controller in your application:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    text: 'The QUICK brown Fox JUMPS over The LAZY dog',
    nums: '0123456789',
    specialChars: '!@#$%^&*()',
    whitespace: '   '
  };
});

You will then be able to use the filters in the template by passing them via the pipe operator, as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.text | uppercase }}</p>
    <p>{{ data.nums | uppercase }}</p>
    <p>{{ data.specialChars | uppercase }}</p>
    <p>_{{ data.whitespace | uppercase }}_</p>
  </div>
</div...

Using the number and currency filters

AngularJS has some built-in filters that are less simple, such as number and currency; they can be used to format numbers into normalized strings. They also accept optional arguments that can further customize how the filters work.

Getting ready…

Suppose that you define the following controller in your application:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    bignum: 1000000,
    num: 1.0,
    smallnum: 0.9999,
    tinynum: 0.0000001
  };
});

How to do it…

You can apply the number filter in your template, as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.bignum | number }}</p>
    <p>{{ data.num | number }}</p>
    <p>{{ data.smallnum | number }}</p>
    <p>{{ data.tinynum | number }}</p>
  </div>
</div>

The output rendered will be as follows...

Using the date filter

The date filter is an extremely robust and customizable filter that can handle many different kinds of raw date strings and convert them into human readable versions. This is useful in situations when you want to let your server defer datetime processing to the client and just be able to pass it a Unix timestamp or an ISO date.

Getting ready…

Suppose, you have your controller set up in the following fashion:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    unix: 1394787566535,
    iso: '2014-03-14T08:59:26Z',
    date: new Date(2014, 2, 14, 1, 59, 26, 535)
  };
});

How to do it…

All the date formats can be used seamlessly with the date filter inside the template, as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.unix | date }}</p>
    <p>{{ data.iso | date }}</p>
    <p>{{ data...

Debugging using the json filter

AngularJS provides you with a JSON conversion tool, the json filter, to serialize JavaScript objects into prettified JSON code. This filter isn't so much in use for production applications as it is used for real-time inspection of your scope objects.

Getting ready…

Suppose your controller is set up as follows with a prefilled user data object:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.user = {
    id: 123,
    name: {
      first: 'Jake',
      last: 'Hsu'
    },
    username: 'papatango',
    friendIds: [5, 13, 3, 1, 2, 8, 21], 
    // properties prefixed with $$ will be excluded
    $$no_show: 'Hide me!'
  };
});

How to do it…

Your user object can be serialized in the template, as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <pre>{{ user | json }}</pre>
  </div...

Using data filters outside the template

Filters are built to perform template data processing, so their utilization outside the template will be infrequent. Nonetheless, AngularJS provides you with the ability to use filter functions via an injection of $filter.

Getting ready

Suppose that you have an application, as follows:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.val = 1234.56789;
});

How to do it…

In the view templates, the argument order is scrambled with the following format:

data | filter : optionalArgument

For this example, it would take the form in the template as follows:

<p>{{ val | number : 4 }}</p>

This will give the following result:

1,234.5679

In this example, it's cleanest to apply the filter in the view template, as the purpose of formatting the number is merely for readability. If, however, the number filter is needed to be used in a controller, $filter can be injected and used as follows:

(app...

Introduction

In this chapter, you will learn how to effectively utilize AngularJS filters and services in your applications. Service types are essential tools required for code reuse, abstraction, and resource consumption in your application. Filters, however, are frequently glazed over in introductory courses as they are not considered integral to learning the framework basics. This is a pity as filters let you afford the ability to abstract and compartmentalize large chunks of application functionality cleanly.

All AngularJS filters perform the same class of operations on the data they are passed, but it is easier to think about filters in the context of a pseudo-dichotomy in which there are two kinds: data filters and search filters.

At a very high level, AngularJS data filters are merely tools that modulate JavaScript objects cleanly in the template. On the other half of the spectrum, search filters have the ability to select elements of an enumerable collection that match some of the...

Using the uppercase and lowercase filters

Two of the most basic built-in filters are uppercase and lowercase filters, and they can be used in the following fashion.

How to do it…

Suppose that you define the following controller in your application:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    text: 'The QUICK brown Fox JUMPS over The LAZY dog',
    nums: '0123456789',
    specialChars: '!@#$%^&*()',
    whitespace: '   '
  };
});

You will then be able to use the filters in the template by passing them via the pipe operator, as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.text | uppercase }}</p>
    <p>{{ data.nums | uppercase }}</p>
    <p>{{ data.specialChars | uppercase }}</p>
    <p>_{{ data.whitespace | uppercase }}_</p>
  </div>
</div>

The output rendered will be as follows:

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG...

Using the number and currency filters

AngularJS has some built-in filters that are less simple, such as number and currency; they can be used to format numbers into normalized strings. They also accept optional arguments that can further customize how the filters work.

Getting ready…

Suppose that you define the following controller in your application:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    bignum: 1000000,
    num: 1.0,
    smallnum: 0.9999,
    tinynum: 0.0000001
  };
});

How to do it…

You can apply the number filter in your template, as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.bignum | number }}</p>
    <p>{{ data.num | number }}</p>
    <p>{{ data.smallnum | number }}</p>
    <p>{{ data.tinynum | number }}</p>
  </div>
</div>

The output rendered will be as follows:

1,000,000
1
1.000
1e-7

This outcome might seem a bit...

Using the date filter

The date filter is an extremely robust and customizable filter that can handle many different kinds of raw date strings and convert them into human readable versions. This is useful in situations when you want to let your server defer datetime processing to the client and just be able to pass it a Unix timestamp or an ISO date.

Getting ready…

Suppose, you have your controller set up in the following fashion:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    unix: 1394787566535,
    iso: '2014-03-14T08:59:26Z',
    date: new Date(2014, 2, 14, 1, 59, 26, 535)
  };
});

How to do it…

All the date formats can be used seamlessly with the date filter inside the template, as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.unix | date }}</p>
    <p>{{ data.iso | date }}</p>
    <p>{{ data.date | date }}</p>
  </div>
</div>

The output...

Debugging using the json filter

AngularJS provides you with a JSON conversion tool, the json filter, to serialize JavaScript objects into prettified JSON code. This filter isn't so much in use for production applications as it is used for real-time inspection of your scope objects.

Getting ready…

Suppose your controller is set up as follows with a prefilled user data object:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.user = {
    id: 123,
    name: {
      first: 'Jake',
      last: 'Hsu'
    },
    username: 'papatango',
    friendIds: [5, 13, 3, 1, 2, 8, 21], 
    // properties prefixed with $$ will be excluded
    $$no_show: 'Hide me!'
  };
});

How to do it…

Your user object can be serialized in the template, as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <pre>{{ user | json }}</pre>
  </div>
</div>

The output will be rendered in HTML, as follows:

{
  "id": 123,
  "name": {
    "first...

Using data filters outside the template

Filters are built to perform template data processing, so their utilization outside the template will be infrequent. Nonetheless, AngularJS provides you with the ability to use filter functions via an injection of $filter.

Getting ready

Suppose that you have an application, as follows:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.val = 1234.56789;
});

How to do it…

In the view templates, the argument order is scrambled with the following format:

data | filter : optionalArgument

For this example, it would take the form in the template as follows:

<p>{{ val | number : 4 }}</p>

This will give the following result:

1,234.5679

In this example, it's cleanest to apply the filter in the view template, as the purpose of formatting the number is merely for readability. If, however, the number filter is needed to be used in a controller, $filter can be injected and used as follows:

(app.js)

angular.module('myApp', [...

Using built-in search filters

Search filters serve to evaluate individual elements in an enumerable object and return whether or not they belong in the resultant set. The returned value from the filter will also be an enumerable set with none, some, or all of the original values that were removed. AngularJS provides a rich suite of ways to filter an enumerable object.

Getting ready

Search filters return a subset of an enumerable object, so prepare a controller as follows, with a simple array of strings:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.users = [
    'Albert Pai',
    'Jake Hsu',
    'Jack Hanford',
    'Scott Robinson',
    'Diwank Singh'
  ];
});

How to do it…

The default search filter is used in the template in the same fashion as a data filter, but invoked with the pipe operator. It takes a mandatory argument, that is, the object that the filter will compare against.

The easiest way to test a search filter is by tying an input field to a...

Chaining filters

As AngularJS search filters simply reduce the modulation functions that return a subset of the object that is passed to it, it is possible to chain multiple filters together.

When filtering enumerable objects, AngularJS provides two built-in enumeration filters that are commonly used in conjunction with the search filters: limitTo and orderBy.

Getting ready

Suppose that your application contains a controller as follows with a simple array of objects containing a name string property:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.users = [
    {name: 'Albert Pai'}, 
    {name: 'Jake Hsu'},
    {name: 'Jack Hanford'},
    {name: 'Scott Robinson'},
    {name: 'Diwank Singh'}
  ];
});

In addition, suppose that the application template is set up as follows:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <input type="text" ng-model="search.val" />
    <!—- simple repeater filtering against search.val...

Creating custom data filters

At some point, the provided AngularJS data filters will not be enough to fill your needs, and you will need to create your own data filters. For example, assume that in an application that you are building, you have a region of the page that is limited in physical dimensions, but contains an arbitrary amount of text. You would like to truncate that text to a length which is guaranteed to fit in the limited space. A custom filter, as you might imagine, is perfect for this task.

How to do it…

The filter you wish to build accepts a string argument and returns another string. For now, the filter will truncate the string to 100 characters and append an ellipsis at the point of truncation:

(app.js)

angular.module('myApp', [])
.filter('simpletruncate', function () {
  // the text parameter 
  return function (text) {
    var truncated = text.slice(0, 100);
    if (text.length > 100) {
      truncated += '...';
    }
    return truncated;
  };
});

This will be used in...

Creating custom search filters

AngularJS search filters work exceedingly well out of the box, but you will quickly develop the desire to introduce some customization of how the filter actually relates the search object to the enumerable collection. This collection is frequently composed of complex data objects; a simple string comparison will not suffice, especially when you want to modify the rules by which matches are governed.

Searching against data objects is simply a matter of building the search object in the same mould as the enumerable collection objects.

Getting ready

Suppose, for example, your controller looks as follows:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
  $scope.users = [
    { 
      firstName: 'John',
      lastName: 'Stockton'
    },
    {
      firstName: 'Michael',
      lastName: 'Jordan'
    }
  ];
});

How to do it…

When searching against this collection, in the case where the search filter is passed a string primitive, it will perform...

Filtering with custom comparators

If you want to search only for exact matches, vanilla wildcard filtering becomes problematic as the default comparator uses the search object to match against substrings in the collection object. Instead, you might want a way to specify exactly what constitutes a match between the reference object and enumerable collection.

Getting ready

Suppose that your controller contains the following data object:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
  $scope.users = [
    { 
      firstName: 'John',
      lastName: 'Stockton',
      number: '12'
    },
    {
      firstName: 'Michael',
      lastName: 'Jordan',
      number: '23'
    },
    {
      firstName: 'Allen',
      lastName: 'Iverson',
      number: '3'
    }
  ];
});

How to do it…

Instead of using just a single search box, the application will use two search fields, one for the name and one for the number. Having a wildcard search for the first name and last name is more...

Building a search filter from scratch

The provided search filters can serve your application's purposes only to a point. Eventually, you will need to construct a complete solution in order to filter an enumerable collection.

Getting ready

Suppose that your controller contains the following data object:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
  $scope.users = [
    { 
      firstName: 'John',
      lastName: 'Stockton',
      number: '12'
    },
    {
      firstName: 'Michael',
      lastName: 'Jordan',
      number: '23'
    },
    {
      firstName: 'Allen',
      lastName: 'Iverson',
      number: '3'
    }
  ];
});

How to do it…

Suppose you wanted to create an OR filter for the name and number values. The brute force way to do this is to create an entirely new filter in order to replace the AngularJS filter. The filter takes an enumerable object and returns a subset of the object. Adding the following will do exactly that:

(app.js)

.filter('userSearch...
Left arrow icon

Page 1 of 19

Right arrow icon

Key benefits

  • Understand how to design and organize your AngularJS application to make it efficient, performant, and scaleable
  • Discover patterns and strategies that will give your insights into the best ways to construct production AngularJS applications
  • Get the most out of AngularJS by gaining exposure to real-world examples

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.

Who is this book for?

This is not your grandmother's JavaScript cookbook. If you have a foundational understanding of the framework and want to expand your AngularJS skillset with strategies and methodologies for building performant and scaleable production applications, this is the book for you. This book assumes you have an understanding of the basics of AngularJS, and experience with JavaScript.

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
Estimated delivery fee Deliver to South Africa

Standard delivery 10 - 13 business days

$12.95

Premium delivery 3 - 6 business days

$34.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Dec 26, 2014
Length: 346 pages
Edition : 1st
Language : English
ISBN-13 : 9781783283354
Category :
Web Development
Concepts :
Front End Web Development
Tools :
AngularJS

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to South Africa

Standard delivery 10 - 13 business days

$12.95

Premium delivery 3 - 6 business days

$34.95
(Includes tracking information)

Product Details

Publication date : Dec 26, 2014
Length: 346 pages
Edition : 1st
Language : English
ISBN-13 : 9781783283354
Category :
Web Development
Concepts :
Front End Web Development
Tools :
AngularJS

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

AngularJS Web Application Development Blueprints
AngularJS Web Application Development Blueprints
Read more
Aug 2014 300 pages
Full star icon 4.3 (7)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $54.99
$9.99 $32.99
$54.99
AngularJS Web application development Cookbook
AngularJS Web application development Cookbook
Read more
Dec 2014 346 pages
Full star icon 4.5 (24)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $54.99
$9.99 $32.99
$54.99
Stars icon
Total $ 109.98
AngularJS Web Application Development Blueprints
$54.99
AngularJS Web application development Cookbook
$54.99
Total $ 109.98 Stars icon
Banner background image

Table of Contents

11 Chapters
1. Maximizing AngularJS Directives Chevron down icon Chevron up icon
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
2. Expanding Your Toolkit with Filters and Service Types Chevron down icon Chevron up icon
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
3. AngularJS Animations Chevron down icon Chevron up icon
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
4. Sculpting and Organizing your Application Chevron down icon Chevron up icon
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
5. Working with the Scope and Model Chevron down icon Chevron up icon
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
6. Testing in AngularJS Chevron down icon Chevron up icon
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
7. Screaming Fast AngularJS Chevron down icon Chevron up icon
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
8. Promises Chevron down icon Chevron up icon
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
9. What's New in AngularJS 1.3 Chevron down icon Chevron up icon
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
10. AngularJS Hacks Chevron down icon Chevron up icon
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
Index Chevron down icon Chevron up icon
Index

Recommendations for you

Left arrow icon
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (73)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $59.99
$9.99 $47.99
$59.99
Full-Stack Flask and React
Full-Stack Flask and React
Read more
Oct 2023 408 pages
Full star icon 4.3 (4)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $39.99
$9.99 $31.99
$39.99
Real-World Web Development with .NET 9
Real-World Web Development with .NET 9
Read more
Dec 2024 578 pages
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $49.99
$9.99 $39.99
$49.99
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2024 828 pages
Full star icon 4 (3)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $31.99
$9.99 $39.99
$31.99 $49.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.5 (37)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $49.99
$9.99 $39.99
$49.99
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $43.99
$9.99 $35.99
$43.99
Scalable Application Development with NestJS
Scalable Application Development with NestJS
Read more
Jan 2025 612 pages
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $39.99
$9.99 $31.99
$39.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $44.99
$9.99 $35.99
$44.99
Authentic Node.js WebSocket Server Workshop 2024 for Everyone, No Libraries
Authentic Node.js WebSocket Server Workshop 2024 for Everyone, No Libraries
Read more
Nov 2024 8hrs 44mins
Video
Video
  • Video Video $9.99
$9.99 $104.99
Node.js Cookbook
Node.js Cookbook
Read more
Nov 2024 456 pages
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $39.99
$9.99 $31.99
$39.99
Right arrow icon

Customer reviews

Top Reviews
  • Top Reviews
  • Most Recent
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5
(24 Ratings)
5 star 70.8%
4 star 16.7%
3 star 8.3%
2 star 0%
1 star 4.2%
Filter icon Filter
Top Reviews
  • Top Reviews
  • Most Recent

Filter reviews by

Seif K Mar 23, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I have read many programming books but the way this book is structured is amazing. I love how the author really breaks down the framework and explains how all the piece fit in and work. I was confused with Angular since I am native iOS developer and this book really helped me understand how AngularJS works and I would recommend this book to anyone trying to dive into AngularJS.
Amazon Verified review Amazon
Stuart Hill Mar 30, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
When I’m looking to adopt a new technology, one of the first resources I go to is Packt. I’m not as familiar with AngularJS so when I found AngularJS Web Application Development Cookbook, it was exactly what I was looking for to get me up to speed. One of AngularJS strengths is data binding. The book has really good examples. The “How to do it” and “How it works” are very well organized and extremely helpful. More than just boilerplate, this book shows you how it works and how to get it right. This should be a go to for anyone looking for a resource on AngularJS.
Amazon Verified review Amazon
David Jones Feb 24, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
great for work
Amazon Verified review Amazon
NickDog Mar 20, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book is smashing. I really enjoy reading such "recipe-like" kind of books. To learn the red-hot AngularJS, I really work up a sweat to read nearly all the books. But none really amp up my AngularJS knowledge like this one. Traditional A-Z guides always do this by disperse the implementation details among a small piece of snippet. You know what I am saying: We have to hunt through the whole chapter to put the snippet together. What a drag!! By contrast ,with over 90 hands-on recipes packed inside, the book adopt the gnarly style that all the PacktPub "cookbook" have in common.Each recipe complete a task by first telling you "How to do it" with a minimum of fluff so that you can see the result first; then it explains all the technical part to you in "How it Work" section; and additional info is in the "There's more" section. What's more, the author refers to the other related recipes in the "See also" section so that we can review all the pertinent ideas with ease. I am a big fan of this writing style: the code is given out first and then you can get to the technical details as an integral part. As an added benefit, this book can be used as a reference. If you want to perform some action, you can look it up if it's already in the book. The author just slice and dice everything for you to succeed in AngularJS world. It is a no-brainer to get a copy. Definitely recommend it to you if you want to get into the groove of AngularJS really quick and thoroughly.
Amazon Verified review Amazon
Richard Schmidt Apr 20, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Done
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2022 818 pages
Full star icon 4.1 (54)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $49.99
$9.99 $39.99
$49.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (73)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $59.99
$9.99 $47.99
$59.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $44.99
$9.99 $35.99
$44.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $49.99
$9.99 $39.99
$49.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $46.99
$9.99 $37.99
$46.99
Right arrow icon

About the author

Profile icon Matthew Frisbie
Matthew Frisbie
Matt Frisbie is currently a software engineer at Google. He was the author of the Packt Publishing bestseller AngularJS Web Application Development Cookbook and also has published several video series through O'Reilly. He is active in the Angular community, giving presentations at meetups and doing webcasts.
Read more
See other products by Matthew Frisbie
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela