Upload
truongnhan
View
223
Download
0
Embed Size (px)
Citation preview
Pro AngularJS
Adam Freeman
Pro AngularJS
Copyright © 2014 by Adam Freeman
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law.
ISBN-13 (pbk): 978-1-4302-6448-4
ISBN-13 (electronic): 978-1-4302-6449-1
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
President and Publisher: Paul ManningLead Editor: James T. DeWolfDevelopment Editor: Douglas PundickTechnical Reviewer: Fabio Claudio FerracchiatiEditorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Louise Corrigan, Jim DeWolf,
Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Steve Weis
Coordinating Editor: Kevin SheaCopy Editor: Kim WimpsettCompositor: SPi GlobalIndexer: SPi GlobalArtist: SPi GlobalCover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected], or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this text is available to readers at www.apress.com. For detailed information about how to locate your book’s source code, go to www.apress.com/source-code/.
Dedicated to my lovely wife, Jacqui Griffyth.
v
Contents at a Glance
About the Author ������������������������������������������������������������������������������������������������������������� xxiii
About the Technical Reviewer ������������������������������������������������������������������������������������������ xxv
Part 1: Getting Ready ■ ������������������������������������������������������������������������������������ 1
Chapter 1: Getting Ready ■ ���������������������������������������������������������������������������������������������������3
Chapter 2: Your First AngularJS App ■ �������������������������������������������������������������������������������15
Chapter 3: Putting AngularJS in Context ■ �������������������������������������������������������������������������45
Chapter 4: HTML and Bootstrap CSS Primer ■ ��������������������������������������������������������������������55
Chapter 5: JavaScript Primer ■ ������������������������������������������������������������������������������������������75
Chapter 6: SportsStore: A Real Application ■ �������������������������������������������������������������������119
Chapter 7: SportsStore: Navigation and Checkout ■ ��������������������������������������������������������149
Chapter 8: SportsStore: Orders and Administration ■ ������������������������������������������������������173
Part 2: Working with AngularJS ■ ��������������������������������������������������������������� 205
Chapter 9: The Anatomy of an AngularJS App ■ ��������������������������������������������������������������207
Chapter 10: Using Binding and Template Directives ■ ������������������������������������������������������233
Chapter 11: Using Element and Event Directives ■ ����������������������������������������������������������263
Chapter 12: Working with Forms ■ �����������������������������������������������������������������������������������285
Chapter 13: Using Controllers and Scopes ■ ��������������������������������������������������������������������319
Chapter 14: Using Filters ■ �����������������������������������������������������������������������������������������������351
Chapter 15: Creating Custom Directives ■ ������������������������������������������������������������������������381
■ Contents at a GlanCe
vi
Chapter 16: Creating Complex Directives ■ ����������������������������������������������������������������������413
Chapter 17: Advanced Directive Features ■ ���������������������������������������������������������������������447
Part 3: AngularJS Services ■ ����������������������������������������������������������������������� 471
Chapter 18: Working with Modules and Services ■ ����������������������������������������������������������473
Chapter 19: Services for Global Objects, Errors, and Expressions ■ ��������������������������������489
Chapter 20: Services for Ajax and Promises ■ �����������������������������������������������������������������523
Chapter 21: Services for REST ■ ���������������������������������������������������������������������������������������551
Chapter 22: Services for Views ■ �������������������������������������������������������������������������������������579
Chapter 23: Services for Animation and Touch ■ �������������������������������������������������������������603
Chapter 24: Services for Provision and Injection ■ ����������������������������������������������������������613
Chapter 25: Unit Testing ■ ������������������������������������������������������������������������������������������������623
Index ���������������������������������������������������������������������������������������������������������������������������������651
vii
Contents
About the Author ��������������������������������������������������������������������������������������������������������������� xxi
About the Technical Reviewer ����������������������������������������������������������������������������������������� xxiii
Part 1: Getting Ready ■ ������������������������������������������������������������������������������������ 1
Chapter 1: Getting Ready ■ ���������������������������������������������������������������������������������������������������3
What Do You Need to Know? ���������������������������������������������������������������������������������������������������������3
What Is the Structure of This Book? ����������������������������������������������������������������������������������������������3
Part 1: Getting Ready ��������������������������������������������������������������������������������������������������������������������������������������������� 4
Part 2: Working with AngularJS ����������������������������������������������������������������������������������������������������������������������������� 4
Part 3: AngularJS Modules and Services ��������������������������������������������������������������������������������������������������������������� 4
Are There Lots of Examples? ���������������������������������������������������������������������������������������������������������4
Where Can You Get the Example Code? ����������������������������������������������������������������������������������������7
How Do You Set Up Your Development Environment? �������������������������������������������������������������������7
Choosing a Web Browser ��������������������������������������������������������������������������������������������������������������������������������������� 8
Choosing a Code Editor������������������������������������������������������������������������������������������������������������������������������������������ 8
Installing Node�js ��������������������������������������������������������������������������������������������������������������������������������������������������� 9
Installing the Web Server ��������������������������������������������������������������������������������������������������������������������������������������� 9
Installing the Test System ������������������������������������������������������������������������������������������������������������������������������������ 10
Creating the AngularJS Directory ������������������������������������������������������������������������������������������������������������������������ 10
Performing a Simple Test ������������������������������������������������������������������������������������������������������������������������������������ 12
Summary �������������������������������������������������������������������������������������������������������������������������������������14
■ Contents
viii
Chapter 2: Your First AngularJS App ■ �������������������������������������������������������������������������������15
Preparing the Project ������������������������������������������������������������������������������������������������������������������15
Using AngularJS ��������������������������������������������������������������������������������������������������������������������������17
Applying AngularJS to the HTML File ������������������������������������������������������������������������������������������������������������������� 17
Creating a Data Model ����������������������������������������������������������������������������������������������������������������������������������������� 20
Creating a Controller �������������������������������������������������������������������������������������������������������������������������������������������� 22
Creating a View ���������������������������������������������������������������������������������������������������������������������������������������������������� 24
Going Beyond the Basics �������������������������������������������������������������������������������������������������������������27
Using Two-Way Model Binding ���������������������������������������������������������������������������������������������������������������������������� 28
Creating and Using Controller Behaviors ������������������������������������������������������������������������������������������������������������� 29
Using Behaviors That Depend on Other Behaviors ���������������������������������������������������������������������������������������������� 32
Responding to User Interaction ��������������������������������������������������������������������������������������������������������������������������� 34
Filtering and Ordering Model Data ����������������������������������������������������������������������������������������������������������������������� 37
Getting the Data via Ajax ������������������������������������������������������������������������������������������������������������������������������������� 41
Summary �������������������������������������������������������������������������������������������������������������������������������������44
Chapter 3: Putting AngularJS in Context ■ �������������������������������������������������������������������������45
Understanding Where AngularJS Excels �������������������������������������������������������������������������������������45
Understanding Round-Trip and Single-Page Applications ����������������������������������������������������������������������������������� 45
Understanding the MVC Pattern ��������������������������������������������������������������������������������������������������47
Understanding Models ����������������������������������������������������������������������������������������������������������������������������������������� 49
Understanding Controllers ����������������������������������������������������������������������������������������������������������������������������������� 50
Understanding Views ������������������������������������������������������������������������������������������������������������������������������������������� 51
Understanding RESTful Services �������������������������������������������������������������������������������������������������51
Common Design Pitfalls ��������������������������������������������������������������������������������������������������������������53
Putting the Logic in the Wrong Place ������������������������������������������������������������������������������������������������������������������� 53
Adopting the Data Store Data Format ������������������������������������������������������������������������������������������������������������������ 54
Clinging to the Old Ways �������������������������������������������������������������������������������������������������������������������������������������� 54
Summary �������������������������������������������������������������������������������������������������������������������������������������54
■ Contents
ix
Chapter 4: HTML and Bootstrap CSS Primer ■ ��������������������������������������������������������������������55
Understanding HTML �������������������������������������������������������������������������������������������������������������������55
Understanding the Anatomy of an HTML Element ����������������������������������������������������������������������������������������������� 57
Understanding Attributes ������������������������������������������������������������������������������������������������������������������������������������� 58
Understanding Element Content �������������������������������������������������������������������������������������������������������������������������� 58
Understanding Void Elements ������������������������������������������������������������������������������������������������������������������������������ 59
Understanding the Document Structure �������������������������������������������������������������������������������������������������������������� 59
Understanding Bootstrap �������������������������������������������������������������������������������������������������������������60
Applying Basic Bootstrap Classes ����������������������������������������������������������������������������������������������������������������������� 62
Using Bootstrap to Style Tables ��������������������������������������������������������������������������������������������������������������������������� 64
Using Bootstrap to Create Forms ������������������������������������������������������������������������������������������������������������������������� 67
Using Bootstrap to Create Grids �������������������������������������������������������������������������������������������������������������������������� 70
Summary �������������������������������������������������������������������������������������������������������������������������������������74
Chapter 5: JavaScript Primer ■ ������������������������������������������������������������������������������������������75
Preparing the Example Project ����������������������������������������������������������������������������������������������������76
Understanding the Script Element ����������������������������������������������������������������������������������������������77
Using Statements ������������������������������������������������������������������������������������������������������������������������78
Defining and Using Functions������������������������������������������������������������������������������������������������������78
Defining Functions with Parameters ������������������������������������������������������������������������������������������������������������������� 79
Defining Functions That Return Results �������������������������������������������������������������������������������������������������������������� 80
Detecting Functions ��������������������������������������������������������������������������������������������������������������������������������������������� 81
Using Variables and Types �����������������������������������������������������������������������������������������������������������83
Using the Primitive Types ������������������������������������������������������������������������������������������������������������������������������������ 83
Creating Objects �������������������������������������������������������������������������������������������������������������������������������������������������� 86
Working with Objects������������������������������������������������������������������������������������������������������������������������������������������� 90
Using JavaScript Operators ���������������������������������������������������������������������������������������������������������95
Using Conditional Statements ����������������������������������������������������������������������������������������������������������������������������� 96
The Equality Operator vs� the Identity Operator ��������������������������������������������������������������������������������������������������� 97
Explicitly Converting Types �������������������������������������������������������������������������������������������������������������������������������� 100
■ Contents
x
Working with Arrays ������������������������������������������������������������������������������������������������������������������103
Using an Array Literal ���������������������������������������������������������������������������������������������������������������������������������������� 103
Detecting an Array ��������������������������������������������������������������������������������������������������������������������������������������������� 104
Reading and Modifying the Contents of an Array ���������������������������������������������������������������������������������������������� 105
Enumerating the Contents of an Array ��������������������������������������������������������������������������������������������������������������� 106
Using the Built-in Array Methods ����������������������������������������������������������������������������������������������������������������������� 107
Comparing undefined and null Values ���������������������������������������������������������������������������������������107
Checking for null or undefined �������������������������������������������������������������������������������������������������������������������������� 109
Working with Promises �������������������������������������������������������������������������������������������������������������111
Working with JSON �������������������������������������������������������������������������������������������������������������������116
Summary �����������������������������������������������������������������������������������������������������������������������������������118
Chapter 6: SportsStore: A Real Application ■ �������������������������������������������������������������������119
Getting Started ��������������������������������������������������������������������������������������������������������������������������120
Preparing the Data �������������������������������������������������������������������������������������������������������������������������������������������� 120
Preparing the Application ���������������������������������������������������������������������������������������������������������������������������������� 124
Displaying the (Fake) Product Data �������������������������������������������������������������������������������������������127
Creating the Controller �������������������������������������������������������������������������������������������������������������������������������������� 127
Displaying the Product Details ��������������������������������������������������������������������������������������������������������������������������� 129
Displaying the Category List ������������������������������������������������������������������������������������������������������132
Creating a List of Categories ����������������������������������������������������������������������������������������������������������������������������� 132
Generating the Category Navigation Links �������������������������������������������������������������������������������������������������������� 133
Selecting the Category �������������������������������������������������������������������������������������������������������������������������������������� 137
Highlighting the Selected Category ������������������������������������������������������������������������������������������������������������������� 140
Adding Pagination ��������������������������������������������������������������������������������������������������������������������������������������������� 142
Summary �����������������������������������������������������������������������������������������������������������������������������������147
Chapter 7: SportsStore: Navigation and Checkout ■ ��������������������������������������������������������149
Preparing the Example Project �������������������������������������������������������������������������������������������������149
Using the Real Product Data������������������������������������������������������������������������������������������������������149
Handling Ajax Errors ������������������������������������������������������������������������������������������������������������������������������������������ 151
■ Contents
xi
Creating Partial Views ���������������������������������������������������������������������������������������������������������������154
Creating the Cart �����������������������������������������������������������������������������������������������������������������������156
Defining the Cart Module and Service ��������������������������������������������������������������������������������������������������������������� 156
Creating a Cart Widget ��������������������������������������������������������������������������������������������������������������������������������������� 158
Adding Product Selection Buttons ��������������������������������������������������������������������������������������������������������������������� 161
Adding URL Navigation ��������������������������������������������������������������������������������������������������������������163
Defining URL Routes ������������������������������������������������������������������������������������������������������������������������������������������ 164
Using URL Routing to Navigate �������������������������������������������������������������������������������������������������������������������������� 166
Starting the Checkout Process ��������������������������������������������������������������������������������������������������168
Applying the Checkout Summary ���������������������������������������������������������������������������������������������������������������������� 170
Summary �����������������������������������������������������������������������������������������������������������������������������������172
Chapter 8: SportsStore: Orders and Administration ■ ������������������������������������������������������173
Preparing the Example Project ��������������������������������������������������������������������������������������������������173
Getting Shipping Details ������������������������������������������������������������������������������������������������������������173
Adding Form Validation �������������������������������������������������������������������������������������������������������������������������������������� 175
Adding the Remaining Form Fields�������������������������������������������������������������������������������������������������������������������� 180
Placing Orders ���������������������������������������������������������������������������������������������������������������������������182
Extending the Deployd Server ��������������������������������������������������������������������������������������������������������������������������� 182
Defining the Controller Behavior ����������������������������������������������������������������������������������������������������������������������� 184
Calling the Controller Behavior ������������������������������������������������������������������������������������������������������������������������� 185
Defining the View ����������������������������������������������������������������������������������������������������������������������������������������������� 185
Making Improvements ���������������������������������������������������������������������������������������������������������������186
Administering the Product Catalog ��������������������������������������������������������������������������������������������187
Preparing Deployd ��������������������������������������������������������������������������������������������������������������������������������������������� 187
Creating the Admin Application�������������������������������������������������������������������������������������������������������������������������� 189
Implementing Authentication ����������������������������������������������������������������������������������������������������������������������������� 191
Defining the Main View and Controller �������������������������������������������������������������������������������������������������������������� 194
Implementing the Orders Feature ���������������������������������������������������������������������������������������������������������������������� 196
Implementing the Products Feature ������������������������������������������������������������������������������������������������������������������ 199
Summary �����������������������������������������������������������������������������������������������������������������������������������204
■ Contents
xii
Part 2: Working with AngularJS ■ ��������������������������������������������������������������� 205
Chapter 9: The Anatomy of an AngularJS App ■ ��������������������������������������������������������������207
Preparing the Example Project ��������������������������������������������������������������������������������������������������208
Working with Modules ���������������������������������������������������������������������������������������������������������������209
Setting the Boundaries of an AngularJS Application ����������������������������������������������������������������������������������������� 209
Using Modules to Define AngularJS Components ���������������������������������������������������������������������210
Defining Controllers ������������������������������������������������������������������������������������������������������������������������������������������� 211
Defining Directives �������������������������������������������������������������������������������������������������������������������������������������������� 217
Defining Filters �������������������������������������������������������������������������������������������������������������������������������������������������� 221
Defining Services����������������������������������������������������������������������������������������������������������������������������������������������� 223
Using Modules to Organize Code�����������������������������������������������������������������������������������������������227
Working with the Module Life Cycle ������������������������������������������������������������������������������������������������������������������ 230
Summary �����������������������������������������������������������������������������������������������������������������������������������231
Chapter 10: Using Binding and Template Directives ■ ������������������������������������������������������233
Why and When to Use Directives �����������������������������������������������������������������������������������������������234
Preparing the Example Project ��������������������������������������������������������������������������������������������������234
Using the Data Binding Directives ���������������������������������������������������������������������������������������������235
Performing One-Way Bindings (and Preventing Them) ������������������������������������������������������������������������������������� 237
Creating Two-Way Data Bindings����������������������������������������������������������������������������������������������������������������������� 240
Using the Template Directives ���������������������������������������������������������������������������������������������������241
Generating Elements Repeatedly����������������������������������������������������������������������������������������������������������������������� 242
Repeating Multiple Top-Level Elements ������������������������������������������������������������������������������������������������������������� 249
Working with Partial Views �������������������������������������������������������������������������������������������������������������������������������� 250
Using the ng-include Directive as an Attribute �������������������������������������������������������������������������������������������������� 254
Conditionally Swapping Elements ��������������������������������������������������������������������������������������������������������������������� 255
Hiding Unprocessed Inline Template Binding Expressions �������������������������������������������������������������������������������� 259
Summary �����������������������������������������������������������������������������������������������������������������������������������261
■ Contents
xiii
Chapter 11: Using Element and Event Directives ■ ����������������������������������������������������������263
Preparing the Example Project ��������������������������������������������������������������������������������������������������264
Using the Element Directives ����������������������������������������������������������������������������������������������������265
Showing, Hiding, and Removing Elements �������������������������������������������������������������������������������������������������������� 265
Managing Classes and CSS ������������������������������������������������������������������������������������������������������������������������������� 271
Handling Events ������������������������������������������������������������������������������������������������������������������������275
Creating a Custom Event Directive �������������������������������������������������������������������������������������������������������������������� 279
Managing Special Attributes �����������������������������������������������������������������������������������������������������280
Managing Boolean Attributes ���������������������������������������������������������������������������������������������������������������������������� 280
Managing Other Attributes ��������������������������������������������������������������������������������������������������������������������������������� 283
Summary �����������������������������������������������������������������������������������������������������������������������������������283
Chapter 12: Working with Forms ■ �����������������������������������������������������������������������������������285
Preparing the Example Project ��������������������������������������������������������������������������������������������������286
Using Form Elements with Two-Way Data Bindings ������������������������������������������������������������������287
Implicitly Creating Model Properties ����������������������������������������������������������������������������������������������������������������� 289
Checking That the Data Model Object Has Been Created ���������������������������������������������������������������������������������� 292
Validating Forms �����������������������������������������������������������������������������������������������������������������������293
Performing Basic Form Validation ��������������������������������������������������������������������������������������������������������������������� 294
Providing Form Validation Feedback �����������������������������������������������������������������������������������������299
Using CSS to Provide Feedback ������������������������������������������������������������������������������������������������������������������������� 299
Using the Special Variables to Provide Feedback ���������������������������������������������������������������������������������������������� 303
Deferring Validation Feedback ��������������������������������������������������������������������������������������������������������������������������� 307
Using the Form Directive Attributes ������������������������������������������������������������������������������������������309
Using Input Elements ����������������������������������������������������������������������������������������������������������������������������������������� 309
Using Text Areas ������������������������������������������������������������������������������������������������������������������������������������������������ 312
Using Select Elements ��������������������������������������������������������������������������������������������������������������������������������������� 313
Summary �����������������������������������������������������������������������������������������������������������������������������������318
■ Contents
xiv
Chapter 13: Using Controllers and Scopes ■ ��������������������������������������������������������������������319
Why and When to Use Controllers and Scopes ��������������������������������������������������������������������������319
Preparing the Example Project ��������������������������������������������������������������������������������������������������320
Understanding the Basics ���������������������������������������������������������������������������������������������������������321
Creating and Applying Controllers ��������������������������������������������������������������������������������������������������������������������� 321
Setting Up the Scope ����������������������������������������������������������������������������������������������������������������������������������������� 322
Modifying the Scope ������������������������������������������������������������������������������������������������������������������������������������������ 324
Organizing Controllers ���������������������������������������������������������������������������������������������������������������325
Using a Monolithic Controller ���������������������������������������������������������������������������������������������������������������������������� 326
Reusing a Controller ������������������������������������������������������������������������������������������������������������������������������������������ 328
Using Controller Inheritance ������������������������������������������������������������������������������������������������������������������������������ 333
Using Multiple Controllers ��������������������������������������������������������������������������������������������������������������������������������� 341
Using Scope-less Controllers ����������������������������������������������������������������������������������������������������343
Explicitly Updating the Scope ����������������������������������������������������������������������������������������������������345
Setting Up jQuery UI ������������������������������������������������������������������������������������������������������������������������������������������ 345
Controlling the Button State ������������������������������������������������������������������������������������������������������������������������������ 347
Counting the Button Clicks �������������������������������������������������������������������������������������������������������������������������������� 348
Summary �����������������������������������������������������������������������������������������������������������������������������������349
Chapter 14: Using Filters ■ �����������������������������������������������������������������������������������������������351
Why and When to Use Filters �����������������������������������������������������������������������������������������������������352
Preparing the Example Project ��������������������������������������������������������������������������������������������������352
Downloading the Localization File ��������������������������������������������������������������������������������������������������������������������� 354
Filtering Single Data Values�������������������������������������������������������������������������������������������������������354
Formatting Currency Values ������������������������������������������������������������������������������������������������������������������������������ 355
Formatting Other Numeric Values���������������������������������������������������������������������������������������������������������������������� 357
Formatting Dates ����������������������������������������������������������������������������������������������������������������������������������������������� 358
Changing String Case ���������������������������������������������������������������������������������������������������������������������������������������� 360
Generating JSON ����������������������������������������������������������������������������������������������������������������������������������������������� 361
Localizing Filter Output �������������������������������������������������������������������������������������������������������������������������������������� 362
■ Contents
xv
Filtering Collections �������������������������������������������������������������������������������������������������������������������364
Limiting the Number of Items ���������������������������������������������������������������������������������������������������������������������������� 365
Selecting Items �������������������������������������������������������������������������������������������������������������������������������������������������� 368
Sorting Items ����������������������������������������������������������������������������������������������������������������������������������������������������� 370
Chaining Filters �������������������������������������������������������������������������������������������������������������������������374
Creating Custom Filters �������������������������������������������������������������������������������������������������������������375
Creating a Filter That Formats a Data Value ������������������������������������������������������������������������������������������������������ 375
Creating a Collection Filter �������������������������������������������������������������������������������������������������������������������������������� 377
Building on Existing Filters �������������������������������������������������������������������������������������������������������������������������������� 379
Summary �����������������������������������������������������������������������������������������������������������������������������������380
Chapter 15: Creating Custom Directives ■ ������������������������������������������������������������������������381
Why and When to Create Custom Directives �����������������������������������������������������������������������������382
Preparing the Example Project ��������������������������������������������������������������������������������������������������382
Creating a Custom Directive ������������������������������������������������������������������������������������������������������383
Defining the Directive ���������������������������������������������������������������������������������������������������������������������������������������� 383
Implementing the Link Function ������������������������������������������������������������������������������������������������������������������������ 385
Breaking the Data Property Dependency ����������������������������������������������������������������������������������������������������������� 388
Handling Data Changes ������������������������������������������������������������������������������������������������������������������������������������� 391
Working with jqLite �������������������������������������������������������������������������������������������������������������������396
Navigating the Document Object Models ���������������������������������������������������������������������������������������������������������� 396
Modifying Elements ������������������������������������������������������������������������������������������������������������������������������������������� 401
Creating and Removing Elements���������������������������������������������������������������������������������������������������������������������� 404
Handling Events ������������������������������������������������������������������������������������������������������������������������������������������������� 407
Other jqLite Methods ����������������������������������������������������������������������������������������������������������������������������������������� 409
Accessing AngularJS Features from jqLite �������������������������������������������������������������������������������������������������������� 409
Replacing jqLite with jQuery �����������������������������������������������������������������������������������������������������410
Summary �����������������������������������������������������������������������������������������������������������������������������������412
■ Contents
xvi
Chapter 16: Creating Complex Directives ■ ����������������������������������������������������������������������413
Preparing the Example Project ��������������������������������������������������������������������������������������������������413
Defining Complex Directives �����������������������������������������������������������������������������������������������������414
Defining How the Directive Can Be Applied ������������������������������������������������������������������������������������������������������� 415
Using Directive Templates ���������������������������������������������������������������������������������������������������������419
Using a Function as a Template ������������������������������������������������������������������������������������������������������������������������� 421
Using an External Template ������������������������������������������������������������������������������������������������������������������������������� 422
Selecting an External Template with a Function������������������������������������������������������������������������������������������������ 423
Replacing the Element ��������������������������������������������������������������������������������������������������������������������������������������� 425
Managing Directive Scopes �������������������������������������������������������������������������������������������������������429
Creating Multiple Controllers ����������������������������������������������������������������������������������������������������������������������������� 431
Giving Each Directive Instance Its Own Scope �������������������������������������������������������������������������������������������������� 432
Creating Isolated Scopes ����������������������������������������������������������������������������������������������������������������������������������� 435
Summary �����������������������������������������������������������������������������������������������������������������������������������445
Chapter 17: Advanced Directive Features ■ ���������������������������������������������������������������������447
Preparing the Example Project ��������������������������������������������������������������������������������������������������447
Using Transclusion ��������������������������������������������������������������������������������������������������������������������448
Using Compile Functions ����������������������������������������������������������������������������������������������������������������������������������� 451
Using Controllers in Directives ��������������������������������������������������������������������������������������������������454
Adding Another Directive ����������������������������������������������������������������������������������������������������������������������������������� 458
Creating Custom Form Elements �����������������������������������������������������������������������������������������������460
Handling External Changes�������������������������������������������������������������������������������������������������������������������������������� 463
Handling Internal Changes �������������������������������������������������������������������������������������������������������������������������������� 464
Formatting Data Values ������������������������������������������������������������������������������������������������������������������������������������� 465
Validating Custom Form Elements ��������������������������������������������������������������������������������������������������������������������� 467
Summary �����������������������������������������������������������������������������������������������������������������������������������470
■ Contents
xvii
Part 3: AngularJS Services ■ ����������������������������������������������������������������������� 471
Chapter 18: Working with Modules and Services ■ ����������������������������������������������������������473
Why and When to Use and Create Services and Modules ���������������������������������������������������������473
Preparing the Example Project ��������������������������������������������������������������������������������������������������474
Using Modules to Structure an Application �������������������������������������������������������������������������������476
Maintaining a Single Module ����������������������������������������������������������������������������������������������������������������������������� 477
Creating a New Module ������������������������������������������������������������������������������������������������������������������������������������� 479
Creating and Using a Service ����������������������������������������������������������������������������������������������������480
Using the Factory Method���������������������������������������������������������������������������������������������������������������������������������� 480
Using the Service Method���������������������������������������������������������������������������������������������������������������������������������� 483
Using the Provider Method �������������������������������������������������������������������������������������������������������������������������������� 485
Using the Built-in Modules and Services ����������������������������������������������������������������������������������487
Summary �����������������������������������������������������������������������������������������������������������������������������������488
Chapter 19: Services for Global Objects, Errors, and Expressions ■ ��������������������������������489
Preparing the Example Project ��������������������������������������������������������������������������������������������������489
Accessing the DOM API Global Objects �������������������������������������������������������������������������������������489
Why and When to Use the Global Object Services ��������������������������������������������������������������������������������������������� 490
Accessing the Window Object ��������������������������������������������������������������������������������������������������������������������������� 490
Accessing the Document Object ������������������������������������������������������������������������������������������������������������������������ 491
Using Intervals and Timeouts ���������������������������������������������������������������������������������������������������������������������������� 492
Accessing the URL ��������������������������������������������������������������������������������������������������������������������������������������������� 493
Performing Logging ������������������������������������������������������������������������������������������������������������������������������������������� 500
Dealing with Exceptions ������������������������������������������������������������������������������������������������������������501
Why and When to Use the Exception Service ���������������������������������������������������������������������������������������������������� 501
Working with Exceptions ����������������������������������������������������������������������������������������������������������������������������������� 502
Working Directly with the Exception Service ����������������������������������������������������������������������������������������������������� 503
Implementing a Custom Exception Handler������������������������������������������������������������������������������������������������������� 504
■ Contents
xviii
Working with Dangerous Data ���������������������������������������������������������������������������������������������������505
Why and When to Use the Dangerous Data Services ���������������������������������������������������������������������������������������� 505
Displaying Dangerous Data ������������������������������������������������������������������������������������������������������������������������������� 505
Using an Unsafe Binding������������������������������������������������������������������������������������������������������������������������������������ 507
Explicitly Trusting Data ������������������������������������������������������������������������������������������������������������������������������������� 510
Working with AngularJS Expressions and Directives ����������������������������������������������������������������511
Why and When to Use the Expression and Directive Services ��������������������������������������������������������������������������� 512
Converting Expressions into Functions �������������������������������������������������������������������������������������������������������������� 512
Interpolating Strings ������������������������������������������������������������������������������������������������������������������������������������������ 516
Compiling Content ��������������������������������������������������������������������������������������������������������������������������������������������� 519
Summary �����������������������������������������������������������������������������������������������������������������������������������521
Chapter 20: Services for Ajax and Promises ■ �����������������������������������������������������������������523
Why and When to Use the Ajax Services �����������������������������������������������������������������������������������524
Preparing the Example Project ��������������������������������������������������������������������������������������������������524
Making Ajax Requests ���������������������������������������������������������������������������������������������������������������524
Making the Ajax Request ����������������������������������������������������������������������������������������������������������������������������������� 527
Receiving Ajax Responses ��������������������������������������������������������������������������������������������������������������������������������� 528
Configuring Ajax Requests ��������������������������������������������������������������������������������������������������������������������������������� 532
Setting Ajax Defaults ����������������������������������������������������������������������������������������������������������������������������������������� 536
Using Ajax Interceptors �������������������������������������������������������������������������������������������������������������������������������������� 538
Working with Promises �������������������������������������������������������������������������������������������������������������540
Getting and Using the Deferred Object �������������������������������������������������������������������������������������������������������������� 541
Consuming the Promise ������������������������������������������������������������������������������������������������������������������������������������ 543
Understanding Why Promises Are Not Regular Events �������������������������������������������������������������������������������������� 545
Chaining Outcomes Together ���������������������������������������������������������������������������������������������������������������������������� 546
Grouping Promises �������������������������������������������������������������������������������������������������������������������������������������������� 547
Summary �����������������������������������������������������������������������������������������������������������������������������������550
■ Contents
xix
Chapter 21: Services for REST ■ ���������������������������������������������������������������������������������������551
Why and When to Use the REST Services ���������������������������������������������������������������������������������551
Preparing the Example Project ��������������������������������������������������������������������������������������������������552
Creating the RESTful Service ����������������������������������������������������������������������������������������������������������������������������� 552
Creating the AngularJS Application ������������������������������������������������������������������������������������������������������������������� 556
Using the $http Service �������������������������������������������������������������������������������������������������������������561
Listing the Product Data ������������������������������������������������������������������������������������������������������������������������������������ 561
Deleting Products ���������������������������������������������������������������������������������������������������������������������������������������������� 564
Creating Products ���������������������������������������������������������������������������������������������������������������������������������������������� 564
Updating Products ��������������������������������������������������������������������������������������������������������������������������������������������� 565
Testing the Ajax Implementation ����������������������������������������������������������������������������������������������������������������������� 565
Hiding the Ajax Requests�����������������������������������������������������������������������������������������������������������565
Installing the ngResource Module ��������������������������������������������������������������������������������������������������������������������� 568
Using the $resource Service ������������������������������������������������������������������������������������������������������������������������������ 569
Configuring the $resource Service Actions ������������������������������������������������������������������������������������������������������� 574
Creating $resource-Ready Components ������������������������������������������������������������������������������������������������������������ 576
Summary �����������������������������������������������������������������������������������������������������������������������������������578
Chapter 22: Services for Views ■ �������������������������������������������������������������������������������������579
Why and When to Use the View Services ����������������������������������������������������������������������������������579
Preparing the Example Project ��������������������������������������������������������������������������������������������������579
Understanding the Problem ������������������������������������������������������������������������������������������������������������������������������� 580
Using URL Routing ���������������������������������������������������������������������������������������������������������������������582
Installing the ngRoute Module ��������������������������������������������������������������������������������������������������������������������������� 582
Defining the URL Routes ������������������������������������������������������������������������������������������������������������������������������������ 583
Displaying the Selected View ���������������������������������������������������������������������������������������������������������������������������� 585
Wiring Up the Code and Markup ������������������������������������������������������������������������������������������������������������������������ 585
Using Route Parameters ������������������������������������������������������������������������������������������������������������590
Accessing Routes and Routes Parameters �������������������������������������������������������������������������������������������������������� 591
■ Contents
xx
Configuring Routes ��������������������������������������������������������������������������������������������������������������������595
Using Controllers with Routes ��������������������������������������������������������������������������������������������������������������������������� 596
Adding Dependencies to Routes ������������������������������������������������������������������������������������������������������������������������ 598
Summary �����������������������������������������������������������������������������������������������������������������������������������602
Chapter 23: Services for Animation and Touch ■ �������������������������������������������������������������603
Preparing the Example Project ��������������������������������������������������������������������������������������������������603
Animating Elements ������������������������������������������������������������������������������������������������������������������603
Why and When to Use the Animation Service ���������������������������������������������������������������������������������������������������� 604
Installing the ngAnimation Module �������������������������������������������������������������������������������������������������������������������� 604
Defining and Applying an Animation ������������������������������������������������������������������������������������������������������������������ 605
Avoiding the Perils of Parallel Animation ����������������������������������������������������������������������������������������������������������� 607
Supporting Touch Events �����������������������������������������������������������������������������������������������������������609
Why and When to Use Touch Events ������������������������������������������������������������������������������������������������������������������ 610
Installing the ngTouch Module ��������������������������������������������������������������������������������������������������������������������������� 610
Handling Swipe Gestures ���������������������������������������������������������������������������������������������������������������������������������� 610
Using the Replacement ng-click Directive �������������������������������������������������������������������������������������������������������� 611
Summary �����������������������������������������������������������������������������������������������������������������������������������611
Chapter 24: Services for Provision and Injection ■ ����������������������������������������������������������613
Why and When to Use the Provision and Injection Services������������������������������������������������������613
Preparing the Example Project ��������������������������������������������������������������������������������������������������613
Registering AngularJS Components ������������������������������������������������������������������������������������������613
Managing Injection ��������������������������������������������������������������������������������������������������������������������616
Determining Function Dependencies����������������������������������������������������������������������������������������������������������������� 616
Obtaining Service Instances ������������������������������������������������������������������������������������������������������������������������������ 619
Simplifying the Invocation Process ������������������������������������������������������������������������������������������������������������������� 620
Getting the $injector Service from the Root Element ���������������������������������������������������������������������������������������� 620
Summary �����������������������������������������������������������������������������������������������������������������������������������621
■ Contents
xxi
Chapter 25: Unit Testing ■ ������������������������������������������������������������������������������������������������623
Why and When to Unit Testing ���������������������������������������������������������������������������������������������������623
Preparing the Example Project ��������������������������������������������������������������������������������������������������624
Installing the ngMocks Module �������������������������������������������������������������������������������������������������������������������������� 624
Creating the Test Configuration ������������������������������������������������������������������������������������������������������������������������� 625
Creating the Example Application ���������������������������������������������������������������������������������������������������������������������� 626
Working with Karma and Jasmine ��������������������������������������������������������������������������������������������628
Running the Tests ���������������������������������������������������������������������������������������������������������������������������������������������� 629
Understanding the Mock Objects ����������������������������������������������������������������������������������������������632
The Test Objects and APIs ���������������������������������������������������������������������������������������������������������������������������������� 632
Testing a Controller �������������������������������������������������������������������������������������������������������������������633
Arranging the Test ��������������������������������������������������������������������������������������������������������������������������������������������� 634
Using the Mock Objects �������������������������������������������������������������������������������������������������������������635
Mocking HTTP Responses ��������������������������������������������������������������������������������������������������������������������������������� 636
Mocking Periods of Time ����������������������������������������������������������������������������������������������������������������������������������� 640
Testing Logging ������������������������������������������������������������������������������������������������������������������������������������������������� 642
Testing Other Components ��������������������������������������������������������������������������������������������������������645
Testing a Filter ��������������������������������������������������������������������������������������������������������������������������������������������������� 645
Testing a Directive ��������������������������������������������������������������������������������������������������������������������������������������������� 646
Testing a Service ����������������������������������������������������������������������������������������������������������������������������������������������� 648
Summary �����������������������������������������������������������������������������������������������������������������������������������650
Index ���������������������������������������������������������������������������������������������������������������������������������651
xxiii
About the Author
Adam Freeman is an experienced IT professional who has held senior positions in a range of companies, most recently serving as chief technology officer and chief operating officer of a global bank. Now retired, he spends his time writing and running.
xxv
About the Technical Reviewer
Fabio Claudio Ferracchiati is a senior consultant and a senior analyst/developer using Microsoft technologies. He works for Brain Force (www.brainforce.com) in its Italian branch (www.brainforce.it). He is a Microsoft Certified Solution Developer for .NET, a Microsoft Certified Application Developer for .NET, a Microsoft Certified Professional, and a prolific author and technical reviewer. Over the past ten years, he’s written articles for Italian and international magazines and coauthored more than ten books on a variety of computer topics.