PROFESSIONAL ANGULARJS INTRODUCTION xxv CHAPTER Building a Simple AngularJS Application CHAPTER Intelligent Workflow and Build Tools 57 CHAPTER Architecture 95 CHAPTER Data Binding 131 CHAPTER Directives 157 CHAPTER Templates, Location, and Routing 185 CHAPTER Services, Factories, and Providers 217 CHAPTER Server Communication 243 CHAPTER Testing and Debugging AngularJS Applications 277 CHAPTER 10 Moving On 315 APPENDIX Resources 345 INDEX 347 PROFESSIONAL AngularJS PROFESSIONAL AngularJS Valeri Karpov Diego Netto Professional AngularJS Published by John Wiley & Sons, Inc 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com Copyright © 2015 by John Wiley & Sons, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: 978-1-118-83207-3 ISBN: 978-1-118-83209-7 (ebk) ISBN: 978-1-118-83208-0 (ebk) Manufactured in the United States of America 10 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600 Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose No warranty may be created or extended by sales or promotional materials The advice and strategies contained herein may not be suitable for every situation This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services If professional assistance is required, the services of a competent professional person should be sought Neither the publisher nor the author shall be liable for damages arising herefrom The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Web site may provide or recommendations it may make Further, readers should be aware that Internet Web sites listed in this work may have changed or disappeared between when this work was written and when it is read For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002 Wiley publishes in a variety of print and electronic formats and by print-on-demand Some material included with standard print versions of this book may not be included in e-books or in print-on-demand If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http:// booksupport.wiley.com For more information about Wiley products, visit www.wiley.com Library of Congress Control Number: 2014951014 Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc and/or its affiliates, in the United States and other countries, and may not be used without written permission All other trademarks are the property of their respective owners John Wiley & Sons, Inc., is not associated with any product or vendor mentioned in this book For my father, the elder Valeri Karpov, who taught me to never settle for “good enough.” —Valeri Karpov For my mother, Liliana, who showed me how to find happiness by living each day like it might be your last —Diego Netto INDEX Symbols {{ }} (curly brackets) data binding, 133 scopes, 171 & shortcut, 175 = shortcut, 175 @ shortcut, 173, 175 A actions, 259 afterEach( ) function, 282 aHrefSanitizationWhitelist( ) function, 238 all( ) function, 244 Android SDK, setup, 326 animation ngAnimate module, 211–212 StockDog application, 46–48 animation rule, 212 APIs (application programming interfaces) controllers and, 96 exposure to HTML, 128 exposure using controllers, 108–109 application module, 9–10 bootstrapping and, 11 dependencies, 10 applications building, 1–3 deployment, 53–55 directories, 6–7 scaffolding, Yeoman, 4–6 SPAs (single-page applications), 185 $apply function, 141, 162 architecture, importance, 95–96 arrays, data binding and, 152–155 asynchronous calls, 342–343 authenticate( ) function, 256 authentication, services, 127 automation, Make and, 82–84 B beforeEach( ) function, 282 bindings, 16 Bootstrap datepicker directive, 320–321 modals, 316–320 templates, 321–325 timepicker directive, 321 bootstrapping, 11 Bower, 5, 58 bower_components directory, 59 dependencies, 59–60 installation, 58 packages, 58 $broadcast( ) function, 100 browser Selenium, 293 testing, 285–288 Sauce, 288–292 347 callback hell – describe( ) function C callback hell, 342 CarouselController, 163–165 next( ) function, 174–175 cross-site scripting, 238 CSS (cascading style sheets), 211–212 animation rule, 212 @keyframes rule, 212 previous( ) function, 174–175 catch( ) function, 244 child scopes, 137 client-side routing ngRoute module, 19–20 routes adding, 20–21 using, 21–22 template views, 22–23 cloud computing, browser testing, 288–292 code, organization, modules and, 109–113 command-line Grunt, 60–62 Gulp, 73 commands, make, 83–84 compile function, 183–184 config( ) function, 252–253 confirm( ) function, 318 contenteditable directive, 41–43 $controller service, 219 controllers API exposure to HTML, 128 DashboardCtrl, 49–51 instantiation, 97 locals and, 97–98 MainCtrl, 25–26 ng-controller directive, 96 services and, 104 Cordova, 325, 329–330 setup, 326 crawlers, search engines, 201 Google AJAX crawling spec, 209 348 D dashboard, StockDog application, 49–53 DashboardCtrl controller, 49–51 data binding, 131–132 {{ }} (curly brackets), 133 benefits, 134–136 filters and, 145–146 converting objects to strings, 146–150 global function wrappers, 150–152 manipulating arrays, 152–155 ngInclude directive, 194–196 performance considerations, 142–145 datepicker directive, 320–321 date/time, Moment, 331–335 debug module, 309–311 debugging debug module, 309–311 DevTools (Chrome), 311–314 declarative programming, 135 decorating objects, 223 deep linking, 196 dependencies Bower, 59–60 services as, 104 dependency injection, 97, 218–219 $injector service, 219–220 versus singleton design pattern, 218 deployment, 53–55 describe( ) function, 282, 284 design patterns – event handler wrappers design patterns, master-detail, 145, 186 DevTools (Chrome), 311–314 $digest function, 141–142 directive( ) method, 15 directive function, 158 directives, 107–108 components, 171 contenteditable, 41–43 controllers and, API exposure, 108–109 datepicker, 320–321 DOM interface, 128–129 event handler wrappers, 159 writing, 162–165 HTML and, 158 imageCarousel, 167–169 myBackgroundImage, 160, 171–172 myNgClick, 162–165 ng-controller, 96 ngInclude, 112–113, 187–190 data binding, 194–196 performance and, 191 $templateCache service, 193–194 templates with script tags, 191–193 ngSwipeLeft, 163–164 ngSwipeRight, 163–164 overview, 157–159 render-only, 134, 159 writing, 160–162 replace setting, 176–179 restrict setting, 176–179 scopes, separate, 169–176 stkSignColor, 44–45 stkSignFade, 46–47 stkStockRow, 37–38 stkStockTable, 36–37 stk-Watchlist-Panel, 13–19 templates and, 167–169 changing at runtime, 179–184 compile function, 183–184 link function, 183–184 transclusion, 179–182 timepicker, 321 two-way, 134, 159 writing, 165–166 watch and update pattern, 160–161 directories bower_components, 59 projects, 6–7 structure, 113–114 large projects, 117–119 medium projects, 115–117 small projects, 114–115 dirty checking, 142 DOM (Document Object Model) directives, 13 integration tests, 292–293 HTML page, 297 $httpBackend, 293–297 ng-scenario, 298–303 Protractor, 304–309 interface, 128–129 DRY (don’t repeat yourself), 57 E ECMAScript, 315–316, 341–342 editing, forms, inline, 40–43 $emit( ) function, 99 encodeURIComponent function, 139–140 endSymbol function, 237 end-to-end tests, 279 error interceptors, 255–258 event emitter design pattern, 270–271 event handler wrappers, 134, 159 writing, 162–165 349 event-emitter module – functions event-emitter module, 105–107 compile, 183–184 events config( ), 252–253 event-emitter module, 105–107 confirm( ), 318 SCROLL_TO_BOTTOM, 101–102 describe( ), 282, 284 transmission, 99–102 expressions, 16, 136–137 $digest, 141–142 directive, 158 $emit( ), 99 encodeURIComponent, 139–140 F factories, 218, 222–224 factory( ) function, 222–224 factory function, 158 $filter, 158 filters, data binding and, 145–146 converting objects to strings, 146–150 global function wrappers, 150–152 manipulating arrays, 152–155 Firebase framework, 243, 273–275 forms inline editing, 40–43 validation, 16–17 frameworks Firebase, 243, 273–275 Ionic, 326–330 versus libraries, 277 LoopBack, 243, 264–270 Mocha, unit testing, 281–285 from keyword, 212 function annotations, 220–221 functions afterEach( ), 282 aHrefSanitizationWhitelist( ), 238 all( ), 244 $apply, 141 authenticate( ), 256 beforeEach( ), 282 $broadcast( ), 100 catch( ), 244 350 endSymbol, 237 factory, 158 factory( ), 222–224 getAll( ), 187 global, wrappers, 150–152 gotoList( ), 21 hash( ), 197 invoke( ), 219, 220–221 isValid, 105 it( ), 282, 284 link, 158 link, 183–184 MyController, 217 $on( ), 99 onChange, 174 path( ), 197 provider( ), 228–232 requestError, 255–258 response, 253 responseError, 255–258 search( ), 197 sendMessage, 273 service( ), 224–228 showConfirmation( ), 317–318 startSymbol, 237 submitPassword( ), 256 $templateCache.put, 194 $templateCache.removeAll, 194 then( ), 244–245 $timeout( ), 103 url( ), 197 validateForm( ), 283 $watch, 140, 170–171 getAll( ) function – Gulp G getAll( ) function, 187 getMore( ) function, 226–227 global functions, wrappers, 150–152 Google AJAX crawling spec, 209 gotoList( ) function, 21 Grunt, command-line tools, 60–62 directory structure, 62–63 Gruntfile.js, 63–64 plug-ins grunt-autoprefixer, 87–88 grunt-concurrent, 90–91 grunt-contrib-clean, 87 grunt-contrib-compass, 88 grunt-contrib-connect, 87 grunt-contrib-copy, 90 grunt-contrib-htmlmin, 89 grunt-contrib-imagemin, 89 grunt-contrib-jshint, 87 grunt-contrib-watch, 86–87 grunt-filerev, 88 grunt-google-cdn, 90 grunt-karma, 91 grunt-newer, 86 grunt-ng-annotate, 90 grunt-svgmin, 89 grunt-usemin, 88–89 grunt-wiredep, 88 load-grunt-tasks, 86 time-grunt, 86 tasks build, 92 connect task, 64–65 custom tasks, 69–72 default, 92 default task, 69 jshint task, 66–68 less task, 65–66 plug-ins, 62 serve, 91 test, 91 watch task, 68–69 when to use, 84 grunt-autoprefixer plug-in, 87–88 grunt-concurrent plug-in, 90–91 grunt-contrib-clean plug-in, 87 grunt-contrib-compass plug-in, 88 grunt-contrib-connect plug-in, 87 grunt-contrib-copy plug-in, 90 grunt-contrib-htmlmin plug-in, 89 grunt-contrib-imagemin plug-in, 89 grunt-contrib-jshint plug-in, 87 grunt-contrib-watch plug-in, 86–87 grunt-filerev plug-in, 88 grunt-google-cdn plug-in, 90 grunt-karma plug-in, 91 grunt-newer plug-in, 86 grunt-ng-annotate plug-in, 90 grunt-svgmin plug-in, 89 grunt-usemin plug-in, 88–89 grunt-wiredep plug-in, 88 Gulp arguments, 79–82 asynchronous behavior, 79–82 command-line tool, 73 Gulpfile, 73–74 nopt module, 79–80 plug-ins, 73 tasks connect task, 74–75 default task, 78–79 jshint task, 77 less task, 75–76 watch task, 77–78 when to use, 84 351 hash( ) function – @keyframes rule H hash( ) function, 197 hash pseudo-URL, 197 HTML (Hypertext Markup Language) directives and, 158 integration testing, 297 navigation bar creation, 23–25 HTML5 Shiv, 177 HTTP (Hypertext Transfer Protocol), 246 interceptors, 243 parameterization, 259–260 HTTP requests body, 246 setting, 248–249 configuration objects, 249–250 headers, 246 default, 250–251 interceptors, 251–258 JSON, 249 methods, 246 $resource service, 259–262 resources, 246 services for, 246–247 $http, 247–258 $resource, 259–262 status code, 246 XSS (cross site scripting), 249 $http service, 219, 248 $httpBackend, 293–297 I IDEs (integrated development environments), 326 imageCarousel directive, 167–169 imperative programming, 135 inheritance, scopes, 98–99, 137–142 $injector service, 219–220 352 inline editing, forms, 40–43 installation Bower, 58 packages, 58–59 Yeoman, 4–5 integration tests, 279 DOM, 292–293 HTML page, 297 $httpBackend, 293–297 ng-scenario, 298–303 Protractor, 304–309 interceptors, 251–253 error interceptors, 255–258 request interceptors, 253–255 interpolation delimiters, 236–237 $interpolationProvider provider, 236 invoke( ) function, 219, 220–221 Ionic framework, setup, 326 isolate scopes, 169–170 isValid function, 105 it( ) function, 282, 284 J JavaScript Moment, 331–335 Mongoose, 335–341 JSON, HTTP requests and, 249 K Karma, 285–288 Sauce and, 288–292 karma-mocha package, 286 KeenIO, 110–111 @keyframes rule, 212 keywords – ngInclude directive keywords from, 212 to, 212 this, 227 yield, 342–343 L lexical scope, 227 libraries, versus frameworks, 277 link function, 158 link function, 183–184 links, whitelisting, 237–240 linting, 66–68 load-grunt-tasks plug-in, 86 loading modules Browserify, 122–126 RequireJS, 119–121 locals, 97–98 $location service, 196 hash( ) function, 197 overview, 197–198 page state, 198–200 path( ) function, 197 url( ) function, 197 LoopBack framework, 243 scaffolding REST APIs, 264–270 M MainCtrl controller, 25–26 Make, 82–84 when to use, 84 make command, 83–84 makefile, 83 mangling, 220 master-detail design pattern, 145, 186 views, 226 minifiers, 220 Mocha framework, unit testing, 281–285 $modal service, 316–320 $modalInstance, 319 models, 131 viewing, data binding and, 132 ModelService paradigm, 102–103 modules code organization, 109–113 loaders Browserify, 122–126 RequireJS, 119–121 ngRoute, 19–20 Moment, 331–335 Mongoose, 335–341 MVC (Model-View-Controller), 131 MVVM (Model-View-ViewManager), 132 MVW (Model-View-Whatever), 132 myBackgroundImage directive, 160, 171–172 MyController function, 217 myNgClick directive, 162–165 N navigation bar HTML, 23–25 MainCtrl controller, 25–26 ngAnimate module, 211–215 ngBind attribute, 133, 157, 160–161 ngClick attribute, 133–134, 157 implementation, 158–159 ng-controller directive, 96 instances, 97 ngInclude directive, 112–113 performance and, 191 $templateCache service, 193–194 353 ngInclude directive – restrict setting ngInclude directive (continued) templates, 187–190 data binding, 194–196 script tags, 191–193 ngRepeat, 143–145 ngRoute module, 200–203 client-side routing, 19–20 ng-scenario, 292–293 DOM integration tests, 298–303 ngSwipeLeft directive, 163–164 ngSwipeRight directive, 163–164 NodeJS, 186 Node.js, nopt module, 79–80 NPM (Node Packaged Modules), O objects converting to strings, 146–150 decorating, 223 ODM (object-document mapper), 335–341 $on( ) function, 99 onChange function, 174 OtherModule, 109–110 P packages Bower and, 58 installation, 58–59 karma-mocha, 286 parameterization, 259–260 path( ) function, 197 patterns, master-detail design pattern, 186 performance data binding and, 142–145 ngInclude directive, 191 354 plug-ins Grunt, 62 Gulp, 73 Prerender, 207–209 programming declarative, 135 imperative, 135 projects, sca, 4–5 promises, 244–245 all( ) function, 244 catch( ) function, 244 then( ) function, 244–245 Protractor, 304–309 provider( ) function, 228–232 providers, 218 built-in, interpolation delimiters, 236–237 R real time, 270 regular expressions, whitelisting and, 238–239 render-only directives, 134, 159 writing, 160–162 replace setting, 176–179 request interceptors, 253–255 requestError function, 255–258 resource objects, 259–260 $resource service, 259–262 response function, 253 responseError function, 255–258 REST (Representational State Transfer), 243–244 REST API scaffolding, LoopBack framework, 264–270 Twitter, 262–264 RESTful APIs, 243 restrict setting, 176–179 $rootScope service – stkStockTable directive $rootScope service, 101 $rootScope service, 240 $rootScopeProvider, 240 route parameters, 260 $routeParams service, 205 $routeProvider, 202–205 routing client-side, 19–20 adding routes, 20–21 template views, 22–23 using routes, 21–22 SPAs and, 200–201 S Sauce, 288–292 scaffolding projects, Yeoman and, 4–6 REST APIs, LoopBack framework, 264–270 $scope service, 218 scope setting, 170–176 scopes, 136–137 {{ }} (curly brackets), 171 $apply function, 141 child scopes, 137 $digest function, 141–142 directives, separate scopes, 169–176 inheritance, 98–99, 137–142 isolate, 169–170 lexical scope, 227 $watch function, 140 SCROLL_TO_BOTTOM event, 101–102 search( ) function, 197 search engines, 201 Google AJAX crawling spec, 209 SPAs and, 207, 210–211 SelectModalController controller, 318–319 Selenium, 293 sendMessage function, 273 service( ) function, 224–228 services, 218 $controller, 219 controllers and, 104 dependence on other services, 104–105 event-emitter module, 105–107 factory( ) function, 222–224 $http, 219, 248 $injector, 219–220 loading, 127 $modal, 316–320 provider( ) function, 228–232 $resource, 259–262 $rootScope, 240 $scope, 218 service( ) function, 224–228 singletons, 223–224 $stockPrices, 234–236 storing, 127 use cases, 232–233 $user, 233–234 showConfirmation( ) function, 317–318 singleton design pattern, versus dependency injection, 218 singletons, 223–224, 232 SPAs (single-page applications), 185 crawlers and, 201 Google AJAX crawling spec, 209 master-detail design pattern, 186 navigation, 205–207 Prerender, 207–209 routing and, 200–201 search engines and, 207, 210–211 startSymbol function, 237 stkSignColor directive, 44–45 stkSignFade directive, 46–47 stkStockRow directive, 37–38 stkStockTable directive, 36–37 355 StockDog application – testing StockDog application, addstock-modal.html, 27–29 animation, 46–48 application module, 9–10 bootstrapping, 11 client-side routing adding routes, 20–21 ngRoute module, 19–20 route use, 21–22 template views, 22–23 CompanyService, 27 contenteditable directive, 41–43 currency format, 44–45 dashboard, 49–53 deployment, 53–55 forms, inline editing, 40–43 navigation bar HTML, 23–25 MainCtrl controller, 25–26 QuoteService, 33–35 services, invoking, 35 stkSignColor directive, 44–45 stkStockRow directive, 37–38 stkStockTable directive, 36–37 stk-Watchlist-Panel directive, 13–19 Stock Table, 36–40 template, 39–40 stocks, adding, 26–32 Watchlist view, updating, 40 watchlist view, 31–32 WatchlistCtrl, 30–31 watchlists, 9–19 WatchlistService, 11–13 updating, 29–30 Yahoo Finance integration, 32–35 $stockPrices service, 234–236 strings, converting from objects, 146–150 submitPassword( ) function, 256 swipe-enabled carousel, 163 356 T tasks Grunt build, 92 connect, 64–65 default, 69, 92 jshint, 66–68 less, 65–66 serve, 91 test, 91 watch, 68–69 Gulp connect, 74–75 default, 78–79 jshint, 77 less, 75–76 watch, 77–78 $templateCache service, 193–194 $templateCache.put function, 194 $templateCache.removeAll function, 194 templates, 16–17, 186, 187–188 Boostrap, 321–325 directives and, 167–169 compile function, 183–184 link function, 183–184 transclusion, 179–182 lazy loading, 189 loading via HTTP request, 193–194 ngInclude directive, 187–190 data binding, 194–196 script tags, 191–193 template views, 22–23 testing browser, 285–288 Sauce, 288–292 then( ) function – Yeoman end-to-end, 279 integration tests, 279 philosophy, 277–279 pyramid, 279–280 unit testing, 278–279 Mocha framework, 281–285 then( ) function, 244–245 this keyword, 227 time-grunt plug-in, 86 $timeout( ) function, 103 timepicker directive, 321 to keyword, 212 transclusion, directives, 179–182 transmission, events, 99–102 two-way directives, 134, 159 writing, 165–166 U UI (user interface) See also views data binding and, 131 event handlers, 132 unit testing, 278–279 Mocha framework, 281–285 url( ) function, 197 URLs (uniform resource locators), 196 $user service, 233–234 UX (user experience), 185 design pattern, 100–101 W watch and update pattern of directives, 160–161 $watch function, 140, 170–171 WatchlistService, 11–13 web sockets, 243, 270–273 whitelisting links, 237–240 wrappers, global functions, 150–152 writing directives, render-only, 160–162 event handler wrappers, 162–165 two-way directives, 165–166 X-Y XSS (cross site scripting), HTTP requests and, 249 Yeoman Bower, clean up, 8–9 files, generated, 6–7 generators angular-fullstack, 93 ionic, 93 jhipster, 93 subgenerators, 92–93 Grunt, Grunt plug-ins grunt-autoprefixer, 87–88 grunt-concurrent, 90–91 grunt-contrib-clean, 87 grunt-contrib-compass, 88 V grunt-contrib-connect, 87 grunt-contrib-copy, 90 validateForm( ) function, 283 grunt-contrib-htmlmin, 89 validation, forms, 16–17 views, 186 data binding, 131 grunt-contrib-imagemin, 89 grunt-contrib-jshint, 87 grunt-contrib-watch, 86–87 357 Yeoman – yield keyword Yeoman (continued) grunt-filerev, 88 grunt-google-cdn, 90 grunt-karma, 91 grunt-newer, 86 grunt-ng-annotate, 90 grunt-svgmin, 89 grunt-usemin, 88–89 grunt-wiredep, 88 load-grunt-tasks, 86 time-grunt, 86 358 Grunt tasks build, 92 default, 92 serve, 91 test, 91 installation, 4–5 Ionic framework and, 329–330 overview, 84–85 plug-ins, 85–92 scaffolding projects, 85 yield keyword, 342–343 WILEY END USER LICENSE AGREEMENT Go to www.wiley.com/go/eula to access Wiley’s ebook EULA ... 347 PROFESSIONAL AngularJS PROFESSIONAL AngularJS Valeri Karpov Diego Netto Professional AngularJS Published by John Wiley & Sons, Inc 10475 Crosspoint... Loopback AngularJS SDK 262 264 265 265 266 266 267 Using Web Sockets with AngularJS 270 Using Firebase with AngularJS 273 Conclusion 275 Chapter 9: T ESTING AND DEBUGGING ANGULARJS APPLICATIONS AngularJS. .. discussion of the AngularJS testing ecosystem and the different types of testing strategies you can use for your AngularJS applications WHEN NOT TO USE ANGULARJS Like any library, AngularJS is a