Book Image

Learning Angular - Second Edition

By : Christoffer Noring, Pablo Deeleman
Book Image

Learning Angular - Second Edition

By: Christoffer Noring, Pablo Deeleman

Overview of this book

<p>The latest version of Angular comes with a lot of new features that help you to make your applications smaller and faster. This book will show you how to set up an Angular project, and you’ll build Angular components right from the beginning.</p> <p>Moving on, you’ll explore and work with the components to build your app. Next, you’ll find out more about TypeScript and see how to use it to build apps in the best way possible. You’ll then be introduced to the building blocks - Properties, Events, Directives, and Pipes - and how it can be used to implement and enhance the components.</p> <p>Additionally, you’ll be using Angular components to organize your components in a scalable way. Then you’ll understand how to get data in your app and add navigation to it. Furthermore, you’ll deep dive and work with Forms, Authentication, and see how Material design will help you make your app beautiful in just a few short lines of code. Lastly, you’ll see how to use animating components with Angular, and test and debug the app.</p> <p>All in all, the overall mission is to give you a great start when developing apps using Angular and TypeScript.</p>
Table of Contents (21 chapters)
Title Page
Credits
About the Authors
www.PacktPub.com
Customer Feedback
Preface
2
IDEs and Plugins

Preface

We have come a long way since 2010, when AngularJS was first released. Internet wasn't really made to be an application platform but one for rendering static pages. This has, of course, changed as developers have started treating it more and more as their main application platform. The promise of reaching billions of people has been too enticing. This meant that the web had to grow up. Different approaches have been tried during the years, such as JSP, GWT, Web Forms for .NET, and so on—approaches that have been more or less successful. What is clear is that when AngularJS showed up, it was greeted as a savior. It made it super easy for everyone to quickly create an application with JavaScript, CSS, HTML, and even use AJAX. It's still a valid choice for building small to medium applications.

The easier something is to use, the more likely it is that people will treat it like ketchup and start adding more and more to it to and use it everywhere. AngularJS was never meant for large enterprise applications. The Internet progressed and more and more features became available in the browser. There was an idea of wanting to incorporate all these new features but also to ensure that AngularJS could be used for really large applications. A decision was taken that it would be easier to start over from scratch and create Angular, the successor of AngularJS. And so, on 14 September 2016, the release version of Angular saw the light of day. Since then major versions of Angular have been produced at a furious pace.

We are now on version 5. This does not mean that Angular core concepts have changed, they have been retained. Certain breaking changes have been introduced along the way, but every major version has firstly corrected bugs, introduced new features, and really aimed at making Angular apps as fast as possible and their footprint as small as possible. This is a worthy goal to have in today's mobile-first world. 

This book aims to introduce the reader to all the major facets of Angular, and show you how to build small, medium, and, even, large applications. You don't need much knowledge to get started with Angular applications, but there are many layers to it. As your app grows in size, you will want to care about making it prettier, faster, easier to maintain, and so on. This book is written with that in mind. Take your time reading this book. If you want to read a few chapters and build some apps, do it. If you want to jump straight into the more advanced features, then that is your prerogative.

We hope you will enjoy reading this book as much as we enjoyed writing it

What this book covers

Chapter 1, Creating our First Component inAngular, covers Semantic versioning. This is an important concept to grasp, so you know whether to adopt new releases based on your needs. This chapter also introduces the reader to the Angular CLI and the reader will be taking their first steps into writing an Angular application. 

Chapter 2, IDEs and Plugins, introduces you to the most popular IDEs. The most common Angular plugins and snippets are also described to further boost developer productivity. 

Chapter 3, Introducing TypeScript, introduces TypeScript, which is the chosen language for coding Angular apps. There is more to TypeScript than just adding types. Your code can be made elegant and more secure, and using the right features will save you from typing quite a lot. 

Chapter 4, Implementing Properties and Events in our Components, covers how to send data to components and how to bind methods to them so that the components have the ability to communicate upstream.

Chapter 5, Enhancing our Component with Pipes and Directives, shows how you can make your component more consistent and reusable with the help of pipes and directives. 

Chapter 6, Building an Application with Angular Components, dives right into our goal of building a real application. We address how to think and how to use the most common structural directives in order to control how the data should be displayed and act when being manipulated by UI elements.

Chapter 7, Asynchronous Data Services with Angular, introduces the RxJS library, which not only helps us with AJAX but also facilitates reactive application patterns. All things async become one concept under RxJS, the possibilities that this introduces are endless. 

Chapter 8, Firebase, explains Firebase, which is a product by Google that allows you to have backend as a service. Firebase lets you focus on building Angular apps while it takes care of almost everything else. The best part is Firebase's reactive nature, which makes chat-like applications as well as collaboration apps a breeze to create.

Chapter 9, Routing, explains the concept of routing, so you can scale your application seamlessly.

Chapter 10, Forms in Angular, covers the two main ways of dealing with forms and user input: template-driven and the reactive approach.

Chapter 11, Angular Material, takes you through Angular Material, which not only offers a beautiful interface but also comes with a bunch of components that will make it a piece of cake to quickly assemble an impressive application.

Chapter 12, Animating Components with Angular, covers how well Angular supports the developer in leveraging and controlling quite advanced animations.

Chapter 13, Unit Testing in Angular, explains unit testing in Angular. The Angular team has really added first-class support for testing, so you, with a very few lines of code, are able to test all the possible constructs your mind can dream up. Everything from component, service, and directives to E2E testing.

Appendix A, SystemJS, covers SystemJS, which is a module loader and used to be the only way to set up an Angular application. It's still a valid way to set up your project. This Appendix will cover the core parts of SystemJS and zoom in on the Angular set up bit in particular.

Appendix B, Webpack with Angular, aims at showing the developer how to set up your Angular project with Webpack. There definitely exists a user base that wants complete control of every aspect of a web project. If that is you, then this appendix is for you.

What you need for this book

To really appreciate this book, we assume that you are familiar with HTML, CSS, and JavaScript, to a certain degree, as well as calling services with AJAX. We also assume that you have a fair understanding of REST. Modern web application development has become quite a daunting task, but it is our hope that you will, after having read this book, feel that you understand more about what's going on, and that you will also feel more than able to take on your next web development project using Angular.

As you will spend most of your time writing JavaScript, HTML, or CSS code, we only assume that you have access to a decent text editor. The more accomplished editor you use, the more help you will get, which is why we introduce some plugins and best practices in this book to make your everyday work less painful.

Who this book is for

This book is intended for web developers with no prior knowledge of Angular but who are experienced in JavaScript, Node.js, HTML, and CSS and are reasonably familiar with the idea of Single Page Applications.

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning. Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Import the reactive Forms module."

A block of code is set as follows:

class AppComponent {
  title:string = 'hello app';
}

Any command-line input or output is written as follows:

npm install -g @angular/cli

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "We go to the Database menu option on our left."

Note

Warnings or important notes appear like this.

Note

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply email [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files emailed directly to you. You can download the code files by following these steps:

  1. Log in or register to our website using your email address and password.
  2. Hover the mouse pointer on the SUPPORT tab at the top.
  3. Click on Code Downloads & Errata.
  4. Enter the name of the book in the Search box.
  5. Select the book for which you're looking to download the code files.
  6. Choose from the drop-down menu where you purchased this book from.
  7. Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR / 7-Zip for Windows
  • Zipeg / iZip / UnRarX for Mac
  • 7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learning-Angular-Second-Edition. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from http://www.packtpub.com/sites/default/files/downloads/LearningAngularSecondEdition_ColorImages.pdf.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title. To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at [email protected] with a link to the suspected pirated material. We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.