recipes-with-angular-js.pdf

(974 KB) Pobierz
Recipes with Angular.js
Practical concepts and techniques for rapid web
application development
Frederik Dietz
This book is for sale at
http://leanpub.com/recipes-with-angular-js
This version was published on 2013-07-01
This is a
Leanpub
book. Leanpub empowers authors and publishers with the Lean Publishing
process.
Lean Publishing
is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
©Frederik Dietz 2013
Tweet This Book!
Please help Frederik Dietz by spreading the word about this book on
Twitter!
The suggested hashtag for this book is
#recipeswithangularjs.
Find out what other people are saying about the book by clicking on this link to search for this
hashtag on Twitter:
https://twitter.com/search/#recipeswithangularjs
Contents
Preface
. . . . . . . .
Introduction . . . .
Code Examples . .
How to contact me
Acknowledgements
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1
1
1
1
1
2
2
3
4
5
6
8
8
9
10
11
12
14
16
18
18
19
21
22
23
26
27
29
34
34
An Introduction to Angular.js
. . . . . . . . . . . . . . .
Including the Angular.js Library Code in an HTML Page
Binding a Text Input to an Expression . . . . . . . . . .
Responding to Click Events using Controllers . . . . . .
Converting Expression Output with Filters . . . . . . .
Creating Custom HTML Elements with Directives . . .
Controllers
. . . . . . . . . . . . . . . . . . . . . . . . . .
Assigning a Default Value to a Model . . . . . . . . . .
Changing a Model Value with a Controller Function . .
Encapsulating a Model Value with a Controller Function
Responding to Scope Changes . . . . . . . . . . . . . .
Sharing Models Between Nested Controllers . . . . . .
Sharing Code Between Controllers using Services . . .
Testing Controllers . . . . . . . . . . . . . . . . . . . .
Directives
. . . . . . . . . . . . . . . . . . . . . . . . . . .
Enabling/Disabling DOM Elements Conditionally . . .
Changing the DOM in Response to User Actions . . . .
Rendering an HTML Snippet in a Directive . . . . . . .
Rendering a Directive’s DOM Node Children . . . . . .
Passing Configuration Params Using HTML Attributes .
Repeatedly Rendering Directive’s DOM Node Children
Directive-to-Directive Communication . . . . . . . . .
Testing Directives . . . . . . . . . . . . . . . . . . . . .
Filters
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Formatting a String With a Currency Filter . . . . . . . . . . . . . . . . . . . . . . . . . .
CONTENTS
Implementing a Custom Filter to Reverse an Input String
Passing Configuration Params to Filters . . . . . . . . . .
Filtering a List of DOM Nodes . . . . . . . . . . . . . . .
Chaining Filters together . . . . . . . . . . . . . . . . . .
Testing Filters . . . . . . . . . . . . . . . . . . . . . . . .
Consuming Externals Services
. . .
Requesting JSON Data with AJAX
Consuming RESTful APIs . . . . .
Consuming JSONP APIs . . . . .
Deferred and Promise . . . . . . .
Testing Services . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
35
36
37
38
39
40
40
41
44
46
48
51
51
53
56
57
59
59
60
62
63
65
66
68
68
70
73
76
78
80
82
83
87
87
89
91
94
94
URLs, Routing and Partials
. . . . . . . . . . . . . . . . . . . . .
Client-Side Routing with Hashbang URLs . . . . . . . . . . . .
Using Regular URLs with the HTML5 History API . . . . . . .
Using Route Location to Implement a Navigation Menu . . . .
Listening on Route Changes to Implement a Login Mechanism
Using Forms
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Implementing a Basic Form . . . . . . . . . . . . . . . . . . . . . . . . . .
Validating a Form Model Client-Side . . . . . . . . . . . . . . . . . . . . .
Displaying Form Validation Errors . . . . . . . . . . . . . . . . . . . . . .
Displaying Form Validation Errors with the Twitter Bootstrap framework
Only Enabling the Submit Button if the Form is Valid . . . . . . . . . . .
Implementing Custom Validations . . . . . . . . . . . . . . . . . . . . . .
Common User Interface Patterns
. . . . . . . . . . .
Filtering and Sorting a List . . . . . . . . . . . . . .
Paginating Through Client-Side Data . . . . . . . .
Paginating Through Server-Side Data . . . . . . . .
Paginating Using Infinite Results . . . . . . . . . . .
Displaying a Flash Notice/Failure Message . . . . .
Editing Text In-Place using HTML5 ContentEditable
Displaying a Modal Dialog . . . . . . . . . . . . . .
Displaying a Loading Spinner . . . . . . . . . . . .
Backend Integration with Ruby on Rails
Consuming REST APIs . . . . . . . . .
Implementing Client-Side Routing . . .
Validating Forms Server-Side . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Backend Integration with Node Express
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
Consuming REST APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zgłoś jeśli naruszono regulamin