Transcription
Dennis SheppardChristopher MillerAJ LiptakAngularJS for.NETDevelopers24Hoursin
Sams Teach Yourself AngularJS for .NET Developers in 24 HoursCopyright 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.ISBN-13: 978-0-672-33757-4ISBN-10: 0-672-33757-6Library of Congress Control Number: 2015910923Printed in the United States of AmericaFirst Printing October 2015TrademarksAll 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.Use of a term in this book should not be regarded as affecting the validity of any trademark orservice mark.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 author(s) 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 or from the use of theCD or programs accompanying it.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.Editor-in-ChiefGreg WiegandAcquisitions EditorJoan MurrayDevelopmentEditorKeith ClineManaging EditorSandra SchroederProject EditorSeth KerneyCopy EditorKeith ClineIndexerKen JohnsonProofreaderChuck HutchinsonTechnical EditorJesse SmithPublishingCoordinatorCindy TeetersBook DesignerMark ShirarCompositorcodeMantra
Contents at a GlanceIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1HOUR 1 Introducing Modern Front-End Development. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Presenting JavaScript Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Tinkering with Tools for Modern Front-End Development . . . . . . . . . . . . . . . . . . 294 Mastering Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Covering Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 Understanding Views, Data Binding, and Event Handling . . . . . . . . . . . . . . . . . 497 Discovering Services: Part I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638 Discovering Services: Part II . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719 Using Built-In Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7910 Conquering Custom Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8911 Depending on Dependency Injection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10312 Rationalizing Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11113 Actualizing Application Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12314 Figuring Out Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12915 Approaching Angular Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14916 Making Components Communicate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15517 Demonstrating Deployment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17518 Unraveling Unit Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18519 Destroying Debugging. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19920 Applying Angular to ASP.NET Web Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22521 Applying Angular to ASP.NET MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24722 Using Angular with ASP.NET Web API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26523 Using Angular with ASP.NET SignalR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29324 Focus on the Future . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Table of ContentsIntroduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .HOUR 1: Introducing Modern Front-End Development . . . . . . . . . . . . . . . . . . . .5. . . . . . . . . . . . . . . . . . . . . . . . . .5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6Why Does Everything Look So Different? .How Is the Code Different?.Options for Front-End DevelopmentWhy Angular?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11Exercise. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11HOUR 2: Presenting JavaScript Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . .13. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26Five JavaScript Tips and Tricks .JavaScript PatternsSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27Workshop.ExerciseHOUR 3: Tinkering with Tools for Modern Front-End Development . . . . . . . . . .29. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30The Tool Landscape. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35Package Management .Summary .Q&A910Workshop.Node8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Summary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Why Is Angular 1 Still Relevant?Q&A1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36Workshop.Exercise
Table of ContentsHOUR 4: Mastering Modules .v. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37Angular Modules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37Creating Modules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40Summary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40Workshop.ExerciseHOUR 5: Covering Controllers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42Angular Controllers. scopeController Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47Best PracticesSummary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47Workshop.ExerciseHOUR 6: Understanding Views, Data Binding, and Event Handling . . . . . . . . . .49. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50Angular ViewsData Binding. . . . . . . . . . . . . . . . . . . . . . . . . .53. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55Two-Way Data Binding with ng-model .Data Binding Performance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58Multiple Controllers in a ViewMultiple Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61Angular Event BindingView Best PracticesSummary .Q&A44. . . . . . . . . . . . . . . . . . .What Should and Shouldn’t Go into a Controller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62Workshop.ExerciseHOUR 7: Discovering Services: Part I .Angular Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63Service Versus Factory. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64
viTable of Contents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69Using Services .Summary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70Workshop.ExerciseHOUR 8: Discovering Services: Part IIUsing Services for a DAL71. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78Promises and qSummary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78Workshop.ExerciseHOUR 9: Using Built-In Directives.Angular Directives. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86Built-In Angular DirectivesSummary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87Workshop.ExerciseHOUR 10: Conquering Custom Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . .89. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92Why Custom Directives?Link Function .Directive Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101Element Versus AttributeSummary .Q&A94. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102Workshop.ExerciseHOUR 11: Depending on Dependency Injection. . . . . . . . . . . . . . . . . . . . . . .Inversion of Control and Dependency Injection . . . . . . . . . . . . . . . . . . .103. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106Dependency Injection in .NETUsing Angular’s DI103
Table of Contents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109Summary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109Workshop.ExerciseHOUR 12: Rationalizing Routing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Routing in a Single-Page App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Setting Up Routing with Angular. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Cleaning Up your URLs with HTML5 Mode . . . . . . . . . . . . . . . . . . . . . .112117. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121Workshop.ExerciseHOUR 13: Actualizing Application OrganizationAngular in a Single File . . . . . . . . . . . . . . . . . . . . . . .123. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123Breaking Your Application into Separate Files . . . . . . . . . . . . . . . . . . . .124. . . . . . . . . . . . . . . . . . . . . . .126. . . . . . . . . . . . . . . . . . . . . . . .126. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128Organizing Your Application by File Type .Organizing Your Application by Feature .Application Pro TipsSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128Workshop.ExerciseHOUR 14: Figuring Out Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Examples of Formatting with Built-In Angular Filters .Create Your Own Angular Filter .129. . . . . . . . . . . . . . .129. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132. . . . . . . . . . . . . . . . . . . . . . . . . . .143. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .145. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146Using a Filter to Search on ng-repeatSummary .Q&A111118Summary .Q&A111. . . . . . . . . . . . . .Executing Code Before a Route Change with a Resolve .Q&Avii. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147Workshop.Exercise
viiiTable of ContentsHOUR 15: Approaching Angular Patterns .Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . .149. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149. . . . . . . . . . . . . . . . . . . . . . . . . . . . .150. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153Controller Patterns and Principles.Service Patterns and Principles .Angular Architecture PatternsSummary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154Workshop.ExerciseHOUR 16: Making Components Communicate .Communication Between Components . . . . . . . . . . . . . . . . . . . . . . .155. . . . . . . . . . . . . . . . . . . . . . . . .155. . . . . . . . . . . . . . . . . . . . .157. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165Calling Directive Functions from a ControllerUsing watch to CommunicateUsing Events to Communicate. . . . . . . . . . . . . . . . . . . . . . . . . . . .169. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171Nested Controller Communication .Summary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173Workshop.ExerciseHOUR 17: Demonstrating Deployment .Automating Deployment Tasks. . . . . . . . . . . . . . . . . . . . . . . . . . . . .175. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175. . . . . . . . . . . . . . . . . . . . . . . .177. . . . . . . . . . . . . . . . . . . . . . . . . . . .178Writing Production-Ready Angular Code.Error-Checking Your Angular Code . . . . . . . . . . . . . . . . .181. . . . . . . . . . . . . . . . . .182. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183Minifying and Concatenating Your Angular Code .Deploying Your Angular Code to Microsoft AzureSummary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184Workshop.ExerciseHOUR 18: Unraveling Unit Tests. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186Unit Testing in Angular .Karma and Jasmine
Table of Contents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191Getting Everything Set UpTesting ControllersTesting Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197Testing DirectivesSummary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198Workshop.ExerciseHOUR 19: Destroying Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Debugging Strategies and Tips .Tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199201. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223Workshop.ExerciseHOUR 20: Applying Angular to ASP.NET Web Forms .Strategies for Modernizing Web Applications .225. . . . . . . . . . . . . . . . . . . . .225226. . . . . . . . . . . . . . . . . . . . . . . . . . . .239. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .245. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246Augment Web Forms with AngularSummary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246Workshop.ExerciseHOUR 21: Applying Angular to ASP.NET MVC .Building a Sample ASP.NET MVC App. . . . . . . . . . . . . . . . . . . . . . . .247. . . . . . . . . . . . . . . . . . . . . . . . . .247. . . . . . . . . . . . . . . . . . . . . . .256. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .262. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263Adding Angular to an ASP.NET MVC App.Summary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Translating Web Forms into AngularQ&A199. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Summary .Q&Aix. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264Workshop.ExerciseHOUR 22: Using Angular with ASP.NET Web API. . . . . . . . . . . . . . . . . . . . . .Single-Page Apps with Angular and Web APICreating a Simple Web API265. . . . . . . . . . . . . . . . . . . . .265. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266
xTable of ContentsConsuming the Web API in Angular. . . . . . . . . . . . . . . . . . . . . . . . . . .273Consuming Other APIs with Angular. . . . . . . . . . . . . . . . . . . . . . . . . . .285. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291Summary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292Workshop.ExerciseHOUR 23: Using Angular with ASP.NET SignalR. . . . . . . . . . . . . . . . . . . . . . .293. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294When Should You Use SignalR?Configuring SignalRAdding SignalR to the OWIN Pipeline . . . . . . . . . . . . . . . . . . . . . . . . . .294Sending SignalR Messages in Your API. . . . . . . . . . . . . . . . . . . . . . . . . .297. . . . . . . . . . . . . . . . . . . . . . . . .299. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305Receiving SignalR Messages in AngularSummary .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .306. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .306Workshop.ExerciseHOUR 24: Focus on the Future. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .What’s the Current Status of Angular?What’s Changing in Angular 2? .307. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .308. . . . . . . . . . . . . . . . . . . . . . . . . .309. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311How Can You Prepare for Angular 2? .ES6Web Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Why the First 23 Hours of This Book Are More ImportantThan This Last Hour . . . . . . . . . . . . . . . . . . . . . . . . . . .Q&A312. . . . . . . . . . . .315. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .316. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319Workshop.ExerciseIndex307. . . . . . . . . . . . . . . . . . . . . . . . . .
About the AuthorsDennis Sheppard began his development career more than 20 years ago on an AppleIIe writing BASIC programs that printed “Hello!” an infinite number of times. It wasn’tquite love at first sight, but it was close enough. Several years later, after graduatingfrom Louisiana Tech University with a computer science degree, Dennis got all professional with front-end development using ExtJS and .NET. Since then, he’s worked with aplethora of technologies, including a handful of JavaScript frameworks. He’s quite smittenwith AngularJS and the roller coaster ride that is being a front-end developer. Dennis is aMicrosoft Certified Solutions Developer and has delivered enterprise solutions for the privateequity, insurance, healthcare, education, and distribution industries. Dennis is now theFront-End Architect at NextTier Education in Chicago, and lives in the suburbs with his wife,two kiddos, and a golden retriever.Christopher Miller is an Architect in West Monroe Partners’ Technology practice.He received a B.S. with Highest Distinction in computer and information technologyfrom Purdue University and started full-time at West Monroe Partners shortly thereafter.Beginning his career in the private equity space, he helped transform his client’s agingapplications into modern web applications with the help of newer UI technologies such asHTML5 and jQuery.He has moved on from investment management applications and is currently working ona Software-as-a-Service solution in the renewable energy space at West Monroe Partners. AMicrosoft Certified Solutions Developer in Web Applications, his interests include multi-tenancy, RESTful API development, message-based architecture, Microsoft Azure, and of course,AngularJS and other front-end web technologies. Chris lives with his new wife, Hatlyn, inChicago’s West Loop neighborhood.AJ Liptak is a Senior Consultant at West Monroe Partners in the Technology practice,focusing on modern web applications. After earning his degree in computer informationsystems from Bradley
No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without . with AngularJS and the roller coaster ride that is being a front-end developer. Dennis is a . most of his free
