Unit Testing

196 Pages·2013·1.59 MB·English

AngularJS
Brad Green and Shyam Seshadri
AngularJS
by Brad Green and Shyam Seshadri
Copyright © 2013 Brad Green and Shyam Seshadri. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/
institutional sales department: 800-998-9938 or [email protected].
Editors: Simon St. Laurent and Meghan Blanchette Indexer: Judith McConville
Production Editor: Melanie Yarbrough Cover Designer: Randy Comer
Copyeditor: Rachel Leach Interior Designer: David Futato
Proofreader: Jilly Gagnon Illustrator: Rebecca Demarest
April 2013: First Edition
Revision History for the First Edition:
2013-04-05: First release
See http://oreilly.com/catalog/errata.csp?isbn=9781449344856 for release details.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly
Media, Inc. AngularJS, the image of a thornback cowfish, and related trade dress are trademarks of O’Reilly
Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trade‐
mark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and authors assume
no responsibility for errors or omissions, or for damages resulting from the use of the information contained
herein.
ISBN: 978-1-449-34485-6
LSI
Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
1. Introduction to AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Concepts 1
Client-Side Templates 2
Model View Controller (MVC) 3
Data Binding 3
Dependency Injection 5
Directives 5
An Example: Shopping Cart 6
Up Next 9
2. Anatomy of an AngularJS Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Invoking Angular 11
Loading the Script 11
Declaring Angular’s Boundaries with ng-app 12
Model View Controller 12
Templates and Data Binding 14
Displaying Text 15
Form Inputs 16
A Few Words on Unobtrusive JavaScript 19
Lists, Tables, and Other Repeated Elements 21
Hiding and Showing 23
CSS Classes and Styles 24
Considerations for src and href Attributes 26
Expressions 26
Separating UI Responsibilities with Controllers 27
Publishing Model Data with Scopes 28
Observing Model Changes with $watch 29
iii
Performance Considerations in watch() 31
Organizing Dependencies with Modules 33
How Many Modules Do I Need? 36
Formatting Data with Filters 37
Changing Views with Routes and $location 38
index.html 39
list.html 39
detail.html 40
controllers.js 40
Talking to Servers 41
Changing the DOM with Directives 43
index.html 44
controllers.js 44
Validating User Input 45
Moving On 46
3. Developing in AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Project Organization 47
Tools 50
IDEs 50
Running Your Application 51
With Yeoman 51
Without Yeoman 51
Testing with AngularJS 52
Karma 52
Unit Tests 54
End-to-End/Integration Tests 55
Compilation 57
Other Awesome Tools 59
Debugging 59
Batarang 60
Yeoman: Optimizing Your Workflow 64
Installing Yeoman 65
Starting a Fresh AngularJS project 65
Running Your Server 65
Adding New Routes, Views, and Controllers 65
The Testing Story 66
Building Your Project 66
Integrating AngularJS with RequireJS 67
4. Analyzing an AngularJS App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
The Application 77
iv | Table of Contents
Relationship Between Model, Controller, and Template 78
The Model 79
Controllers, Directives, and Services, Oh My! 80
Services 80
Directives 84
Controllers 85
The Templates 89
The Tests 95
Unit Tests 96
Scenario Tests 99
5. Communicating with Servers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Communicating Over $http 101
Configuring Your Request Further 103
Setting HTTP Headers 104
Caching Responses 105
Transformations on Requests and Responses 106
Unit Testing 107
Working with RESTful Resources 108
The Declaration 111
Custom Methods 111
No Callbacks! (Unless You Really Want Them) 112
Simplified Server-Side Operations 112
Unit Test the ngResource 112
The $q and the Promise 113
Response Interception 115
Security Considerations 115
JSON Vulnerability 116
XSRF 116
6. Directives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Directives and HTML Validation 119
API Overview 120
Naming Your Directive 121
The Directive Definition Object 122
Transclusion 126
Compile and Link Functions 126
Scopes 128
Manipulating DOM Elements 132
Controllers 133
Table of Contents | v
Moving On 136
7. Other Concerns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
$location 137
HTML5 Mode and Hashbang Mode 140
AngularJS Module Methods 142
Where’s the Main Method? 142
Loading and Dependencies 143
Convenience Methods 144
Communicating Between Scopes with $on, $emit, and $broadcast 146
Cookies 148
Internationalization and Localization 148
What Can I Do in AngularJS? 149
How Do I Get It All Working? 149
Common Gotchas 150
Sanitizing HTML & the Sanitize Module 150
Linky 152
8. Cheatsheet and Recipes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Wrapping a jQuery Datepicker 153
ng-model 155
Binding select 155
Calling select 155
The Rest of the Example 156
The Teams List App: Filtering and Controller Communication 157
The Search Box 161
The Combo Boxes 161
The Check Box 161
The Repeater 161
File Upload in AngularJS 162
Using Socket.IO 164
A Simple Pagination Service 167
Working with Servers and Login 171
Conclusion 174
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
vi | Table of Contents
Preface
I can trace Angular’s beginnings to 2009, on a project called Google Feedback. We’d
gone through months of frustration with our development speed and ability to write
testable code. At around the six month mark, we had around 17,000 lines of front-end
code. At that point, one of the team members, Misko Hevery, made a bold statement
that he’d be able to rewrite the whole thing in two weeks using an open source library
that he’d created as a hobby.
I figured that a two week delay couldn’t hurt us that much and we’d at least be entertained
by Misko scrambling to build something. Misko missed his time estimate. It took three
weeks. We were all astounded, but even more astounding was that the line count for
this new app had dropped from 17,000 to a mere 1,500. It seemed that Misko was onto
something worth pursuing.
Misko and I decided we’d built a team around the concepts he started with a simple
charter: to simplify the web developer’s experience. Shyam Seshadri, this book’s co-
author, went on to lead the Google Feedback team in developing Angular’s first shipping
application.
Since then, we’ve developed Angular with guidance both from teams at Google and
from hundreds of open source contributors around the world. Thousands of developers
rely on Angular in their daily work and contribute to an amazing support network.
We’re excited to learn what you’ll teach us.
Conventions Used in This Book
The following typographical conventions are used in this book:
Italic
Indicates new terms, URLs, email addresses, filenames, and file extensions.
vii
Constant width
Used for program listings, as well as within paragraphs to refer to program elements
such as variable or function names, databases, data types, environment variables,
statements, and keywords.
Constant width bold
Shows commands or other text that should be typed literally by the user.
Constant width italic
Shows text that should be replaced with user-supplied values or by values deter‐
mined by context.
This icon signifies a tip, suggestion, or general note.
This icon indicates a warning or caution.
Using Code Examples
This book is here to help you get your job done. In general, if this book includes code
examples, you may use the code in this book in your programs and documentation. You
do not need to contact us for permission unless you’re reproducing a significant portion
of the code. For example, writing a program that uses several chunks of code from this
book does not require permission. Selling or distributing a CD-ROM of examples from
O’Reilly books does require permission. Answering a question by citing this book and
quoting example code does not require permission. Incorporating a significant amount
of example code from this book into your product’s documentation does require per‐
mission.
We appreciate, but do not require, attribution. An attribution usually includes the title,
author, publisher, and ISBN. For example: “AngularJS by Brad Green and Shyam Se‐
shadri (O’Reilly). Copyright 2013 Brad Green and Shyam Seshadri, 978-1-449-34485-6.”
If you feel your use of code examples falls outside fair use or the permission given above,
feel free to contact us at [email protected].
viii | Preface