Tải bản đầy đủ

AngularJS novice to ninja

www.it-ebooks.info


Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
1. Falling In Love With AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2. Modules, Controllers & Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3. AngularJS Scope & Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4. Multiple Views and Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
5. AngularJS Services, Factories, and Providers . . . . . . . . . . . . . . . . . . . . . . . . . 99
6. Developing Single Page Blogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
7. Understanding AngularJS Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
8. Interacting with REST APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
9. Using REST APIs in Single Page Blogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
10. AngularJS Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
11. Adding a Comment System to Single Page Blogger . . . . . . . . . . . . . . . . . 219
12. Dependency Injection In AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
13. AngularJS Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
14. AngularJS Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
15. Deployment and Internationalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
16. Authentication and Authorization in AngularJS . . . . . . . . . . . . . . . . . . . . 271


www.it-ebooks.info


www.it-ebooks.info


ANGULARJS:
NOVICE TO
NINJA
BY SANDEEP PANDA

www.it-ebooks.info


iv

AngularJS: Novice to Ninja
by Sandeep Panda
Copyright © 2014 SitePoint Pty. Ltd.
Product Manager: Simon Mackie

English Editor: Paul Fitzpatrick

Technical Editor: Golo Roden

Cover Designer: Alex Walker

Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case
of brief quotations embodied in critical articles or reviews.

Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein.
However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any
damages to be caused either directly or indirectly by the instructions contained in this book, or by the
software or hardware products described herein.


Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only
in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of
the trademark.

Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood
VIC Australia 3066
Web: www.sitepoint.com
Email: business@sitepoint.com
ISBN 978-0-9922794-5-5 (print)
ISBN 978-0-9924612-6-3 (ebook)
Printed and bound in the United States of America

www.it-ebooks.info


v
About Sandeep Panda
Sandeep Panda is a web developer and writer with a passion for JavaScript and HTML5. He
has over four years' experience programming for the Web. He loves experimenting with new
technologies as they emerge and is a continuous learner. While not programming, Sandeep
can be found playing games and listening to music.

About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles,
and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile
development, design, and more.

www.it-ebooks.info


www.it-ebooks.info


To my Mom and Dad who taught
me to love books. It's not possible
to thank you adequately for
everything you have done for me.
To my grandparents for their
strong support. To my brother
Preetish for being a constant
source of inspiration. And to my
awesome friends Ipseeta and
Fazle for always believing in me.

www.it-ebooks.info


www.it-ebooks.info


Table of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

xvii

Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Want to Take Your Learning Further? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx

Chapter 1

Falling In Love With AngularJS . . . . . 1

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

www.it-ebooks.info


x

Chapter 2

Modules, Controllers & Data
Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

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

Chapter 3

AngularJS Scope & Events . . . . . . . . . . . . 45

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

www.it-ebooks.info


xi
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

Chapter 4

Multiple Views and Routing . . . . . . . . . 71

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

Chapter 5

AngularJS Services, Factories, and
Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

99

Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

www.it-ebooks.info


xii
Eager Loading of a Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Factory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Constant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Using Decorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 6

103
103
105
108
109
109
112

Developing Single Page Blogger . . . 113

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

Chapter 7

Understanding AngularJS
Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

129

AngularJS Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
and