Contents
The Story behind the Succinctly Series of Books ................................................................................. 13
About the Author ............................................................................................................................. 15
Preface ........................................................................................................................................... 16
Introduction .................................................................................................................................... 16
Code Examples ................................................................................................................................ 16
How to Contact Me .......................................................................................................................... 16
Acknowledgements .......................................................................................................................... 16
Including the Angular.js Library Code in an HTML Page ...................................................................... 17
Problem........................................................................................................................................... 17
Solution .......................................................................................................................................... 17
Discussion ...................................................................................................................................... 17
Binding a Text Input to an Expression .............................................................................................. 18
Problem.......................................................................................................................................... 18
Solution ......................................................................................................................................... 18
Discussion ..................................................................................................................................... 18
Responding to Click Events using Controllers .................................................................................... 19
Problem.......................................................................................................................................... 19
Solution ......................................................................................................................................... 19
Discussion ..................................................................................................................................... 20
Converting Expression Output with Filters ........................................................................................ 20
Problem.......................................................................................................................................... 20
Solution ......................................................................................................................................... 20
Discussion ..................................................................................................................................... 21
Creating Custom HTML Elements with Directives .............................................................................. 21
Problem.......................................................................................................................................... 21
Solution ......................................................................................................................................... 21
Discussion ..................................................................................................................................... 22
Assigning a Default Value to a Model .............................................................................................. 23
Problem......................................................................................................................................... 23
Solution ........................................................................................................................................ 23
Discussion .................................................................................................................................... 23
Changing a Model Value with a Controller Function ......................................................................... 24
Problem........................................................................................................................................ 24
Solution ....................................................................................................................................... 24
Discussion .................................................................................................................................... 24
Encapsulating a Model Value with a Controller Function ................................................................... 25
Problem........................................................................................................................................ 25
Solution ....................................................................................................................................... 25
Discussion .................................................................................................................................... 25
Responding to Scope Changes ....................................................................................................... 26
Problem........................................................................................................................................ 26
Solution ....................................................................................................................................... 26
Discussion .................................................................................................................................... 26
Sharing Models between Nested Controllers ................................................................................... 27
Problem....................................................................................................................................... 27
Solution ...................................................................................................................................... 27
Discussion ................................................................................................................................... 28
Sharing Code between Controllers using Services ........................................................................... 28
Problem....................................................................................................................................... 28
Solution ...................................................................................................................................... 29
Discussion ................................................................................................................................... 29
Testing Controllers ....................................................................................................................... 30
Problem....................................................................................................................................... 30
Solution ...................................................................................................................................... 30
Discussion ................................................................................................................................... 31
Enabling/Disabling DOM Elements Conditionally .............................................................................. 32
Problem........................................................................................................................................ 32
Solution ....................................................................................................................................... 32
Discussion .................................................................................................................................... 32
Changing the DOM in Response to User Actions .............................................................................. 33
Problem........................................................................................................................................ 33
Solution ....................................................................................................................................... 33
Discussion .................................................................................................................................... 33
Rendering an HTML Snippet in a Directive ...................................................................................... 35
Problem........................................................................................................................................ 35
Solution ....................................................................................................................................... 35
Discussion .................................................................................................................................... 35
Rendering a Directive's DOM Node Children .................................................................................... 36
Problem........................................................................................................................................ 36
Solution ....................................................................................................................................... 36
Discussion .................................................................................................................................... 37
Passing Configuration Params Using HTML Attributes ...................................................................... 37
Problem........................................................................................................................................ 37
Solution ....................................................................................................................................... 37
Discussion .................................................................................................................................... 37
Repeatedly Rendering Directive's DOM Node Children ..................................................................... 39
Problem........................................................................................................................................ 39
Solution ....................................................................................................................................... 39
Discussion .................................................................................................................................... 40
Directive-to-Directive Communication ............................................................................................. 41
Problem........................................................................................................................................ 41
Solution ....................................................................................................................................... 41
Discussion .................................................................................................................................... 43
Testing Directives ......................................................................................................................... 43
Problem........................................................................................................................................ 43
Solution ....................................................................................................................................... 45
Discussion .................................................................................................................................... 47
Formatting a String with a Currency Filter ....................................................................................... 48
Problem........................................................................................................................................ 48
Solution ....................................................................................................................................... 48
Discussion .................................................................................................................................... 48
Implementing a Custom Filter to Revert an Input String .................................................................. 49
Problem........................................................................................................................................ 49
Solution ....................................................................................................................................... 49
Discussion .................................................................................................................................... 49
Passing Configuration Params to Filters .......................................................................................... 49
Problem........................................................................................................................................ 49
Solution ....................................................................................................................................... 50
Discussion .................................................................................................................................... 50
Filtering a List of DOM Nodes ......................................................................................................... 50
Problem......................................................................................................................................... 50
Solution ........................................................................................................................................ 50
Discussion .................................................................................................................................... 51
Chaining Filters Together................................................................................................................ 51
Problem......................................................................................................................................... 51
Solution ........................................................................................................................................ 51
Discussion .................................................................................................................................... 52
Testing Filters ............................................................................................................................... 52
Problem........................................................................................................................................ 52
Solution ....................................................................................................................................... 52
Discussion .................................................................................................................................... 53
Requesting JSON Data with AJAX .................................................................................................. 54
Problem....................................................................................................................................... 54
Solution ...................................................................................................................................... 54
Discussion ................................................................................................................................... 55
Consuming RESTful APIs .............................................................................................................. 55
Problem....................................................................................................................................... 55
Solution ...................................................................................................................................... 55
Discussion ................................................................................................................................... 57
Consuming JSONP APIs ................................................................................................................ 58
Problem....................................................................................................................................... 58
Solution ...................................................................................................................................... 58
Discussion ................................................................................................................................... 59
Deferred and Promise .................................................................................................................. 59
Problem....................................................................................................................................... 59
Solution ...................................................................................................................................... 60
Discussion ................................................................................................................................... 60
Testing Services .......................................................................................................................... 62
Problem....................................................................................................................................... 62
Solution ...................................................................................................................................... 62
Discussion ................................................................................................................................... 63
Client-Side Routing with Hashbang URLs ....................................................................................... 64
Problem....................................................................................................................................... 64
Solution ...................................................................................................................................... 64
Discussion ................................................................................................................................... 65
Using Regular URLs with the HTML 5 History API ........................................................................... 66
Problem....................................................................................................................................... 66
Solution ...................................................................................................................................... 66
Discussion ................................................................................................................................... 68
Using Route Location to Implement a Navigation Menu .................................................................. 69
Problem....................................................................................................................................... 69
Solution ...................................................................................................................................... 69
Discussion ................................................................................................................................... 69
Listening on Route Changes to Implement a Login Mechanism ........................................................ 70
Problem....................................................................................................................................... 70
Solution ...................................................................................................................................... 70
Discussion ................................................................................................................................... 71
Implementing a Basic Form .......................................................................................................... 72
Problem....................................................................................................................................... 72
Solution ...................................................................................................................................... 72
Discussion ................................................................................................................................... 73
Validating a Form Model Client-Side .............................................................................................. 73
Problem....................................................................................................................................... 73
Solution ...................................................................................................................................... 73
Discussion ................................................................................................................................... 74
Displaying Form Validation Errors .................................................................................................. 75
Problem....................................................................................................................................... 75
Solution ...................................................................................................................................... 75
Discussion ................................................................................................................................... 76
Displaying Form Validation Errors with the Twitter Bootstrap Framework ......................................... 76
Problem....................................................................................................................................... 76
Solution ...................................................................................................................................... 76
Discussion ................................................................................................................................... 78
Only Enabling the Submit Button if the Form is Valid ...................................................................... 78
Problem....................................................................................................................................... 78
Solution ...................................................................................................................................... 78
Discussion ................................................................................................................................... 78
Implementing Custom Validations ................................................................................................. 78
Problem....................................................................................................................................... 78
Solution ...................................................................................................................................... 79
Discussion ................................................................................................................................... 79
Filtering and Sorting a List ............................................................................................................ 80
Problem....................................................................................................................................... 80
Solution ...................................................................................................................................... 80
Discussion ................................................................................................................................... 81
Pagination through Client-Side Data .............................................................................................. 81
Problem....................................................................................................................................... 81
Solution ...................................................................................................................................... 81
Discussion ................................................................................................................................... 83
Pagination through Server-Side Data ............................................................................................. 84
Problem....................................................................................................................................... 84
Solution ...................................................................................................................................... 84
Discussion ................................................................................................................................... 86
Pagination Using Infinite Results ................................................................................................... 87
Problem....................................................................................................................................... 87
Solution ...................................................................................................................................... 87
Discussion ................................................................................................................................... 88
Displaying a Flash Notice/Failure Message ..................................................................................... 88
Problem....................................................................................................................................... 88
Solution ...................................................................................................................................... 89
Discussion ................................................................................................................................... 91
Editing Text InPlace Using HTML 5 ContentEditable ........................................................................ 91
Problem....................................................................................................................................... 91
Solution ...................................................................................................................................... 91
Discussion ................................................................................................................................... 92
Displaying a Modal Dialog ............................................................................................................. 92
Problem....................................................................................................................................... 92
Solution ...................................................................................................................................... 93
Discussion ................................................................................................................................... 94
Displaying a Loading Spinner ........................................................................................................ 94
Problem....................................................................................................................................... 94
Solution ...................................................................................................................................... 94
Discussion ................................................................................................................................... 96
Consuming REST APIs .................................................................................................................. 97
Problem....................................................................................................................................... 97
Solution ...................................................................................................................................... 97
Discussion ................................................................................................................................... 98
Implementing Client-Side Routing ................................................................................................. 99
Problem....................................................................................................................................... 99
Solution ...................................................................................................................................... 99
Discussion .................................................................................................................................. 100
Validating Forms Server-Side ....................................................................................................... 101
Problem...................................................................................................................................... 101
Solution ..................................................................................................................................... 101
Discussion .................................................................................................................................. 103
Consuming REST APIs ................................................................................................................. 104
Problem...................................................................................................................................... 104
Solution ..................................................................................................................................... 104
Discussion .................................................................................................................................. 106
Implementing Client-Side Routing ................................................................................................ 106
Problem...................................................................................................................................... 106
Solution ..................................................................................................................................... 106
Discussion .................................................................................................................................. 108
Preface
Introduction
Angular.js is an open-source JavaScript framework developed by Google. It gives JavaScript developers a highly-structured approach to developing rich, browser-based applications which leads to very high productivity.
If you are using Angular.js or considering it, this cookbook provides easy-to-follow recipes for issues you are likely to face. Each recipe solves a specific problem and provides a solution and in-depth discussion of it.
Code Examples
All code examples in this book can be found on GitHub.
Discussion
Using the ng-controller directive, we bind the div element, including its children, to the context of the MyCtrl controller. The ng-click directive will call the toggle() function of our controller on button click. Note that the ng-show directive is bound to the visible scope variable and will toggle the paragraph's visibility accordingly.
The controller implementation defaults the visible attribute to true and toggles its Boolean state in the toggle function. Both the visible variable and the toggle function are defined on the $scope service, which is passed to all controller functions automatically via dependency injection.
The next chapter will go into all the details of controllers in Angular. For now, let us quickly discuss the Model-View-ViewModel (MVVM) pattern as used by Angular. In the MVVM pattern, the model is plain JavaScript, the view is the HTML template, and the ViewModel is the glue between the template and the model. The ViewModel makes Angular's two-way binding possible where changes in the model or the template are in sync automatically.
In our example, the visible attribute is the model, but it could of course be much more complex when, for example, retrieving data from a backend service. The controller is used to define the scope which represents the ViewModel. It interacts with the HTML template by binding the scope variable visible and the function toggle() to it.
Converting Expression Output with Filters
Problem
When presenting data to the user, you might need to convert the data to a more user-friendly format. In our case, we want to uppercase the name value from the previous recipe in the expression.
Solution
Use the uppercase Angular filter:
....
