Learning Angular

A no-nonsense beginner's guide to building web applications with Angular 10 and TypeScript, 3rd Edition

Aristeidis Bampakos, Pablo Deeleman

• Publisher: Packt Publishing
• Year: 2020
• ISBN:
  9781839215575
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Uncover Angular's potential for creating enterprise web applications—from setting up the environment to deployment—with the help of expert guidance, step-by-step explanations, and hands-on exercises

Key Features

• Learn the fundamentals of Angular to build web applications using TypeScript
• Explore the basics of Angular development, from components and templates to forms and services
• Discover best practices for building, packaging, and testing Angular applications

Book Description

Angular, loved by millions of web developers around the world, continues to be one of the top JavaScript frameworks thanks to its regular updates and new features that enable fast, cross-platform, and secure frontend web development. With Angular, you can achieve high performance using the latest web techniques and extensive integration with web tools and integrated development environments (IDEs).Updated to Angular 10, this third edition of the Learning Angular book covers new features and modern web development practices to address the current frontend web development landscape. If you are new to Angular, this book will give you a comprehensive introduction to help you get you up and running in no time. You'll learn how to develop apps by harnessing the power of the Angular command-line interface (CLI), write unit tests, style your apps by following the Material Design guidelines, and finally deploy them to a hosting provider. The book is especially useful for beginners to get to grips with the bare bones of the framework needed to start developing Angular apps.By the end of this book, you'll not only be able to create Angular applications with TypeScript from scratch but also enhance your coding skills with best practices.

What you will learn

• Use the Angular CLI to scaffold, build, and deploy a new Angular application
• Build components, the basic building blocks of an Angular application
• Discover techniques to make Angular components interact with each other
• Understand the different types of templates supported by Angular
• Create HTTP data services to access APIs and provide data to components
• Enhance your application's UX with Angular Material
• Apply best practices and coding conventions to your large-scale web development projects

Who this book is for

The Angular TypeScript book is for JavaScript and full-stack developers who want to enter the world of frontend development with Angular or migrate to the Angular framework to build professional web applications. Familiarity with web and programming concepts will assist with understanding the content covered in the book.

]]>

Section 1: Getting Started with Angular

This section explains how to use the Angular CLI 10 to scaffold a simple Hello World application and covers the basics of TypeScript the language used when writing Angular applications.

This part comprises the following chapters:

• Chapter 1, Building Your First Angular App
• Chapter 2, Introduction to TypeScript

Chapter 1: Building Your First Angular App

To better understand how to develop an Angular application, we need to learn some basic but essential things so that we can have a great experience on our journey with the Angular framework. One of the basic things that we should know is semantic versioning, which is the way that the Angular team has chosen to deal with changes between different versions of the framework. It will hopefully make it easier to find the right solutions to future app development challenges when you visit the official Angular documentation website (https://angular.io) or other sites (such as Stack Overflow) to search for solutions.

Another important but sometimes painful topic is that of project setup. It is a necessary evil that needs to be done at the beginning of a project, but getting this right early on can reduce a lot of friction as your application grows. Therefore, a large part of this chapter is dedicated to Angular CLI, a tool developed by the Angular team that provides scaffolding and automation tasks in an Angular app, demystifying the process and enabling you as a developer to save yourself from facing future frustrations and migraines. We will use the Angular CLI to create our first application from scratch, get a feel for the anatomy of an Angular application, and take a sneak peek at how Angular works under the hood.

Working with an Angular project without an Integrated Development Environment (IDE) can be painful. Our favorite code editor can provide us with an agile development workflow that includes TypeScript compilation at runtime, static type checking, and introspection, code completion, and visual assistance for debugging and building our app. We will highlight some popular code editors and take a bird's eye view of how each one of them can assist us when developing Angular applications.

To sum up, here are the main topics that we will explore in this chapter:

• Semantic versioning, why it matters, and Angular's take on it
• How to set up an Angular project using Angular CLI 10
• How to use Angular CLI commands to accomplish certain tasks, such as building and serving an Angular app
• How to create our first application and begin to understand the core concepts in Angular
• The available tooling for Angular in popular IDEs

Technical requirements

• GitHub link: https://github.com/PacktPublishing/Learning-Angular--Third-Edition/tree/master/ch01
• Node.js: http://nodejs.org/
• Node Package Manager (npm): Included with Node.js
• Git: https://git-scm.com/downloads
• Visual Studio Code (VS Code): https://code.visualstudio.com/download

It's just Angular – introducing semantic versioning

Using semantic versioning is about managing expectations. It's about managing how the user of your application, or library, reacts when a change happens to it. Changes happen for various reasons, either to fix something broken in the code or to add/alter/remove a feature. Authors of frameworks or libraries use a way to convey what impact a particular change has by incrementing the version number of the software in different ways.

A piece of production-ready software traditionally has version 1.0, or 1.0.0 if you want to be more specific.

There are three different levels of change that can happen when updating your software. Either you patch it and effectively correct something, make a minor change that essentially means you add functionality, or make a major change that might completely change how your software works. Let's look at these changes in more detail in the following sections.

Patch change

A patch change means that we increment the rightmost digit by one. Changing software from 1.0.0 to 1.0.1 is a small change, and usually implies a bug fix. As a user of that software, you don't really have to worry; if anything, you should be happy that something is suddenly working better. The point is that you can safely start using 1.0.1.

Minor change

A minor change means that the software version increases from 1.0.0 to 1.1.0. We deal with more severe changes as we increase the middle digit by one. This number should increase when new functionality is added to the software, and it should still be backward compatible with the 1.0.0 version. In this case, it should be safe to start using the 1.1.0 version of the software.

Major change

With a major change, the version number increases from 1.0.0 to 2.0.0. Things might have changed so much that constructs have been renamed or removed. It might not be compatible with earlier versions. Please note that many software authors still ensure that there is decent backward compatibility, but the main point here is that there is no warranty, no contract guaranteeing that it will still work.

What about Angular?

Most people knew the first version of Angular as Angular 1; it later became known as AngularJS, but many still refer to it as Angular 1. It did not use semantic versioning.

Then Angular 2 came along, and in 2016 it reached production readiness. Angular decided to adopt semantic versioning, and this caused a bit of confusion in the developer community, especially when it announced that there would be an Angular 4 and 5 and so on. The Angular team, as well as the network of their Google Developer Experts, started to explain that we should call the latest version of the framework Angular—just Angular. You can argue the wisdom of that decision. Still, the fact remains that the new Angular uses semantic versioning, which means that Angular is the same platform as Angular 2, as well as Angular 10, and so on. Adopting semantic versioning means that you, as a user of the framework, can rely on things working the same way until Angular decides to increase the major version. Even then, it's up to you whether you want to remain on the latest major version or upgrade your existing apps.

Introducing Angular

Angular represents a full rewrite of the AngularJS framework, introducing a brand-new application architecture built entirely from scratch in TypeScript, a strict superset of JavaScript that adds optional static typing and support for interfaces and decorators.

In a nutshell, Angular applications are based on an architecture design that comprises trees of we...