Mastering Web Application - DropPDF

2y ago
155 Views
3 Downloads
2.90 MB
372 Pages
Last View : 14d ago
Last Download : 1m ago
Upload by : Gideon Hoey
Transcription

Mastering Web ApplicationDevelopment with AngularJSBuild single-page web applications using the power ofAngularJSPawel KozlowskiPeter Bacon DarwinBIRMINGHAM - MUMBAI

Mastering Web ApplicationDevelopment with AngularJSCopyright 2013 Packt PublishingAll rights reserved. No part of this book may be reproduced, stored in a retrievalsystem, or transmitted in any form or by any means, without the prior writtenpermission of the publisher, except in the case of brief quotations embedded incritical articles or reviews.Every effort has been made in the preparation of this book to ensure the accuracyof the information presented. However, the information contained in this book issold without warranty, either express or implied. Neither the authors, nor PacktPublishing, and its dealers and distributors will be held liable for any damagescaused or alleged to be caused directly or indirectly by this book.Packt Publishing has endeavored to provide trademark information about all of thecompanies and products mentioned in this book by the appropriate use of capitals.However, Packt Publishing cannot guarantee the accuracy of this information.First published: August 2013Production Reference: 1170813Published by Packt Publishing Ltd.Livery Place35 Livery StreetBirmingham B3 2PB, UK.ISBN 978-1-78216-182-0www.packtpub.comCover Image by Abhishek Pandey (abhishek.pandey1210@gmail.com)

CreditsAuthorsProject CoordinatorsPawel KozlowskiArshad SopariwalaPeter Bacon DarwinPriyanka GoelReviewersProofreadersStephane BissonJudith BillMiško HeveryBernadette WatkinsLee HowardIndexerAcquisition EditorsMonica Ajmera MehtaRukhsana KhambattaPramila BalanLead Technical EditorGraphicsRonak DhruvAbhinash SahuDayan HyamesProduction CoordinatorTechnical EditorsAditi GajjarShashank DesaiKrishnaveni HaridasSaumya KunderCover WorkAditi Gajjar

About the AuthorsPawel Kozlowski has over 15 years of professional experience in webdevelopment and was fortunate enough to work with variety of web technologies,languages, and platforms. He is not afraid of hacking both at client side and serverside and always searches for the most productive tools and processes.Pawel strongly believes in free, open source software. He has been very committedin the AngularJS project and also is very active in the AngularJS community. He alsocontributes to Angular UI – the companion suite to the AngularJS framework, wherehe focuses on the Twitter's Bootstrap directives for AngularJS.When not coding, Pawel spreads a good word about AngularJS at various conferencesand meetups.

AcknowledgmentsReflecting on the last few months I can't believe how fortunate I was to work on thisbook with so many great people. This text wouldn't have been possible without allthe help and hard work of you all. Thank you.Firstly I would like to say a "Thank you" to all the members of the AngularJS teamat Google. You are the dream team working on an amazing framework. Keep upthe great work! My special thanks go to Brad Green, Miško Hevery, Igor Minar, andVojta Jína. Brad, thank you for putting Peter and me in contact with the publisherand encouraging us to write this book. Miško, thank you for reviewing our bookand bearing with us when we had naive questions about AngularJS. Igor, for yourconstant support and an endless stream of good hints, which made this book muchbetter. It was a lot of fun to work with all of you guys.I would like to extend my gratitude to the entire AngularJS community, especially topeople with whom I've interacted on the mailing list and other forums. I can't nameyou all, but your insightful questions were great inspiration for this book. A vibrant,supportive community behind AngularJS is one more reason why this framework isso great.Thanks are due to all the people at Packt Publishing: Rukhsana Khambatta, DayanHyames, and Arshad Sopariwala. You've made the entire writing and publishingprocess very smooth and straightforward. Thank you.

