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...
