book

AngularJS Web application development Cookbook

Name: AngularJS Web application development Cookbook
Author: Matthew Frisbie
ISBN: 9781783283354

by Matthew Frisbie

December 2014

Intermediate to advanced

346 pages

6h 14m

English

Packt Publishing

Read now

Unlock full access

AngularJS Web Application Development Cookbook
Table of Contents
AngularJS Web Application Development Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and moreWhy subscribe?Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for

Sections
Getting readyHow to do it…How it works…There's more…See also
Conventions
Reader feedback
Customer support
Downloading the example codeErrataPiracyQuestions
1. Maximizing AngularJS Directives
Introduction
Building a simple element directive
How to do it…How it works…There's more…
Working through the directive spectrum
How to do it…The element directiveThe attribute directiveThe class directiveThe comment directiveHow it works…There's more…See also
Manipulating the DOM
How to do it…How it works…There's more…See also
Linking directives
How to do it…How it works…There's more…See also
Interfacing with a directive using isolate scope
Getting readyHow to do it…How it works…There's more…See also
Interaction between nested directives
Getting readyHow to do it…How it works…See also
Optional nested directive controllers
Getting readyHow to do it…How it works…
Directive scope inheritance
Getting readyHow to do it…How it works…See also
Directive templating
Getting readyHow to do it…How it works…See also
Isolate scope
Getting readyHow to do it…How it works…See also
Directive transclusion
How to do it…How it works…See also
Recursive directives
Getting readyHow to do it…The $compile serviceThe angular.element() methodThe $templateCacheHow it works…There's more…See also
2. Expanding Your Toolkit with Filters and Service Types
Introduction
Using the uppercase and lowercase filters
How to do it…How it works…There's more…See also
Using the number and currency filters
Getting ready…How to do it…How it works…There's more…See also…
Using the date filter
Getting ready…How to do it…How it works…There's more…
Debugging using the json filter
Getting ready…How to do it…How it works…There's more…
Using data filters outside the template
Getting readyHow to do it…How it works…There's more…
Using built-in search filters
Getting readyHow to do it…How it works…See also
Chaining filters
Getting readyHow to do it…How it works…There's more…
Creating custom data filters
How to do it…How it works…There's more…
Creating custom search filters
Getting readyHow to do it…
Filtering with custom comparators
Getting readyHow to do it…How it works…See also
Building a search filter from scratch
Getting readyHow to do it…How it works…There's more…See also
Building a custom search filter expression from scratch
How to do it…How it works…There's more…
Using service values and constants
How to do it…Service valueService constantHow it works…See also
Using service factories
How to do it…How it works…See also
Using services
How to do it…How it works…See also
Using service providers
How to do it…How it works…There's more…See also
Using service decorators
How to do it…How it works…See also
3. AngularJS Animations
Introduction
Creating a simple fade in/out animation
Getting readyHow to do it…How it works…There's more…Keeping things cleanNo more boilerplate animation stylingSee also
Replicating jQuery's slideUp() and slideDown() methods
Getting readyHow to do it…How it works…See also
Creating enter animations with ngIf
Getting readyHow to do it…CSS3 transitionCSS3 animationJavaScript animationHow it works…There's more…See also
Creating leave and concurrent animations with ngView
Getting readyHow to do it…CSS3 transitionCSS3 animationJavaScript animationHow it works…See also
Creating move animations with ngRepeat
Getting readyHow to do it…CSS3 transitionCSS3 animationJavaScript animationHow it works…There's more…See also
Creating addClass animations with ngShow
Getting readyHow to do it…CSS transitionsCSS animationJavaScript animationHow it works…See also
Creating removeClass animations with ngClass
Getting readyHow to do it…CSS transitionsCSS animationJavaScript animationHow it works…See also
Staggering batched animations
Getting readyHow to do it…How it works…There's more…See also
4. Sculpting and Organizing your Application
Introduction
Manually bootstrapping an application
Getting readyHow to do it…How it works…There's more…
Using safe $apply
Getting readyHow to do it…How it works…There's more…Anti-pattern awareness
Application file and module organization
Getting readyHow to do it…One module, one file, and one nameKeep your related files close, keep your unit tests closerGroup by feature, not by component typeDon't fight reusabilityAn example directory structure
Hiding AngularJS from the user
Getting readyHow to do it…How it works…There's more…
Managing application templates
Getting readyHow to do it…The string templateRemote server templatesInline templates using ng-templatePre-defined templates in the cacheHow it works…There's more…
The "Controller as" syntax
Getting readyHow to do it…How it works…There's more…
5. Working with the Scope and Model
Introduction
Configuring and using AngularJS events
How to do it…Broadcasting an eventEmitting an eventDeregistering an event listener
Managing $scope inheritance
Getting readyHow to do it…How it works…There's more…Troublemaker built-in directivesngControllerngIncludengViewngRepeatngIfngSwitch
Working with AngularJS forms
How to do it…What the form offers youTracking the form stateValidating the formBuilt-in and custom validatorsHow it works…
Working with <select> and ngOptions
Getting readyHow to do it…Populating with an arrayExplicitly defining the option valuesExplicitly defining the option model assignmentImplementing option groupsNull optionsPopulating with an objectExplicitly defining option valuesHow it works…There's more…
Building an event bus
Getting readyHow to do it…Basic implementationCleanupEvent bus as a serviceEvent bus as a decoratorHow it works…There's more…
6. Testing in AngularJS
Introduction
Configuring and running your test environment in Yeoman and Grunt
How to do it…Using the right tools for the jobHow it works…There's more…See also
Understanding Protractor
How it works…There's more…See also
Incorporating E2E tests and Protractor in Grunt
Getting readyHow to do it…InstallationSelenium's WebDriver managerModifying your GruntfileSetting your Protractor configurationRunning the test suiteHow it works…See also
Writing basic unit tests
Getting readyHow to do it…Initializing the unit testsCreating the unit testsHow it works…Initializing the controllerInitializing the HTTP backendFormally running the unit testsThere's more…
Writing basic E2E tests
Getting readyHow to do it…How it works…There's more…See also
Setting up a simple mock backend server
How to do it…How it works…There's more…See also
Writing DAMP tests
How to do it…There's more…See also
Using the Page Object test pattern
How to do it…How it works…There's more…See also
7. Screaming Fast AngularJS
Introduction
Recognizing AngularJS landmines
How to do it…Expensive filters in ng-repeatDeep watching a large objectUsing $watchCollection when the index of change is neededKeeping template watchers under controlThere's more…See also
Creating a universal watch callback
How to do it…How it works…There's more…See also
Inspecting your application's watchers
How to do it…How it works…There's more…See also
Deploying and managing $watch types efficiently
How to do it…Watch as little of the model as possibleKeep watch expressions as lightweight as possibleUse the fewest number of watchers possibleKeep the watch callbacks small and lightCreate DRY watchersSee also
Optimizing the application using reference $watch
How to do it…How it works…There's more…See also
Optimizing the application using equality $watch
How to do it…How it works…There's more…See also
Optimizing the application using $watchCollection
How to do it…How it works…There's more…See also
Optimizing the application using $watch deregistration
How to do it…How it works…See also
Optimizing template-binding watch expressions
How to do it…How it works…There's more…See also
Optimizing the application with the compile phase in ng-repeat
Getting readyHow to do it…How it works…There's more…See also
Optimizing the application using track by in ng-repeat
How to do it…How it works…See also
Trimming down watched models
How to do it…How it works…There's more…See also
8. Promises
Introduction
Understanding and implementing a basic promise
How to do it…How it works…Basic components and behavior of a promiseDeferredsPromisesSee also
Chaining promises and promise handlers
Getting readyHow to do it…Data handoff for chained handlersRejecting a chained handlerHow it works…There's more…Promise handler treesThe catch() methodThe finally() methodSee also
Implementing promise notifications
How to do it…How it works…There's more…
Implementing promise barriers with $q.all()
How to do it…How it works…There's more…See also
Creating promise wrappers with $q.when()
How to do it…How it works…There's more…See also
Using promises with $http
How to do it…How it works…See also
Using promises with $resource
How to do it…How it works…See also
Using promises with Restangular
How to do it…How it works…See also
Incorporating promises into native route resolves
How to do it…How it works…There's more…See also
Implementing nested ui-router resolves
How to do it…State promise inheritanceSingle-state promise dependenciesHow it works…See also
9. What's New in AngularJS 1.3
Introduction
Using HTML5 datetime input types
How to do it…The <input type="date"> typeThe <input type="datetime-local"> typeThe <input type="time"> typeThe <input type="week"> typeThe <input type="month"> typeHow it works…There's more…See also
Combining watchers with $watchGroup
How to do it…How it works…There's more…See also
Sanity checking with ng-strict-di
How to do it…There's more…
Controlling model input with ngModelOptions
Getting readyHow to do it…The updateOn optionThe debounce optionThe allowInvalid optionThe getterSetter optionThe timezone optionThe $rollbackViewValue optionHow it works…See also
Incorporating $touched and $submitted states
How to do it…The $touched stateThe $submitted stateSee also
Cleaning up form errors with ngMessages
Getting readyHow to do it…How it works…There's more…See also
Trimming your watch list with lazy binding
How to do it…How it works…There's more…Bind once expression universalityThe ng-repeat directiveIsolate scope bindingsMethods and expressions requiring executionSee also
Creating and integrating custom form validators
How to do it…Synchronous validationAsynchronous validationHow it works…There's more…See also
10. AngularJS Hacks
Introduction
Manipulating your application from the console
How to do it…ScopesServicesThere's more…
DRYing up your controllers
Getting readyHow to do it…How it works…There's more…
Using ng-bind instead of ng-cloak
How to do it…How it works…
Commenting JSON files
How to do it…Ignored propertiesDuplicate propertiesDon't run with scissorsHow it works…There's more…
Creating custom AngularJS comments
How to do it…How it works…There's more…Extensibility
Referencing deep properties safely using $parse
How to do it…How it works…There's more…See also
Preventing redundant parsing
Getting readyHow to do it…How it works…See also
Index

Content preview from AngularJS Web application development Cookbook

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', []) ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781783283354

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

AngularJS Web application development Cookbook

by Matthew Frisbie

Creating custom data filters

How to do it…

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.