I would like to thank my co-workers at Amadeus, where I've learned what ittakes to be a client-side programmer. Firstly, my managers Bertrand Laporte andBruno Chabrier. Bertrand, thank you for introducing me to the world of client-sidedevelopment and encouraging me to write this book. Bruno, thank you for lettingme work part time and focus on this project. Thank you both for your generosity.Thanks to Julian Descottes and Corinne Krych, who reviewed an earlier draft of thebook and provided valuable feedback.Very, very special thanks to Peter who agreed to co-author this book with me. Peter,I've throughly enjoyed every minute of working with you on this project. I couldhardly dream of a better co-author.Lastly, but most importantly, I would like to thank my wonderful soon-to-be wifeAnia. Without your unconditional support and patience I wouldn't have eventhought of starting work on this book.

About the AuthorsPeter Bacon Darwin has been programming for over two decades. He worked with.NET from before it was released; he contributed to the development of IronRuby andwas an IT consultant for Avanade and IMGROUP before quitting to share his timebetween freelance development and looking after his kids.Peter is a notable figure in the AngularJS community. He has recently joined theAngularJS team at Google as an external contractor and is a founder member of theAngularUI project. He has spoken about AngularJS at Devoxx UK and numerousLondon meetups. He also runs training courses in AngularJS. His consultancypractice 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, inparticular the ones who got it all going: Miško Hevery, Igor Minar,Brad Green, and Vojta Jína. They are a constant inspiration. My coauthor, Pawel, is the driving force behind this book. He conceivedthe structure, wrote most of the content, and is a great guy to workwith. We have all benefited from the awesome active communitythat has built up around AngularJS in such a short time, especiallythe folks in the AngularUI project. Finally, I couldn't have completedthe book without the love and support of my wife, Kelyn, and kids,Lily and Zachary.

