Shyam Seshadri & Brad Green

301 Pages·2015·2.84 MB·English

AngularJS
Up & Running
■
■
■
ENHANCED PRODUCTIVITY
■ WITH STRUCTURED WEB APPS
■
■
■
■
Shyam Seshadri & Brad Green
AngularJS: Up and Running
“
If want to get started with AngularJS, either as a side project, an additional I'm hardly more than
tool, or for your main work, this practical guide teaches you how to use this an amateur JavaScript
meta-framework step-by-step, from the basics to advanced concepts. By
developer and I had zero
the end of the book, you’ll understand how to develop a large, maintainable,
problems understanding
and performant application with AngularJS.
this book. I appreciate
Guided by two engineers who worked on AngularJS at Google, you’ll
learn the components needed to build data-driven applications, using how it started at the
declarative programming and the Model–view–controller pattern. You’ll very beginning—the
also learn how to conduct unit tests on each part of your application.
why of AngularJS—and
slowly worked its way
■ Learn how to use controllers for moving data to and from views
up from there. The
■ Understand when to use AngularJS services instead of
controllers complimentary code
■ Communicate with the server to store, fetch, and update data repository was a huge
”
asynchronously help as well!
■ Know when to use AngularJS ilters for converting data and —Marc Amos
values to diferent formats frontend developer
■ Implement single-page applications, using ngRoute to select
views and navigation
■ Dive into basic and advanced directives for creating reusable
components
■ Write an end-to-end test on a live version of your entire
application
■ Use best practices, guidelines, and tools throughout the
development cycle
Shyam Seshadri, owner/CEO of Fundoo Solutions in Mumbai, splits his time
between working on innovative and exciting new products for the Indian mar-
kets, and consulting about and running workshops on AngularJS.
Brad Green, an engineering manager at Google, works on the AngularJS project
and directs Accessibility as well as Support Engineering. Brad also worked on the
early mobile web at AvantGo, and founded and sold startups.
PROGRAMMING/JAVASCRIPT Twitter: @oreillymedia
facebook.com/oreilly
US $39.99 CAN $41.99
ISBN: 978-1-491-90194-6
AngularJS: Up And Running
Shyam Seshadri and Brad Green
AngularJS: Up And Running
by Shyam Seshadri and Brad Green
Copyright © 2014 Shyam Seshadri and Brad Green. 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://safaribooksonline.com). For more information, contact our corporate/
institutional sales department: 800-998-9938 or [email protected].
Editors: Simon St. Laurent and Brian MacDonald Indexer: Judy McConville
Production Editor: Kara Ebrahim Cover Designer: Ellie Volckhausen
Copyeditor: Gillian McGarvey Interior Designer: David Futato
Proofreader: Kim Cofer Illustrator: Rebecca Demarest
September 2014: First Edition
Revision History for the First Edition:
2014-09-05: First release
See http://oreilly.com/catalog/errata.csp?isbn=9781491901946 for release details.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly
Media, Inc. AngularJS: Up and Running, 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 trademark
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-491-90194-6
[LSI]
Table of Contents
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
1. Introducing AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Introducing AngularJS 2
What Is MVC (Model-View-Controller)? 2
AngularJS Benefits 3
The AngularJS Philosophy 4
Starting Out with AngularJS 10
What Backend Do I Need? 10
Does My Entire Application Need to Be an AngularJS App? 11
A Basic AngularJS Application 11
AngularJS Hello World 12
Conclusion 13
2. Basic AngularJS Directives and Controllers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
AngularJS Modules 15
Creating Our First Controller 17
Working with and Displaying Arrays 22
More Directives 26
Working with ng-repeat 27
ng-repeat Over an Object 28
Helper Variables in ng-repeat 29
Track by ID 30
ng-repeat Across Multiple HTML Elements 32
Conclusion 34
3. Unit Testing in AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Unit Testing: What and Why? 35
Introduction to Karma 37
iii
Karma Plugins 38
Explaining the Karma Config 39
Generating the Karma Config 41
Jasmine: Spec Style of Testing 42
Jasmine Syntax 42
Useful Jasmine Matchers 43
Writing a Unit Test for Our Controller 44
Running the Unit Test 47
Conclusion 48
4. Forms, Inputs, and Services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Working with ng-model 49
Working with Forms 51
Leverage Data-Binding and Models 52
Form Validation and States 54
Error Handling with Forms 55
Displaying Error Messages 56
Styling Forms and States 58
Nested Forms with ng-form 60
Other Form Controls 62
Textareas 62
Checkboxes 63
Radio Buttons 64
Combo Boxes/Drop-Downs 66
Conclusion 68
5. All About AngularJS Services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
AngularJS Services 69
Why Do We Need AngularJS Services? 70
Services Versus Controllers 72
Dependency Injection in AngularJS 73
Using Built-In AngularJS Services 74
Order of Injection 76
Common AngularJS Services 77
Creating Our Own AngularJS Service 78
Creating a Simple AngularJS Service 78
The Difference Between Factory, Service, and Provider 82
Conclusion 86
6. Server Communication Using $http. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Fetching Data with $http Using GET 87
A Deep Dive into Promises 91
iv | Table of Contents
Propagating Success and Error 93
The $q Service 94
Making POST Requests with $http 94
$http API 96
Configuration 97
Advanced $http 99
Configuring $http Defaults 99
Interceptors 101
Best Practices 104
Conclusion 106
7. Unit Testing Services and XHRs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Dependency Injection in Our Unit Tests 107
State Across Unit Tests 109
Mocking Out Services 111
Spies 113
Unit Testing Server Calls 115
Integration-Level Unit Tests 118
Conclusion 120
8. Working with Filters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
What Are AngularJS Filters? 121
Using AngularJS Filters 122
Common AngularJS Filters 124
Using Filters in Controllers and Services 130
Creating AngularJS Filters 131
Things to Remember About Filters 133
Conclusion 134
9. Unit Testing Filters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
The Filter Under Test 135
Testing the timeAgo Filter 136
Conclusion 138
10. Routing Using ngRoute. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Routing in a Single-Page Application 140
Using ngRoute 141
Routing Options 143
Using Resolves for Pre-Route Checks 146
Using the $routeParams Service 148
Things to Watch Out For 149
A Full AngularJS Routing Example 150
Table of Contents | v
Additional Configuration 160
HTML5 Mode 160
SEO with AngularJS 162
Analytics with AngularJS 163
Alternatives: ui-router 165
Conclusion 166
11. Directives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
What Are Directives? 169
Alternatives to Custom Directives 170
ng-include 170
Limitations of ng-include 173
ng-switch 173
Understanding the Basic Options 175
Creating a Directive 175
Template/Template URL 176
Restrict 179
The link Function 181
Scope 182
Replace 192
Conclusion 194
12. Unit Testing Directives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Steps Involved in Testing a Directive 195
The Stock Widget Directive 196
Setting Up Our Directive Unit Test 197
Other Considerations 201
Conclusion 202
13. Advanced Directives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Life Cycles in AngularJS 203
AngularJS Life Cycle 203
The Digest Cycle 206
Directive Life Cycle 208
Transclusions 208
Basic Transclusion 211
Advanced Transclusion 212
Directive Controllers and require 216
require Options 221
Input Directives with ng-model 222
Custom Validators 226
Compile 228
vi | Table of Contents
Priority and Terminal 234
Third-Party Integration 234
Best Practices 239
Scopes 240
Clean Up and Destroy 240
Watchers 241
$apply (and $digest) 242
Conclusion 242
14. End-to-End Testing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
The Need for Protractor 245
Initial Setup 246
Protractor Configuration 247
An End-to-End Test 248
Considerations 251
Conclusion 254
15. Guidelines and Best Practices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Testing 255
Test-Driven Development 255
Variety of Tests 256
When to Run Tests 257
Project Structure 258
Best Practices 258
Directory Structure 259
Third-Party Libraries 263
Starting Point 264
Build 265
Grunt 265
Serve a Single JavaScript File 266
Minification 267
ng-templates 267
Best Practices 267
General 268
Services 268
Controllers 269
Directives 270
Filters 270
Tools and Libraries 271
Batarang 271
WebStorm 272
Optional Modules 273
Table of Contents | vii
Conclusion 274
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
viii | Table of Contents