Contents
The Power Features of AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Download and Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Installing via CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Hosting on Your Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Required Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
AngularJS Batarang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
The Angular Seed Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
The Anatomy of an AngularJS app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
What is MVW? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Structuring Our Code With MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Unit and End-to-End Testing in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Where to Put Your Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
How to Run Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
When Not To Use AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Creating Our First Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Modular Programming Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The Role of a Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Attaching Properties and Functions to Scope . . . . . . . . . . . . . . . . . . . . . . . . 30
Adding Logic to the Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Adding Instance Functions and Properties to Controllers . . . . . . . . . . . . . . . . 35
Dependency Injection in Controllers With Minification . . . . . . . . . . . . . . . . . . 37
Overview of Two-Way Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
What Is Data Binding? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Two-Way Binding in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Doing Something Cool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Introducing Our Demo Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
The Single Page Blogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Getting Ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Scope Demystified . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Writing Access with Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Objects Can Extend Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Prototypal Inheritance in AngularJS Scopes . . . . . . . . . . . . . . . . . . . . . . . . 49
Advanced Scope Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
The Watchers in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
The $watchCollection() Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
The $apply() Function and the $digest Loop . . . . . . . . . . . . . . . . . . . . . . . 57
$apply and $digest in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Broadcasting & Emitting Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
$scope.$emit(name,args) For Emitting Events . . . . . . . . . . . . . . . . . . . . . . 64
$scope.$broadcast(name,args) For Broadcasting Events . . . . . . . . . . . . . . . 65
$scope.$on(name,handlerFunction) For Registering Listeners . . . . . . . . . . . 65
Events in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
The $destroy event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Creating Multiple Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Using $routeParams in the Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Using ng-template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
The resolve Property in the Route Config Object . . . . . . . . . . . . . . . . . . . . 83
Exploring the $location Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
The API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Events in Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
$location related events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
$route related events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
The ng-include Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Introducing the Angular UI Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Getting Started With UI Routter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Defining States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Eager Loading of a Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Factory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Constant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Using Decorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Developing Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Defining Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Creating Our Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Creating the Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Creating the Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
App Entry Point (index.html) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
How About Some Unit Tests? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Unit Testing postService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Unit Testing Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Writing an End-to-End (e2e) Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
AngularJS Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
<input> and <textarea> controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
<select> control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
Radio Button Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133
Checkbox Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
AngularJS Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Applying Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Updating Models With a Twist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142
Forms in Action : Single Page Blogger v1.1 . . . . . . . . . . . . . . . . . . . . . . . . . .143
Creating the admin Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .143
Defining States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Creating Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Admin Panel Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Template For Adding a New Post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .150
A Primer on Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
The Promise API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153
Example Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155
Promise Chaining . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Creating a Promise that Always Rejects . . . . . . . . . . . . . . . . . . . . . . . . . . . .159
Understanding the $http Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
The config Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
A Weather Search Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Setting Request Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Request and Response Transformers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166
Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168
Interceptors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Understanding AngularJS $resource . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171
Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
How Does $resource Work? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Applying $resource to Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179
Defining Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Defining Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Including angular-resource.js and Adding the ngResource Module . . . . . . . . . 187
Unit Testing Our Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
What Are Directives, Really? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Directives From the jQuery Perspective . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Creating Custom Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194
The Link Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
The Compile Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Compilation of Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Changing a Directive’s Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Binding Between Parent Scope and Isolated Scope Models . . . . . . . . . . . . . . 207
Using @ For One-Way Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Using = For Two-Way Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Using & to Execute Functions in the Parent Scope . . . . . . . . . . . . . . . . . . . . 209
Parent Scope vs. Child Scope vs. Isolated Scope . . . . . . . . . . . . . . . . . . . . . .212
Transclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Differences Between transclude:'element' and transclude:true . . . . . . . . . . . .213
The Controller Function and Require . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214
Cleaning Up Your Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
IE 8 Precautions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218
Unit Testing Our Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
A Brief Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
The $provide Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226
The $injector Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Dynamically Injecting a Dependency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230
Registration of Controllers, Filters, and Directives . . . . . . . . . . . . . . . . . . . . .230
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Filter Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Fun with Custom Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235
Chaining Multiple Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Using Filters in Controllers, Services, and Directives . . . . . . . . . . . . . . . . . . 236
Meet a Filter Called filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .237
Meet the orderBy Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .240
Meet the limitTo Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Using the $filter Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Using Filters in Single Page Blogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .241
Permalink Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Wordcount Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Animation with CSS3 Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Going Further . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Animation Using Keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Animation Using jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Animation Using ngClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252
Animation with Custom Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Adding Simple Animation to Single Page Blogger . . . . . . . . . . . . . . . . . . . . .257
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258
Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .259
Internationalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Adding Login Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .272
Authorization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Where To Go Next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281
Things to Do Now . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281
Improving Our Demo App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Host it Yourself : Back-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283
Preface
AngularJS is an open source JavaScript framework that lets you create amazing AJAX-based web apps. Generally, the complexity involved in building large-scale and complex AJAX apps is tremendous. AngularJS aims to minimize this complexity by offering a great environment for development, as well as the means to test your apps.
As a client-sideMVW(Model-View-Whatever) framework, one of the most powerful features of AngularJS is its ability to bring structure to your web apps. Another nice thing about AngularJS is that it extends the HTML vocabulary to make it suitable for building web apps, enabling you to create them declaratively; the resulting code is clean and very readable.
AngularJS ships with many great features out of the box, which you'll use in your day-to-day programming. It supports two-way data binding, nice templating, easy REST interaction, custom component creation, multiple views, routing, and much more. AngularJS also plays well with other libraries and frameworks. For example, you can combine jQuery and AngularJS together to create awesome web applications.
AngularJS also demands no commitment. You can include Angular in your web page and use as many features as you like. If you need only the two-way data binding, but no REST interaction, you can employ that feature alone.
AngularJS favors Test Driven Development very much, and features great support for both unit and end-to-end testing. But it also takes debugging very seriously. In 2012, the AngularJS team released a Chrome plugin called Batarang which makes the debugging process a breeze. As a result, the products you develop with AngularJS are very robust and maintainable.
For these reasons (and many more that we'll discuss during the course of this book), AngularJS is one of the top choices when it comes to Single Page App development. You're going to enjoy working with AngularJS!
Who Should Read This Book
This book is suitable for intermediate level web designers and developers. Experience of HTML, CSS, and JavaScript is assumed.
