Learning Angular, Fourth Edition: A no-nonsense beginner's guide to building web applications with Angular 13 and TypeScript
Welcome to Packt Early Access. We’re giving you an exclusive preview of this book before it goes on sale. It can take many months to write a book, but our authors have cutting-edge information to share with you today. Early Access gives you an insight into the latest developments by making chapter drafts available. The chapters may be a little rough around the edges right now, but our authors will update them over time.
You can dip in and out of this book or follow along from start to finish; Early Access is designed to be flexible. We hope you enjoy getting to know more about the process of writing a Packt book.
- Chapter 1: Building your First Angular application
- Chapter 2: Introduction to TypeScript
- Chapter 3: Organizing Application into Modules
- Chapter 4: Enabling User Experience with Components
- Chapter 5: Enrich Applications...
Technical requirements
What is Angular?
Angular is a development platform that is written in the TypeScript language. It consists of smaller sub-systems, including a JavaScript framework, a command-line interface, a language service, and a rich collection of first-party libraries.
Angular enables developers to build scalable web applications with TypeScript, a strict syntactic superset of JavaScript. Developing with Angular does not require knowledge of JavaScript, but it is nice to have. We will learn more details about TypeScript in Chapter 2, Introduction to TypeScript.
The official Angular documentation can be found at https://www.angular.io.
We suggest relying first on the official Angular documentation and then on any other sources because it is the most up-to-date source for Angular development.
Angular was created by a team internally at Google. The first version, 1.0, was released in 2012 and was called AngularJS. AngularJS was a JavaScript framework, and web applications...
Why choose Angular?
The power of the Angular platform is based on the combination of the following characteristics:
- The main pillars of the platform: cross-platform, incredible tooling, and easy onboarding
- The usage of Angular worldwide
In the following sections, we will examine each characteristic in more detail.
Cross-platform
Angular applications can run on different platforms: web, server, desktop, and mobile. Angular can run natively only on the web because it is a JavaScript framework. However, it is open-source and is backed by a vast and incredible community that enables the framework to run on the remaining three using the following integrations:
Setting up the Angular CLI workspace
Setting up a frontend project today is more cumbersome than ever. We used to manually include the necessary JavaScript and CSS files in our HTML. Life used to be simple. Then frontend development became more ambitious: we started splitting our code into modules and using special tools called preprocessors for our code and CSS.
Our projects became more complicated, and we started to rely on build systems to bundle our applications. As developers, we are not huge fans of configuration—we want to focus on building awesome apps. However, modern browsers do more to support the latest web standards, and some have even started to support JavaScript modules. That said, this is far from being widely supported. In the meantime, we still have to rely on bundling and module support tools.
Setting up a project with Angular can be tricky. You need to know what libraries to import and ensure that files are processed in the correct order, which...
Structure of an Angular application
We are about to take the first intrepid steps into examining our Angular application. The Angular CLI has already scaffolded our project and has carried much heavy lifting for us. All we need to do is fire up our favorite IDE and start working with the Angular project. We will use VS Code in this book, but feel free to choose any editor you are comfortable with:
- Open VS Code and select File | Open Folder… from the main menu.
- Navigate to the
my-app
folder and select it. VS Code will load the associated Angular project. - Navigate to the
src
folder.
When we develop an Angular application, we’ll likely interact with the src
folder. It is where we write the code and tests of our application. It is also where we define the styles of our application and any static assets we use, such as icons, images, and JSON files. It contains the following:
app
: Contains all the Angular-related files of the application...
VS Code tooling
VS Code is an open-source code editor backed by Microsoft. It is very popular in the Angular community, primarily because of its robust support for TypeScript. TypeScript has been, to a great extent, a project driven by Microsoft, so it makes sense that one of its popular editors was conceived with built-in support for this language. All the nice features we might want are already baked in, including syntax, error highlighting, and automatic builds. Another reason for its broad popularity is the various extensions available in the marketplace that enrich the Angular development workflow. What makes VS Code so great is not only its design and ease of use but also the access to a ton of plugins, and there are some great ones for Angular development. The most popular are included in the Angular Essentials extension pack from John Papa. To get it, go through the following steps:
- Navigate to the Extensions menu of VS Code.
- Type
Angular Essentials
in the...
Summary
That’s it! Your journey to the world of Angular has just begun. Let’s recap the features that you have learned so far. We learned what Angular is, looked over the brief history of the platform, and examined the benefits of using it for web development.
We saw how to set up our development workspace and find the tools we need to bring TypeScript into the game. We introduced the Angular CLI tool, the Swiss Army knife for Angular, that automates specific development tasks. We used some of the most common commands to scaffold our first Angular application. We also examined the structure of our application and learned how to interact with it.
Our first application gave us a basic understanding of how Angular works internally to render our application on a web page. We embarked on our journey, starting with the main HTML file of an Angular application. We saw how Angular parses that file and starts searching the component tree to load the main component. We...