If you want to get started with AngularJS, either as a side project, an additional tool, or for your main work, this practical guide teaches you how to use this meta-framework step-by-step, from the basics to advanced concepts. By the end of the book, you’ll understand how to develop a large, maintainable, and performant application with AngularJS.

Guided by two engineers who worked on AngularJS at Google, you’ll learn the components needed to build data-driven applications, using declarative programming and the Model–view–controller pattern. You’ll also learn how to conduct unit tests on each part of your application.

Learn how to use controllers for moving data to and from views
Understand when to use AngularJS services instead of controllers
Communicate with the server to store, fetch, and update data asynchronously
Know when to use AngularJS filters for converting data and values to different formats
Implement single-page applications, using ngRoute to select views and navigation
Dive into basic and advanced directives for creating reusable components
Write an end-to-end test on a live version of your entire application
Use best practices, guidelines, and tools throughout the development cycle

Contents
1. Introducing AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Introducing AngularJS 2
What Is MVC (Model-View-Controller)? 2
AngularJS Benefits 3
The AngularJS Philosophy 4
Starting Out with AngularJS 10
What Backend Do I Need? 10
Does My Entire Application Need to Be an AngularJS App? 11
A Basic AngularJS Application 11
AngularJS Hello World 12
Conclusion 13
2. Basic AngularJS Directives and Controllers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
AngularJS Modules 15
Creating Our First Controller 17
Working with and Displaying Arrays 22
More Directives 26
Working with ng-repeat 27
ng-repeat Over an Object 28
Helper Variables in ng-repeat 29
Track by ID 30
ng-repeat Across Multiple HTML Elements 32
Conclusion 34
3. Unit Testing in AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Unit Testing: What and Why? 35
Introduction to Karma 37

Karma Plugins 38
Explaining the Karma Config 39
Generating the Karma Config 41
Jasmine: Spec Style of Testing 42
Jasmine Syntax 42
Useful Jasmine Matchers 43
Writing a Unit Test for Our Controller 44
Running the Unit Test 47
Conclusion 48
4. Forms, Inputs, and Services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Working with ng-model 49
Working with Forms 51
Leverage Data-Binding and Models 52
Form Validation and States 54
Error Handling with Forms 55
Displaying Error Messages 56
Styling Forms and States 58
Nested Forms with ng-form 60
Other Form Controls 62
Textareas 62
Checkboxes 63
Radio Buttons 64
Combo Boxes/Drop-Downs 66
Conclusion 68
5. All About AngularJS Services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
AngularJS Services 69
Why Do We Need AngularJS Services? 70
Services Versus Controllers 72
Dependency Injection in AngularJS 73
Using Built-In AngularJS Services 74
Order of Injection 76
Common AngularJS Services 77
Creating Our Own AngularJS Service 78
Creating a Simple AngularJS Service 78
The Difference Between Factory, Service, and Provider 82
Conclusion 86
6. Server Communication Using $http. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Fetching Data with $http Using GET 87
A Deep Dive into Promises 91

Propagating Success and Error 93
The $q Service 94
Making POST Requests with $http 94
$http API 96
Configuration 97
Advanced $http 99
Configuring $http Defaults 99
Interceptors 101
Best Practices 104
Conclusion 106
7. Unit Testing Services and XHRs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Dependency Injection in Our Unit Tests 107
State Across Unit Tests 109
Mocking Out Services 111
Spies 113
Unit Testing Server Calls 115
Integration-Level Unit Tests 118
Conclusion 120
8. Working with Filters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
What Are AngularJS Filters? 121
Using AngularJS Filters 122
Common AngularJS Filters 124
Using Filters in Controllers and Services 130
Creating AngularJS Filters 131
Things to Remember About Filters 133
Conclusion 134
9. Unit Testing Filters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
The Filter Under Test 135
Testing the timeAgo Filter 136
Conclusion 138
10. Routing Using ngRoute. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Routing in a Single-Page Application 140
Using ngRoute 141
Routing Options 143
Using Resolves for Pre-Route Checks 146
Using the $routeParams Service 148
Things to Watch Out For 149
A Full AngularJS Routing Example 150

Additional Configuration 160
HTML5 Mode 160
SEO with AngularJS 162
Analytics with AngularJS 163
Alternatives: ui-router 165
Conclusion 166
11. Directives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
What Are Directives? 169
Alternatives to Custom Directives 170
ng-include 170
Limitations of ng-include 173
ng-switch 173
Understanding the Basic Options 175
Creating a Directive 175
Template/Template URL 176
Restrict 179
The link Function 181
Scope 182
Replace 192
Conclusion 194
12. Unit Testing Directives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Steps Involved in Testing a Directive 195
The Stock Widget Directive 196
Setting Up Our Directive Unit Test 197
Other Considerations 201
Conclusion 202
13. Advanced Directives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Life Cycles in AngularJS 203
AngularJS Life Cycle 203
The Digest Cycle 206
Directive Life Cycle 208
Transclusions 208
Basic Transclusion 211
Advanced Transclusion 212
Directive Controllers and require 216
require Options 221
Input Directives with ng-model 222
Custom Validators 226
Compile 228

Priority and Terminal 234
Third-Party Integration 234
Best Practices 239
Scopes 240
Clean Up and Destroy 240
Watchers 241
$apply (and $digest) 242
Conclusion 242
14. End-to-End Testing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
The Need for Protractor 245
Initial Setup 246
Protractor Configuration 247
An End-to-End Test 248
Considerations 251
Conclusion 254
15. Guidelines and Best Practices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Testing 255
Test-Driven Development 255
Variety of Tests 256
When to Run Tests 257
Project Structure 258
Best Practices 258
Directory Structure 259
Third-Party Libraries 263
Starting Point 264
Build 265
Grunt 265
Serve a Single JavaScript File 266
Minification 267
ng-templates 267
Best Practices 267
General 268
Services 268
Controllers 269
Directives 270
Filters 270
Tools and Libraries 271
Batarang 271
WebStorm 272
Optional Modules 273

Conclusion 274
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275