Transcription
Brad DayleyBrendan DayleyAngularJS,JavaScript, andjQuery All in One
Sams Teach Yourself AngularJS, JavaScript, and jQuery All in OneAcquisitions EditorCopyright 2016 by Pearson Education, Inc.All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, ortransmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, withoutwritten permission from the publisher. No patent liability is assumed with respect to the use ofthe information contained herein. Although every precaution has been taken in the preparation ofthis book, the publisher and author assume no responsibility for errors or omissions. Nor is anyliability assumed for damages resulting from the use of the information contained herein.Mark TaberISBN-13: 978-0-672-33742-0ISBN-10: 0-672-33742-8Copy EditorBarbara HachaLibrary of Congress Control Number: 2015907445Printed in the United States of AmericaFirst Printing August 2015IndexerBrad HerrimanTrademarksProofreaderSarah KearnsAll terms mentioned in this book that are known to be trademarks or service marks have beenappropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Useof a term in this book should not be regarded as affecting the validity of any trademark or servicemark.Warning and DisclaimerEvery effort has been made to make this book as complete and as accurate as possible, but nowarranty or fitness is implied. The information provided is on an “as is” basis. The authors andthe publisher shall have neither liability nor responsibility to any person or entity with respect toany loss or damages arising from the information contained in this book.Special SalesFor information about buying this title in bulk quantities, or for special sales opportunities (whichmay include electronic versions; custom cover designs; and content particular to your business,training goals, marketing focus, or branding interests), please contact our corporate sales department at corpsales@pearsoned.com or (800) 382-3419.For government sales inquiries, please contact governmentsales@pearsoned.com.For questions about sales outside the U.S., please contact international@pearsoned.com.Managing EditorKristy HartProject EditorAndy BeasterTechnical EditorJesse SmithPublishingCoordinatorVanessa EvansInterior DesignerGary AdairCover DesignerMark ShirarCompositorNonie Ratcliff
Contents at a GlanceIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Part I: Introduction to AngularJS, jQuery, and JavaScript DevelopmentLESSON 1Introduction to Dynamic Web Programming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9LESSON 2Debugging JavaScript in Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35LESSON 3Understanding Dynamic Web Page Anatomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69LESSON 4Adding CSS/CSS3 Styles to Allow Dynamic Design and Layout . . . . . . . 105LESSON 5Jumping into jQuery and JavaScript Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145LESSON 6Understanding and Using JavaScript Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173Part II: Implementing jQuery and JavaScript in Web PagesLESSON 7Accessing DOM Elements Using JavaScript and jQuery Objects . . . . . . . 197LESSON 8Navigating and Manipulating jQuery Objects and DOMElements with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217LESSON 9Applying JavaScript and jQuery Events for Richly InteractiveWeb Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235LESSON 10 Dynamically Accessing and Manipulating Web Pages withJavaScript and jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269LESSON 11 Working with Window, Browser, and Other Non-WebPage Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303Part III: Building Richly Interactive Web Pages with jQueryLESSON 12 Enhancing User Interaction Through jQuery Animationand Other Special Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321LESSON 13 Interacting with Web Forms in jQuery and JavaScript . . . . . . . . . . . . . . . . . . . . 347LESSON 14 Creating Advanced Web Page Elements in jQuery . . . . . . . . . . . . . . . . . . . . . . . . . 391LESSON 15 Accessing Server-Side Data via JavaScript and jQueryAJAX Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Part IV: Utilizing jQuery UILESSON 16 Introducing jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457LESSON 17 Using jQuery UI Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475LESSON 18 Advanced Interactions Using jQuery UI Interaction Widgets . . . . . . . . . . . 495LESSON 19 Using jQuery UI Widgets to Add Rich Interactions to Web Pages . . . . . 525Part V: Building Web Applications with AngularJSLESSON 20 Getting Started with AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547LESSON 21 Understanding AngularJS Application Dynamics. . . . . . . . . . . . . . . . . . . . . . . . . . . 567LESSON 22 Implementing the Scope as a Data Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583LESSON 23 Using AngularJS Templates to Create Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599LESSON 24 Implementing Directives in AngularJS Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627LESSON 25 Creating Your Own Custom Directives to Extend HTML . . . . . . . . . . . . . . . . . 657LESSON 26 Using Events to Interact with Data in the Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685LESSON 27 Implementing AngularJS Services in Web Applications . . . . . . . . . . . . . . . . . . 699LESSON 28 Creating Your Own Custom AngularJS Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731LESSON 29 Creating Rich Web Application Components theAngularJS Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 751Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 777
Table of ContentsIntroduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1Lesson 1: Introduction to Dynamic Web Programming. . . . . . . . . . . . . . . . . . . .9Understanding the Web Server/Browser Paradigm. . . . . . . . . . . . . . . . . . . .9. . . . . . . . . . . . . . . . . . . . . .21. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33Setting Up a Web Development EnvironmentSummary .Q&AWorkshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 2: Debugging JavaScript in Web Pages . . . . . . . . . . . . . . . . . . . . . . . .35. . . . . . . . . . . . . . . . . . . . . . . . . . . .35. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48Viewing the Developer Tools ConsoleDebugging HTML ElementsDebugging CSS .Debugging JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 3: Understanding Dynamic Web Page Anatomy. . . . . . . . . . . . . . . . . .Using HTML/HTML5 Elements to Build a Dynamic Web Page .Understanding HTML StructureAdding HTML Body Elements .6669. . . . . . . . . .69. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70. . . . . . . . . . . . . . . . . . . . . . . . . . . .72. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77Implementing HTML Head ElementsAdding Some Advanced HTML5 Elements . . . . . . . . . . . . . . . . . . . . . . . .93. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103Summary .Q&A56. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Analyzing the Network TrafficQ&A33Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
viSams Teach Yourself AngularJS, JavaScript, and jQuery All in OneLesson 4: Adding CSS/CSS3 Styles to Allow Dynamic Design and LayoutAdding CSS Styles to the Web Page . . . .105. . . . . . . . . . . . . . . . . . . . . . . . . . . .105Adding CSS Styles to HTML Elements. . . . . . . . . . . . . . . . . . . . . . . . . . .140. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142Summary .Q&AWorkshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 5: Jumping into jQuery and JavaScript Syntax .Accessing the DOM . . . . . . . . . . . . . . . . . .145145. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148. . . . . . . . . . . . . . . . . . . . . . . . . . . . .151. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170Understanding JavaScript Syntax .Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 6: Understanding and Using JavaScript Objects .Using Object Syntax173. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175. . . . . . . . . . . . . . . . . . . . . . . . . . . . .189. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195Creating Custom-Defined Objects .Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 7: Accessing DOM Elements Using JavaScript and jQuery Objects195. . . .197. . . . . . . . . . . . . . . .197. . . . . . . . . . . . . . . . . . . . . . . . .201. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215Understanding DOM Objects Versus jQuery Objects .Accessing DOM Objects from JavaScriptUsing jQuery Selectors .Summary .Q&A170. . . . . . . . . . . . . . . . .Understanding Built-in Objects.Q&A142. . . . . . . . . . . . . . . . . . . . .Adding jQuery and JavaScript to a Web PageQ&A108. . . . . . . . . . . . . . . . . . . . . . . .Preparing CSS Styles for Dynamic DesignWorkshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 8: Navigating and Manipulating jQuery Objects and DOMElements with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217. . . . . . . . . . . . . . . . . . . . . . . . . . . .217. . . . . . . . . . . . . . . . . . . . . . . . . . . . .218Chaining jQuery Object OperationsFiltering the jQuery Object Results216
ContentsTraversing the DOM Using jQuery Objects. . . . . . . . . . . . . . . . . . . . . . .219. . . . . . . . . . . . . . . .223. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233Looking at Some Additional jQuery Object MethodsSummary .Q&AviiWorkshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 9: Applying JavaScript and jQuery Events for Richly InteractiveWeb Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Understanding Events233. . . . . .235. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235Using the Page Load Events for Initialization . . . . . . . . . . . . . . . . . . . . .241. . . . . . . . . . . .242. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253Creating Custom Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .262Implementing CallbacksAdding and Removing Event Handlers to DOM Elements .Triggering Events Manually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266Summary .Q&AWorkshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 10: Dynamically Accessing and Manipulating Web Pages withJavaScript and jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269. . . . . . . . . . . . . . . . . . . . .270. . . . . . . . . . . . . . . . . . . . . . .282Accessing Browser and Page Element Values .Dynamically Manipulating Page Elements. . . . . . . . . . . . . . .292. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299Dynamically Rearranging Elements on the Web PageSummary .Q&A266Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 11: Working with Window, Browser, and Other Non-WebPage Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .304Understanding the Screen ObjectUsing the Window Object. . . . . . . . . . . . . . . . . . . . . . . . . . . . .306. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .308. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313Using the Browser Location ObjectUsing the Browser History ObjectControlling External Links .Adding Pop-up Boxes300
viiiSams Teach Yourself AngularJS, JavaScript, and jQuery All in One. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .314. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318Setting Timers .Summary .Q&AWorkshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 12: Enhancing User Interaction Through jQuery Animation andOther Special Effects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .321. . . . . . . . . . . . . . . . . . . . . . . . . . . . .321. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332Understanding jQuery AnimationAnimating Show and Hide.Animating VisibilitySliding ElementsCreating Resize Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .340. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .344. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .344Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 13: Interacting with Web Forms in jQuery and JavaScriptAccessing Form Elements .347. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .348. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361. . . . .368. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .375. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .387. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .388Dynamically Controlling Form Element Appearance and Behavior .Validating a Form .Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 14: Creating Advanced Web Page Elements in jQuery .Adding an Image GalleryCreating a Tree View .388. . . . . . . . . . . .391. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .391. . . . . . . . . . . . . . . . . . . . .397. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .404Implementing Tables with Sorting and FiltersUsing Overlay Dialogs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .409. . . . . . . . . . . . . . . . . . . . .413. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .421. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .421Implementing a Graphical Equalizer DisplayAdding Sparkline GraphicsSummary .Q&A345. . . . . . . . . .Intelligent Form Flow Control.Q&A337. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Implementing Moving Elements .Q&A318Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .422
ContentsLesson 15: Accessing Server-Side Data via JavaScript and jQueryAJAX Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Making AJAX Easy. . . . . . . . .423. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .423Implementing AJAX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .450. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .453. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .454Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 16: Introducing jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Getting Started with jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .457. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .472. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .472Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 17: Using jQuery UI Effects.Applying jQuery UI Effects .472. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .475. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .475Adding Effects to Class Transitions. . . . . . . . . . . . . . . . . . . . . . . . . . . . .482. . . . . . . . . . . . . . . . . . . .485. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .492. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .492Adding Effects to Element Visibility TransitionsSummary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 18: Advanced Interactions Using jQuery UI Interaction WidgetsUsing the Drag-and-Drop Widgets495. . . . . . . . . . . . . . . . . . . . . . . . . . . .495. . . . . . . . . . . . . . . . . . . . . . . . . . . . .497. . . . . . . . . . . . . . . . . . . .507. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .511Resizing Elements Using the Resizable Widget .Applying the Selectable Widget492. . . . . .Introducing jQuery UI Interactions . . . . . . . . . . . . . . . . . . . . . . .516. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522Sorting Elements with the Sortable WidgetSummary .Q&A457463Summary .Q&A454. . . . . . . . . . . . . . . . . . . . . . . . . . . .Applying jQuery UI in Your Scripts .Q&A428. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Using Advanced jQuery AJAXQ&AixWorkshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523
xSams Teach Yourself AngularJS, JavaScript, and jQuery All in OneLesson 19: Using jQuery UI Widgets to Add Rich Interactions toWeb Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Reviewing Widgets. . . . . . . . . . .525. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .525Adding an Expandable Accordion Element . . . . . . . . . . . . . . . . . . . . . .527. . . . . . . . . . . . . . . . . . . . .528. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .530Applying jQuery UI Buttons to Form ControlsCreating a Calendar Input . . . . . . . . . . . . . . . . . . . . . .532. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .533. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .535Generating Stylized Dialogs with jQuery UI .Implementing Stylized MenusCreating Progress Bars .Implementing Slider Bars. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Creating Tabbed Panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .538539. . . . . . . . . . . . . . . . . . . . . . . . . . . . .542. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .544. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .545. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .545Adding Tooltips to Page Elements .Creating Custom WidgetsSummary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 20: Getting Started with AngularJS .Why AngularJS?545. . . . . . . . . . . . . . . . . . . . . . . . . .547. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .548Understanding AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Separation of Responsibilities .552. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .553. . . . . . . . . . .553. . . . . . . . . . . . . . . . . . . . . . . . .554Integrating AngularJS with Existing JavaScript and jQuery .Adding AngularJS to Your Environment. . . . . . . . . . . . . . . . . .555. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .555Bootstrapping AngularJS in an HTML Document .Using the Global APIs549. . . . . . . . . . . . . . . . . . . . . . . .An Overview of the AngularJS Life Cycle . . . . . . . . . . . . . .560. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .564. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .564Using jQuery or jQuery Lite in AngularJS Applications .Summary .Q&A536. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Adding a Value Spinner ElementQ&A526. . . . . . . . . . . . . . . . . . .Implementing Autocomplete in Form Elements .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .565
ContentsLesson 21: Understanding AngularJS Application Dynamics. . . . . . . . . . . . . .567. . . . . . . . . . . . . . . . . . . .567. . . . . . . . . . . . . . . . . . . . . . . . . .569Looking at Modules and Dependency InjectionDefining an AngularJS Module ObjectxiCreating Providers in AngularJS Modules. . . . . . . . . . . . . . . . . . . . . . . .570Implementing Providers and Dependency Injection . . . . . . . . . . . . . . . .572Applying Configuration and Run Blocks to Modules. . . . . . . . . . . . . . . .577. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .581. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .581Summary .Q&AWorkshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 22: Implementing the Scope as a Data ModelUnderstanding Scopes. . . . . . . . . . . . . . . . . .583. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .583. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .593. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .597. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .597Implementing Scope HierarchySummary .Q&AWorkshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 23: Using AngularJS Templates to Create ViewsUnderstanding TemplatesUsing Filters. . . . . . . . . . . . . . . . .599. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .599600. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .611. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .620. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .623. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .624Creating Custom Filters .Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 24: Implementing Directives in AngularJS Views .Understanding Directives .624. . . . . . . . . . . . . . . .627. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .627. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .628. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .655. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .656Using Built-In DirectivesSummary .Q&A597. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Using ExpressionsQ&A582Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .656
xiiSams Teach Yourself AngularJS, JavaScript, and jQuery All in OneLesson 25: Creating Your Own Custom Directives to Extend HTMLUnderstanding Custom Directive Definitions . . . . . . . . . . . . . . . . . . . . .657668. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .683. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .683Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 26: Using Events to Interact with Data in the ModelBrowser Events. . . . . . . . . . . . . .685685. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Adding watches to Track Scope Change Events.686. . . . . . . . . . . . . . . . . . . . . . .691696. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .697Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 27: Implementing AngularJS Services in Web ApplicationsUsing the Built-In Services699. . . . . . . . . . . . . . . . . . . . . . . . . . . . .699. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .700. . . . . . . . . . . . . . . . .727. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .728. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .729Using the q Service to Provide Deferred ResponsesSummary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 28: Creating Your Own Custom AngularJS Services .Understanding Custom AngularJS Services731. . . . . . . . . . . . . . . . . . . . . . .731. . . . . . . . .733. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .748. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .748Summary .Workshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Lesson 29: Creating Rich Web Application Components theAngularJS Way . . . . . . . . . . . . . . . . . . . . . . . .
No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or
