AngularJS: Novice To Ninja - Programmer Books
www.it-ebooks.info
Summary of ContentsPreface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii1. Falling In Love With AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12. Modules, Controllers & Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233. AngularJS Scope & Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454. Multiple Views and Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715. AngularJS Services, Factories, and Providers . . . . . . . . . . . . . . . . . . . . . . . . . 996. Developing Single Page Blogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1137. Understanding AngularJS Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1298. Interacting with REST APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1519. Using REST APIs in Single Page Blogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17910. AngularJS Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19311. Adding a Comment System to Single Page Blogger . . . . . . . . . . . . . . . . . 21912. Dependency Injection In AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22513. AngularJS Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23314. AngularJS Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24515. Deployment and Internationalization . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25916. Authentication and Authorization in AngularJS . . . . . . . . . . . . . . . . . . . . 271www.it-ebooks.info
www.it-ebooks.info
ANGULARJS:NOVICE TONINJABY SANDEEP PANDAwww.it-ebooks.info
ivAngularJS: Novice to Ninjaby Sandeep PandaCopyright 2014 SitePoint Pty. Ltd.Product Manager: Simon MackieEnglish Editor: Paul FitzpatrickTechnical Editor: Golo RodenCover Designer: Alex WalkerNotice of RightsAll rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmittedin any form or by any means, without the prior written permission of the publisher, except in the caseof brief quotations embodied in critical articles or reviews.Notice of LiabilityThe 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 anydamages to be caused either directly or indirectly by the instructions contained in this book, or by thesoftware or hardware products described herein.Trademark NoticeRather than indicating every occurrence of a trademarked name as such, this book uses the names onlyin an editorial fashion and to the benefit of the trademark owner with no intention of infringement ofthe trademark.Published by SitePoint Pty. Ltd.48 Cambridge Street CollingwoodVIC Australia 3066Web: www.sitepoint.comEmail: business@sitepoint.comISBN 978-0-9922794-5-5 (print)ISBN 978-0-9924612-6-3 (ebook)Printed and bound in the United States of Americawww.it-ebooks.info
vAbout Sandeep PandaSandeep Panda is a web developer and writer with a passion for JavaScript and HTML5. Hehas over four years' experience programming for the Web. He loves experimenting with newtechnologies as they emerge and is a continuous learner. While not programming, Sandeepcan be found playing games and listening to music.About SitePointSitePoint specializes in publishing fun, practical, and easy-to-understand content for webprofessionals. 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, mobiledevelopment, design, and more.www.it-ebooks.info
www.it-ebooks.info
To my Mom and Dad who taughtme to love books. It's not possibleto thank you adequately foreverything you have done for me.To my grandparents for theirstrong support. To my brotherPreetish for being a constantsource of inspiration. And to myawesome friends Ipseeta andFazle for always believing in me.www.it-ebooks.info
www.it-ebooks.info
Table of ContentsPreface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xviiWho Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviiConventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviiiCode Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviiiTips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xixSupplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xixWant to Take Your Learning Further? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxChapter 1Falling In Love With AngularJS . . . . . 1The Power Features of AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Download and Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Installing via CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Hosting on Your Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Required Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7AngularJS Batarang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8The Angular Seed Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9The Anatomy of an AngularJS app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10What is MVW? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Structuring Our Code With MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Unit and End-to-End Testing in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . 17Where to Put Your Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19How to Run Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19When Not To Use AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21www.it-ebooks.info
xChapter 2Modules, Controllers & DataBinding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23Creating Our First Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Modular Programming Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30The Role of a Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Attaching Properties and Functions to Scope . . . . . . . . . . . . . . . . . . 30Adding Logic to the Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Adding Instance Functions and Properties to Controllers . . . . . . . . 35Dependency Injection in Controllers With Minification . . . . . . . . . 37Overview of Two-Way Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38What Is Data Binding? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Two-Way Binding in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Doing Something Cool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Introducing Our Demo Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42The Single Page Blogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Getting Ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44Chapter 3AngularJS Scope & Events . . . . . . . . . . . . 45Scope Demystified . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Writing Access with Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Objects Can Extend Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Prototypal Inheritance in AngularJS Scopes . . . . . . . . . . . . . . . . . . . . . . . 49Advanced Scope Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54The Watchers in AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54The watchCollection() Function . . . . . . . . . . . . . . . . . . . . . . . 56The apply() Function and the digest Loop . . . . . . . . . . . . . . 57 apply and digest in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60www.it-ebooks.info
xiBroadcasting & Emitting Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 scope. emit(name,args) For Emitting Events . . . . . . . . . . . . 64 scope. broadcast(name,args) For BroadcastingEvents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 scope. on(name,handlerFunction) For RegisteringListeners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Events in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66The destroy event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Chapter 4Multiple Views and Routing . . . . . . . . . 71Creating Multiple Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72Using routeParams in the Controller . . . . . . . . . . . . . . . . . . . . . . . . . . 78Using ng-template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81The resolve Property in the Route Config Object . . . . . . . . . . . . . . . . . 83Exploring the location Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86The API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Events in Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 location related events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 route related events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90The ng-include Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Introducing the Angular UI Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Getting Started With UI Routter . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Defining States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97Chapter 5AngularJS Services, Factories, andProviders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100www.it-ebooks.info
xiiEager Loading of a Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Factory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Constant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Using Decorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Chapter 6103103105108109109112Developing Single Page Blogger . . . 113Developing Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113Defining Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113Creating Our Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115Creating the Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116Creating the Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118App Entry Point (index.html) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119How About Some Unit Tests? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121Unit Testing postService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121Unit Testing Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123Writing an End-to-End (e2e) Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Chapter 7Understanding AngularJSForms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129AngularJS Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 input and textarea controls . . . . . . . . . . . . . . . . . . . . . . . 130 select control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Radio Button Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133Checkbox Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134AngularJS Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134www.it-ebooks.info
xiiiApplying Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Updating Models With a Twist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Forms in Action : Single Page Blogger v1.1 . . . . . . . . . . . . . . . . . . . . . . . 143Creating the admin Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143Defining States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144Creating Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145Admin Panel Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146Template For Adding a New Post . . . . . . . . . . . . . . . . . . . . . . . . . . . 147Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150Chapter 8Interacting with REST APIs . . . . . . . . . 151A Primer on Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151The Promise API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153Example Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155Promise Chaining . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Creating a Promise that Always Rejects . . . . . . . . . . . . . . . . . . . . . 159Understanding the http Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160The config Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162A Weather Search Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Setting Request Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Request and Response Transformers . . . . . . . . . . . . . . . . . . . . . . . . 166Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168Interceptors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168Understanding AngularJS resource . . . . . . . . . . . . . . . . . . . . . . . . . . 171Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171How Does resource Work? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177www.it-ebooks.info
xivChapter 9Using REST APIs in Single PageBlogger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179Applying resource to Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179Defining Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181Defining Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184Including angular-resource.js and Adding the ngResourceModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Unit Testing Our Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188Chapter 10AngularJS Directives . . . . . . . . . . . . . . . . . . 193What Are Directives, Really? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Directives From the jQuery Perspective . . . . . . . . . . . . . . . . . . . . . . . . . .Creating Custom Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .The Link Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .The Compile Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Compilation of Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Changing a Directive’s Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Binding Between Parent Scope and Isolated Scope Models . . . . . . . . .193194194197201202202207Using @ For One-Way Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207Using For Two-Way Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209Using & to Execute Functions in the Parent Scope . . . . . . . . . . . . 209Parent Scope vs. Child Scope vs. Isolated Scope . . . . . . . . . . . . . . . . . . . 212Transclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212Differences Between transclude:'element' andtransclude:true . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213The Controller Function and Require . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214Cleaning Up Your Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216IE 8 Precautions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218www.it-ebooks.info
xvChapter 11Adding a Comment System toSingle Page Blogger . . . . . . . . . . . . . . . . . . . . 219Unit Testing Our Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Chapter 12Dependency Injection InAngularJS . . . . . .
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
AngularJS uses dependency injection and make use of separation of concerns. AngularJS provides reusable components. AngularJS viii With AngularJS, the developers can achieve more functionality with short code. In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing. On the top of everything, AngularJS applications can run on all major browsers .
AngularJS Tutorial W3SCHOOLS.com AngularJS extends HTML with new attributes. AngularJS is perfect for Single Page Applications (SPAs). AngularJS is easy to learn. This Tutorial This tutorial is specially designed to help you learn AngularJS as quickly and efficiently as possible. First, you will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers. Then you .
Beginning AngularJS Beginning AngularJS is your step-by-step guide to learning the powerful AngularJS JavaScript framework. AngularJS is one of the most respected and innovative frameworks for building properly structured, easy-to-develop web applications. This book will teach you the absolute essentials, from downloading and installing AngularJS, to using modules, controllers, expressions .
AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience AngularJS code is unit testable. AngularJS uses dependency injection and make use of separation of concerns. AngularJS provides reusable components. With AngularJS,
AngularJS Tutorial, AngularJS Example pdf, AngularJS, AngularJS Example, angular ajax example, angular filter example, angular controller Created Date 11/29/2015 3:37:05 AM
AngularJS team at Google as an external contractor and is a founder member of the AngularUI project. He has spoken about AngularJS at Devoxx UK and numerous London meetups. He also runs training courses in AngularJS. His consultancy practice is now primarily focused on helping businesses make best use of AngularJS. I would like to thank the team at Google for giving us AngularJS, in particular .
Code Explanation for ng-transclude Directive in AngularJS: 1. The ng-app specifies the root element ( myApp ) to define AngularJS . ng-transclude directive is used to include the existing content "AngularJS" . Sample Output for ng-transclude Directive in AngularJS: 1. The content welcome to wikitechy is displayed in the output using the .
AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: [3] AngularJS extends HTML with ng-directives. The ng-app directive defines that this is an AngularJS application.
