www.it-ebooks.info AngularJS by Example Learn AngularJS by creating your own apps, using practical examples which you can use and adapt Chandermani BIRMINGHAM - MUMBAI www.it-ebooks.info AngularJS by Example Copyright © 2015 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: March 2015 Production reference: 2030315 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78355-381-5 www.packtpub.com www.it-ebooks.info Credits Author Project Coordinator Chandermani Aboli Ambardekar Reviewers Proofreaders Idan Cohen Ting Baker Ashutosh Das Simran Bhogal Prasanna Gautam Stephen Copestake Ruoyu Sun Jurgen Van de Moere Indexer Priya Sane Commissioning Editor Ed Gordon Graphics Disha Haria Acquisition Editor Rebecca Youé Production Coordinator Conidon Miranda Content Development Editor Sriram Neelakantan Cover Work Conidon Miranda Technical Editors Edwin Moses Shruti Rawool Copy Editors Roshni Banerjee Neha Karnani Merilyn Pereira www.it-ebooks.info About the Author Chandermani is a software craftsman with a passion for technology and is an expert on the web stack. With more than a decade of experience under his belt, he has architected, designed, and developed solutions of all shapes and sizes on the Microsoft platform. He never believed JavaScript could be a great platform for app development until he saw Angular. Such is his love for this framework that every engagement he is part of has an Angular footprint. Being an early adopter of the Angular framework, he tries to support the platform in every possible way, whether by writing blog posts on various Angular topics or helping his fellow developers on Stack Overflow, where he is often seen answering questions on AngularJS channels. A former MSFT employee, he now works for Technovert, where he leads a bunch of awesome developers who build cloud-scale web applications using AngularJS and other new-age frameworks. Writing this book has just been a surreal experience and I would like to thank my Technovert family who supported me in all possible ways, be it helping me with sample apps, reviewing the content, or offloading some of my professional commitments to make sure I get enough time to write the book. I especially want to thank Vijay Yalamanchili, who inspired me to take up this endeavor and also made sure there are no impediments while I juggle my professional and book writing commitments. And finally, I want to express my gratitude toward my family. I know your blessings are always with me. www.it-ebooks.info About the Reviewers Idan Cohen is a full-stack web developer at HP Software. He has over a decade of experience in large-scale projects on an enterprise level. He has an unquenchable thirst for cutting-edge technologies and an insatiable hunger for seamless user experience. Since his military service in an elite technological unit (8200), he has worked with a variety of companies and organizations in the fields of media, telecommunication, and business services. Ashutosh Das is mainly a backend developer from Bangladesh with experiences of working with Django, Node.js, Laravel, and so on, as well as works with Angular. js. He spends his spare time in GitHub. He works as a freelancer and has a part-time job. He is also a reviewer of the book Angularjs UI development, Packt Publishing. Prasanna Gautam is an engineer who wears many different hats depending on the occasion. He's worked with various web frameworks over the years for both personal and professional projects and finally settled on AngularJS. When this book came up, he wanted to contribute to it from his experience working on AngularJS projects. www.it-ebooks.info Ruoyu Sun is a designer and developer living in Hong Kong. He is passionate about programming and has been contributing to several open source projects. He founded several tech start-ups using a variety of technologies before going into the industry. He is the author of the book Designing for XOOPS, O'Reilly Media. I would like to thank all my friends and family who have always supported me. Jurgen Van de Moere, born in 1978, grew up in Evergem, Belgium with his parents, sister, and pets. At the age of 6, he started helping his dad, who owned a computer shop, with assembling computers for clients. While his friends were playing computer games, Jurgen was rather fascinated by writing custom scripts and programs to solve problems that his dad's clients were dealing with. After graduating in latin-mathematics from Sint-Lievenscollege in Ghent, Jurgen continued his education at Ghent University, where he studied computer science. His Unix username at university was "jvandemo", the nickname he still goes by on the Internet today. In 1999, Jurgen started his professional career at Infoworld. After years of hard work and dedication as a developer and network engineer, he was awarded various management positions in 2005 and 2006. Being a true developer at heart, he missed writing code, and in 2007, he decided to end his management career to pursue his true passion again: development. Since then, he has been studying and working from his home office in Belgium, where he currently lives with his girlfriend, son, and dogs. In a rapidly evolving world of data, intensive real-time applications, he now focuses on JavaScript-related technologies with a heavy emphasis on AngularJS and Node.js. His many private and public contributions have helped form the foundation of numerous successful projects and companies around the world. If you need help with your project, Jurgen can be reached at [email protected], on his blog at http://www.jvandemo.com, or on Twitter at https://twitter.com/ jvandemo. www.it-ebooks.info www.PacktPub.com Support files, eBooks, discount offers, and more For support files and downloads related to your book, please visit www.PacktPub.com. Did you know that Packt offers eBook versions of every book published, with PDF and 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 [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM https://www2.packtpub.com/books/subscription/packtlib Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books. Why subscribe? • Fully searchable across every book published by Packt • Copy and paste, print, and bookmark content • On demand and accessible via a web browser Free access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access. www.it-ebooks.info www.it-ebooks.info Table of Contents Preface 1 Chapter 1: Getting Started 7 The basics of Model View Controller 8 The customary Hello Angular app (Guess the Number!) 8 Setting up a development server 9 Building Guess the Number! 10 The app model 10 The controller 12 The app view 13 Interpolation 15 Directives 16 Expressions 18 AngularJS bindings 20 Revisiting the controller 23 Scope 24 App bootstrapping 27 Tools 29 Resources 30 Summary 30 Chapter 2: Building Our First App – 7 Minute Workout 33 What is 7 Minute Workout? 34 Downloading the codebase 35 Code organization 36 Organizing the JavaScript code 36 The 7 Minute Workout model 39 Adding app modules 42 www.it-ebooks.info Table of Contents The app controller 42 Dependency injection 43 Dependency Injection 101 44 Dependency injection in Angular 45 Controller implementations 47 Tracking the duration of an exercise using the $interval service 50 Verifying the implementation 51 Implementing exercise transitions 54 Using $watch to watch the model's changes 54 Exploring $watch 55 Implementing transitions using $watch 57 Using the AngularJS Promise API for exercise transitions 58 The basics of promises 58 The 7 Minute Workout view 61 Image path binding with ng-src 62 Using ng-style with the Bootstrap progress bar 63 Adding start and finish pages 64 Understanding SPAs 64 View layouts for SPAs using ng-view 64 Defining 7 Minute Workout routes 65 The config/run phase and module initialization 66 View navigation in the controller using $location 69 Working with the $location service 70 Learning more about an exercise 71 Adding descriptions and video panels 72 Working with ng-include 75 Working with ng-repeat 77 Displaying the remaining workout