About the ReviewersStephane Bisson has been a developer at ThoughtWorks, a global IT consultancy.He is currently based in Toronto, Canada. He has also worked on several rich webapplications for medical, financial, and manufacturing industries.Miško Hevery has been working as an Agile Coach at Google where he isresponsible for coaching Googlers to maintain the high level of automated testingculture. This allows Google to do frequent releases of its web applications withconsistent high quality. Previously he worked at Adobe, Sun Microsystems, Intel,and Xerox, where he became an expert in building web applications using webrelated technologies such as Java, JavaScript, Flex, and ActionScript. He is veryinvolved in open source community and is an author of several open source projects,most notable of which is AngularJS (http://angularjs.org).Lee Howard has a Computer Science degree from Appalachian State Universityand is currently the lead programmer analyst for the Northwest Area HealthEducation Center at Wake Forest Baptist Health Medical Center in Winston-Salem,NC. He has developed a variety of web applications to facilitate the creation,registration, delivery, and completion of live and the online continuing medicaleducation courses for the Northwest AHEC. He has also developed NorthwestAHEC's CreditTrakr mobile app for IOS devices, which allows physicians and othermedical professionals to track their CME credits with their IOS devices.

www.PacktPub.comSupport files, eBooks, discount offers and moreYou might want to visit www.PacktPub.com for support files and downloads relatedto your book.Did you know that Packt offers eBook versions of every book published, with PDFand ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy.Get in touch with us at service@packtpub.com for more details.At www.PacktPub.com, you can also read a collection of free technical articles, signup for a range of free newsletters and receive exclusive discounts and offers on Packtbooks and eBooks.TMhttp://PacktLib.PacktPub.comDo you need instant solutions to your IT questions? PacktLib is Packt's online digitalbook library. Here, you can access, read and search across Packt's entire library ofbooks.Why Subscribe? Fully searchable across every book published by Packt Copy and paste, print and bookmark content On demand and accessible via web browserFree Access for Packt account holdersIf you have an account with Packt at www.PacktPub.com, you can use this to accessPacktLib today and view nine entirely free books. Simply use your login credentials forimmediate access.

Table of ContentsPrefaceChapter 1: Angular ZenMeet AngularJSGetting familiar with the frameworkFinding your way in the projectThe communityOnline learning resourcesLibraries and extensionsToolsBatarangPlunker and jsFiddleIDE extensions and pluginsAngularJS crash courseHello World – the AngularJS exampleTwo-way data binding178889999101010101012The MVC pattern in AngularJS12Modules and dependency injection26AngularJS and the rest of the worldjQuery and AngularJS3839A sneak peek into the futureSummary4141Bird's eye viewScopes in depthViewModules in AngularJSCollaborating objectsRegistering servicesModules lifecycleModules depending on other modulesApples and oranges131521262729333540

Table of ContentsChapter 2: Building and TestingIntroducing the sample applicationGetting familiar with the problem domainTechnical stackPersistence storeMongoLabServer-side environmentThird-party JavaScript librariesBootstrap CSSBuild systemBuild system principles4344444546464748484849Automate everythingFail fast, fail cleanDifferent workflows, different commandsBuild scripts are code too49495050Tools50Grunt.jsTesting libraries and toolsJasmineKarma runner51515152Organizing files and foldersRoot foldersInside the source folder525254File-naming conventionsAngularJS modules and filesOne file, one moduleInside a module57575859Automated testingUnit tests6263End-to-end tests70AngularJS specific filesStart simpleInside the test folder545657Different syntax for registering providersSyntax for declaring the configure and run blocksAnatomy of a Jasmine testTesting AngularJS objectsTesting servicesTesting controllersMock objects and asynchronous code testingDaily workflowKarma runner tips and tricksExecuting a subset of testsDebugging5961646565676871727373Summary74[ ii ]

Table of ContentsChapter 3: Communicating with a Back-end ServerMaking XHR and JSONP requests with httpGetting familiar with the data model and MongoLab URLs http APIs quick tourThe configuration object primerRequest data conversionDealing with HTTP responsesResponse data conversionDealing with same-origin policy restrictionsOvercoming same-origin policy restrictions with JSONPJSONP limitationsOvercoming same-origin policy restrictions with CORSServer-side proxies75757676777879797980818183The promise API with qWorking with promises and the q service8485 q integration in AngularJSThe promise API with httpCommunicating with RESTful endpointsThe resource service93949595Learning q service basicsPromises are first-class JavaScript objectsAggregating callbacksRegistering callbacks and the promise lifecycleAsynchronous action chainingMore on qConstructor-level and instance-level methods resource creates asynchronous methodsLimitations of the resource serviceCustom REST adapters with httpUsing advanced features of httpIntercepting responsesTesting code that interacts with httpSummaryChapter 4: Displaying and Formatting DataReferencing directivesDisplaying results of expression evaluationThe interpolation directiveRendering model values with ngBindHTML content in AngularJS expressionsConditional displayIncluding blocks of content conditionallyRendering collections with the ngRepeat directiveGetting familiar with the ngRepeat directive[ iii 1111112114114115

Table of ContentsSpecial variablesIterating over an object's propertiesngRepeat patternsLists and detailsAltering tables, rows, and classesDOM event handlersWorking effectively with DOM-based templatesLiving with verbose syntaxngRepeat and multiple DOM elementsElements and attributes that can't be modified at runtimeCustom HTML elements and older versions of IEHandling model transformations with filtersWorking with built-in filtersFormatting filtersArray-transforming filtersWriting custom filters – a pagination exampleAccessing filters from the JavaScript codeFilters dos and don'tsFilters and DOM manipulationCostly data transformations in filtersUnstable filtersSummaryChapter 5: Creating Advanced FormsComparing traditional forms with AngularJS formsIntroducing the ngModel directiveCreating a User Information FormUnderstanding the input directivesAdding the required validationUsing text-based inputs (text, textarea, e-mail, URL, number)Using checkbox inputsUsing radio inputsUsing select inputsProviding simple string optionsProviding dynamic options with the ngOptions directiveUsing empty options with the select directiveUnderstanding select and object equivalenceSelecting multiple optionsWorking with traditional HTML hidden input fieldsEmbedding values from the serverSubmitting a traditional HTML formLooking inside ngModel data bindingUnderstanding ngModelControllerTransforming the value between the model and the view[ iv 146148149150150150151151151152

Table of ContentsTracking whether the value has changedTracking input field validity152153Validating AngularJS formsUnderstanding ngFormControllerUsing the name attribute to attach forms to the scopeAdding dynamic behavior to the User Information FormShowing validation errorsDisabling the save button153153154154155156Disabling native browser validationNesting forms in other formsUsing subforms as reusable componentsRepeating subformsValidating repeated inputsHandling traditional HTML form submissionSubmitting forms directly to the serverHandling form submission events157157157158159161161161Resetting the User Info formSummary162164Using ngSubmit to handle form submissionUsing ngClick to handle form submissionChapter 6: Organizing NavigationURLs in single-page web applicationsHashbang URLs in the pre-HTML5 eraHTML5 and the history APIUsing the location serviceUnderstanding the location service API and URLsHashes, navigation within a page, and anchorScrollConfiguring the HTML5 mode for URLsClient sideServer sideHandcrafting navigation using the location serviceStructuring pages around routesMapping routes to URLsDefining controllers in route partialsThe missing bits in the handcrafted navigationUsing built-in AngularJS routing servicesBasic routes definitionDisplaying the matched route's 74174175175175176Matching flexible routes177Reusing partials with different controllersAvoiding UI flickering on route changes178179Defining default routesAccessing route parameter values[v]178178

Table of ContentsPreventing route changesLimitations of the route serviceOne route corresponds to one rectangle on the screen181182183No nested routes supportRouting-specific patterns, tips, and tricksHandling links184185185Handling multiple UI rectangles with ng-includeCreating clickable linksWorking with HTML5 and hashbang mode links consistentlyLinking to external pagesOrganizing route definitionsSpreading route definitions among several modulesFighting code duplication in route definitionsSummaryChapter 7: Securing Your ApplicationProviding server-side authentication and authorizationHandling unauthorized accessProviding a server-side authentication APISecuring partial templatesStopping malicious attacksPreventing cookie snooping (man-in-the-middle attacks)Preventing cross-site scripting attacksSecuring HTML content in AngularJS expressionsAllowing unsafe HTML bindingsSanitizing 95195196196Preventing the JSON injection vulnerabilityPreventing cross-site request forgeryAdding client-side security supportCreating a security serviceShowing a login formCreating security-aware menus and toolbars197198198199200201Supporting authentication and authorization on the clientHandling authorization failuresIntercepting responses203203204Hiding the menu itemsCreating a login toolbarHTTP response interceptorsCreating a securityInterceptor serviceCreating the securityRetryQueue serviceNotifying the security servicePreventing navigation to secure routesUsing route resolve functions[ vi ]201202204205207208208209

Table of ContentsCreating the authorization serviceSummaryChapter 8: Building Your Own DirectivesWhat are AngularJS directives?Understanding the built-in directivesUsing directives in the HTML markupFollowing the directive compilation life-cycleWriting unit tests for directivesDefining a directiveStyling buttons with directivesWriting a button directiveUnderstanding AngularJS widget directivesWriting a pagination directiveWriting tests for the pagination directiveUsing an HTML template in a directiveIsolating our directive from its parent scopeInterpolating the attribute with @Binding data to the attribute with Providing a callback expression in the attribute with 26227227Implementing the widgetAdding a selectPage callback to the directiveCreating a custom validation directiveRequiring a directive controller228229230231Working with ngModelControllerWriting custom validation directive testsImplementing a custom validation directiveCreating an asynchronous model validatorMocking up the Users serviceWriting tests for asynchronous validationImplementing the asynchronous validation directiveWrapping the jQueryUI datepicker directiveWriting tests for directives that wrap librariesImplementing the jQuery datepicker aking the controller optionalSearching for parents for the controllerChapter 9: Building Advanced DirectivesUsing transclusionUsing transclusion in directivesTranscluding into an isolated scope directive[ vii ]231232245245245246

Table of ContentsCreating an alert directive that uses transclusionUnderstanding the replace property in the directive definitionUnderstanding the transclude property in the directive definitionInserting the transcluded elements with ng-transcludeUnderstanding the scope of transclusionCreating and working with transclusion functionsCreating a transclusion function with the compile serviceCloning the original elements when transcluding246247248248248250251251Accessing transclusion functions in directives252Creating an if directive that uses transclusion253Getting the transclusion function in the compile function with transcludeFnGetting the transclusion function in the directive controller with transcludeUsing the priority property in a directiveUnderstanding directive controllersInjecting special dependencies into directive controllersCreating a controller-based pagination directiveUnderstanding the difference between directivecontrollers and link functionsInjecting dependenciesThe compilation processAccessing other controllersAccessing the transclusion functionCreating an accordion directive suiteUsing a directive controller in accordionImplementing the accordion directiveImplementing the accordion-group directiveTaking control of the compilation processCreating a field directiveUsing the terminal property in 63263265265267Using the interpolate service268Loading templates dynamicallySetting up the field templateSummary2

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 .

Related Documents:

3. Mastering Tips 3.1 what is mastering? 3.2 typical mastering tools and effects 3.3 what can (and should) be fixed/adjusted 3.4 mastering EQ tips 3.5 mastering compressor tips 3.6 multi-band compressor / dynamic EQ 3.7 brickwall limiter 3.8 no problem, the mastering engineer will fix that!

Mastering Intellectual Property George W. Kuney, Donna C. Looper Mastering Labor Law Paul M. Secunda, Anne Marie Lofaso, Joseph E. Slater, Jeffrey M. Hirsch Mastering Legal Analysis and Communication David T. Ritchie Mastering Legal Analysis and Drafting George W. Kuney, Donna C. Looper Mastering Negotiable Instruments (UCC Articles 3 and 4)

Mastering Adjusting Entries 2007 Mastering Internal Controls & Fraud Prevention 2007 Mastering Inventory 2007 Mastering Correction of Accounting Errors 2007 Mastering Depreciation 2016 Mastering Payroll 2017 AH134 online F/S/SU Medical Disorders McDaniel, K

contemporary mastering techniques. The following section, "A Guide to Common Practices in Mastering," lays the groundwork for this studies' investigation of the audio mastering process. A Guide to Common Practices in Mastering To reiterate, mastering is the most misunderstood step in the recording process.

Mastering Workshop and guides you through the whole mastering process step-by-step in about one hour, using the free bundle of five mastering plug-ins that was specifically developed to accompany the book: the Noiz-Lab LE Mastering Bundle. This eBook contains the full text of the One Hour Mastering Workshop from the book,

mastering display -it is crucial to select the proper master display nit value. (i.e. Sony BVM X300 is 1000-nits). Dolby Vision supports multiple Mastering Monitors that the colorist can choose from. If the mastering is done on multiple systems, the mastering display for all systems for the deliverable must be set to the same mastering display.

Mastering Object-oriented Python and Learning Python Design Patterns, published by Packt Publishing. I want to thank my sweetheart, Georgia, for supporting this effort. Many thanks to . Django framework, web app security, networking, Web 2.0, and C . Along with CCNA, many. other e

6 Steps to Mastering Hockey Tactics 5 " 2) Let us walk you through the complete process, term by term, zone by zone, system by system as a member of "How to Play Hockey. 20 Week Guide to Mastering the Game: " How to Play Hockey The following pages are a 20 week (full hockey season) guide to mastering the concepts