26
Pro AngularJS Adam Freeman

Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

Embed Size (px)

Citation preview

Page 1: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

Pro AngularJS

Adam Freeman

Page 2: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

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/.

Page 3: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

Dedicated to my lovely wife, Jacqui Griffyth.

Page 4: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15
Page 5: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

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

Page 6: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 7: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

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

Page 8: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 9: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 10: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 11: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 12: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 13: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 14: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 15: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 16: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 17: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 18: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 19: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 20: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 21: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

■ 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

Page 22: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15
Page 23: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

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.

Page 24: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15
Page 25: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15

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.

Page 26: Pro AngularJS - Springer978-1-4302-6449-1/1.pdf · Contents viii Chapter 2: Your First AngularJS App 15 Preparing the Project 15