Web Development with Angular and Bootstrap Third Edition Embrace responsive web design and build adaptive Angular web applications Sridhar Rao Chivukula Aki Iskandar BIRMINGHAM - MUMBAI Web Development with Angular and Bootstrap Third Edition Copyright © 2019 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 authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been 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 Commissioning Editor: Kunal Chaudhari Acquisition Editor: Larissa Pinto Content Development Editor: Keagan Carneiro Senior Editor: Martin Whittemore Technical Editor: Jinesh Topiwala Copy Editor: Safis Editing Project Coordinator: Manthan Patel Proofreader: Safis Editing Indexer: Tejal Daruwale Soni Production Designer: Nilesh Mohite First published: May 2015 Second edition: November 2016 Third edition: August 2019 Production reference: 1300819 Published by Packt Publishing Ltd Livery Place 35 Livery Street Birmingham B3 2PB, UK ISBN 978-1-78883-810-8 www.packt.com To my dear Bhavya, Pratyush, and Aaradhya for bringing joy, happiness, smiles, and strength into our lives – Sridhar Rao Chivukula Packt.com Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career For more information, please visit our website Why subscribe? Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals Improve your learning with Skill Plans built especially for you Get a free eBook or video every month Fully searchable for easy access to vital information Copy and paste, print, and bookmark content 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.packt.com and as a print book customer, you are entitled to a discount on the eBook copy Get in touch with us at customercare@packtpub.com for more details At www.packt.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 Contributors About the authors Sridhar Rao Chivukula is a technical lead at Mindtree Ltd and is based out of New York City He brings with him more than a decade of rich hands-on experience in all aspects of frontend engineering He has worked with leading companies such as Oracle, Tech Mahindra, and Cognizant Technology Solutions He has a Bachelor's degree in Information Technology He is the author of the books Expert Angular and PHP and script.aculo.us Web 2.0 Application Interfaces, published by Packt Aki Iskandar is an entrepreneur and software architect with over two decades of programming experience He has worked as a consultant for Microsoft, Compuware, Progressive Insurance, Allstate Insurance, KeyBank, Ernst & Young, and Charles Schwab, to name a few His last full-time job, before leaving the corporate world in 2011, was at PNC , where he served as an enterprise architect on their Enterprise Architecture team During that time, he served as a core member on PNC's Architecture Review Board, which was responsible for creating reference architectures, reviewing the architectural diagrams for IT projects that were in the tens of millions of dollars in size, and establishing IT Governance for the corporation He is the founder of VIZCARO.com (an online motivational service that helps thousands of people) and maintains a blog focusing on Angular and related technologies About the reviewer Phodal Huang is a developer, creator, and author He works at ThoughtWorks as a senior consultant and focuses on IoT and the frontend He is the author of Design IoT System, Thinking in Full Stack, and Frontend Architecture in Chinese He is an open source enthusiast and has created a series of projects on GitHub After his daily work, he likes to reinvent some wheels for fun He created the micro-frontend framework Mooa for Angular You can discover more wheels on his GitHub page, @phodal He loves designing, writing, hacking, and traveling You can also find out more about him on his personal website at phodal.com Packt is searching for authors like you If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea Table of Contents Preface Chapter 1: Quick Start Angular's evolution Angular's building blocks Components Templates Directives Modules Services Dependency injection Setting up your development environment Writing your first Angular application Using your development environment Location of your files Generating our to-do list application Serving up our to list application Angular basics Components Code listing for the to-do list application Interpolation Templating and styling Property binding Event binding Our sample project Annotated photo album Design principles Wireframes Wireframing tools Wireframes for our annotated photo album Home page Dashboard Image upload Photo preparation Create Album Photo listing Photo album listing Workbench Album viewer Paper prototyping Summary 10 10 10 10 11 11 12 14 14 15 15 16 18 18 20 24 26 27 29 29 30 30 31 31 31 32 32 33 34 35 35 36 37 37 38 40 Table of Contents Chapter 2: ECMAScript and TypeScript Crash Course The (quick) roadmap The relationship between JavaScript and TypeScript A series of fortunate events for JavaScript Chromium project Javascript frameworks ECMAScript 2015 TypeScript crash course Transpilation versus compilation let Const Data typing Objects JSON JavaScript runtime environment Arrays TypedArray Maps WeakMap Set WeakSet Classes Interfaces Inheritance Destructuring Template strings for-of loop Decorators Promises Modules Default exports Summary Chapter 3: Bootstrap - Grid Layout and Components A word about what this chapter is not Our example application Game plan Sass crash course What is Sass? Compass framework Two SASS styles Installing Ruby Installing Sass Online tools for Sass Offline tools for Sass Sass features and syntax Nesting Variables Mathematical operations Imports Extend [ ii ] 41 42 42 43 43 44 44 45 45 46 47 47 49 50 51 51 52 53 55 55 57 59 61 63 64 65 65 66 67 68 68 69 71 72 73 74 77 78 78 79 80 81 81 81 82 83 83 84 85 86 Table of Contents Mixins Placeholders Built-in functions Custom functions Bootstrap crash course What is Bootstrap? Motivation Bootstrap's role in our example application Installing Bootstrap Bootstrap's responsive grid system The container The row The column Differing viewport sizes Bootstrap components Button components Alert components Navbar component Modal components Listing Carousel – a formal introduction Idea generation/concept Analysis — feasibility study Requirement gathering Wireframes Implementation Installing our interim web server Welcome page Signup Login Listings Create listing Edit listing Wireframes collection Summary Chapter 4: Routing What is routing in Angular? Creating our application's shell using the CLI First things first – basic concepts Base Href RouterLink and RouterLinkActive Configuring routes for our application Parameterized routes Child routes Route guards Completing our route configuration Bootstrap navigation bar and router links directives Specifying the location for rendering the component templates Running our application Routing strategies [ iii ] 87 90 90 91 93 93 94 95 95 96 98 99 102 103 105 106 108 109 109 110 111 112 113 114 115 115 115 120 122 124 127 127 129 135 136 137 138 143 143 144 145 147 148 149 152 154 157 157 158 .. .Web Development with Angular and Bootstrap Third Edition Embrace responsive web design and build adaptive Angular web applications Sridhar Rao Chivukula Aki Iskandar BIRMINGHAM - MUMBAI Web Development. .. possible to build native mobile applications with Angular It's also possible to build cross-platform, desktop-installed applications with Angular Angular can also run on the server, using Angular. .. layout for your Angular applications Chapter 6, Building Angular Components, covers Angular components, the main building blocks of modern progressive web applications You will learn to build multiple