Step-by-Step Angular Routing

Learn To Create client-side and Single Page Apps with Routing and Navigation

Stephen Fluin

• Publisher: BPB Publications
• Year: 2019
• ISBN:
  9789388511667
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Want to know more about routing concepts in Angular? Key Features

• In this book, the reader will be able to focus on one concept of Angular in deep. Some of the concepts of Routing discussed are:
  - Lazy Loading
  - Routing Parameters
  - Route Guards
  
• The examples in the book talk us through building an e-commerce website which helps the reader to connect to the real-life business scenarios.
• The book commences with an introduction to the important concepts of Angular to understand in general and then moves to how Routing helps us build our applications much effectively.
• By the end of this book, you should be able to understand Routing perfectly being able to perform all the operations using Routing.
• Do not forget to code along with your reading the book. This will give you hands-on experience to gain out of the book. The book will be provided with a GitHub link to it.

Description
A basic understanding of HTML, CSS, JavaScript would be good to quickly get through the concepts of Angular. If you are already working in Angular, you are all good to go. The book starts with the introduction of basic concepts and structure of Angular applications like Components, Services, Modules, etc. This further focuses on the concepts of Routing, i.e. navigating from one view to another in your single-page applications. For all the web developers & students who love building web-apps, this book on Angular Routing will add great value to your skill set helping you to develop your applications with faster performance and refined view. What You Will Learn
In this book, you will learn the concepts of Angular routing to help you make your Angular applications more effective and have better performance when dealing with data. Who This Book is For
This book is for learning the concept of routing in angular applications. If you are working in Angular, this book serves the purpose of clearing all your concepts around navigation from one view to another in single page applications. If you are new to Angular, this book will give you an introduction of the basic concepts of Angular and then give you the expertise in one of those concepts, Routing. Table of Contents
1. Introduction
2. Introduction to Routing
3. Basics of Routing
4. Routing Features
5. Routing Parameters
6. Child Routes
7. Secondary Routes
8. Route Guards
9. Grouping & Component-less Routes
10. Route Resolvers
11. Lazy Loading
12. CRUD operations with Routing About the Author
Nishu Goel is a software developer currently working with IBM in Bengaluru, India. She has completed her Bachelor studies in computer science as in 2018. She works on Angular and keeps learning on the go. She loves to write blog posts and talk around the basic concepts of Angular at conferences. She is also the author of "Angular for Beginners" course on Udemy. With her work to apply technology towards sustainable development goals (SDGs) by the United Nations living in the villages of Jharkhand, India for three months, she has been awarded by the Prime Minister of the UK. LinkedIn Profile: https://www.linkedin.com/in/nishu-goel-ab557041/
Blog: https://nishugoel.wordpress.com/

CHAPTER 1

Introduction to Angular

We will start this book with the introduction to some basic concepts of Angular. In this chapter, we will cover the introduction to Angular, prerequisites to start with this framework, the version history of Angular, and the important concepts to start building your client-side applications in Angular.

In this chapter, we will focus on all the concepts required to start your learning Angular routing and all the required starter files can be found in the GitHub repository mentioned at the beginning of this book.

If you are familiar with the basic concepts of Angular, this book will help you dive deeper into the routing concepts of Angular. However, if you are totally new to Angular, you can skill up your concepts around the following topics that will be discussed in this chapter, and then you are all good to go.

• What is Angular?
• Components
• Directives
• Services
• Modules
• Routing

What is Angular?

Angular is a JavaScript framework used to build client-side applications using HTML, CSS, and a programming language such as JavaScript. It is a collection of components which contain the code to execute the applications and have an associated template that displays the data on the browser. Angular provides features like binding the data from the code to appear on the template, expressive HTML, built-in packages to interact with different services, service for back-end integration, and more.

Angular comprises components, services, directives, modules, pipes, etc. to make our applications much more effective. There are so many applications built on Angular now and there has been a shift in the world of web development after the introduction of the Angular framework from AngularJS to Angular 7 (soon to be Angular 8). Angular started as a side project in 2009 by Misko Hevery and Adam Abrons to help build web applications using HTML tags. The name Angular comes from the angle brackets used for HTML tags.

The basic structure of Angular includes:

• NgModules
• Components
• Directives
• Services and Dependency Injection
• Routing
• Data binding
• We will start by taking a look at how to set up a development environment for building applications with Angular.

Setting up a development environment

To build Angular applications, we would need to connect many dependencies, web development servers, and packages to each other. But to build and set up an Angular application from scratch takes some time.

Angular provides us with a command line tool for creating the Angular apps called Angular CLI.

Angular CLI provides us with all the required dependencies, boilerplates, takes care of the web pack configuration, unit test configuration, and transpiles TypeScript files to JavaScript.

To install Angular CLI on our local machine, we can use the node package manager npm.

Node.js can be downloaded from the browser at the following link as per your operating system:

https://nodejs.org/en/download/

Once it is installed, you can check to confirm if Node.js is installed properly in your machine.

To check if node is installed properly, use the following command:

node -version OR node -v

Fig 1.1

When we install node, it also installs the npm package manager along with itself. To check if npm is installed properly in your machine, use the following command as shown in the following screenshot:

npm -version OR npm -v

Fig 1.2

With node and npm installed, you can go ahead and install Angular CLI using the following command:

npm install -g @angular/cli

To check if Angular CLI is installed properly, use the command given below:

ng version OR ng v

Fig 1.3

With Angular CLI installed, you are good to proceed further. Now, you can create an Angular project with the help of Angular CLI and CLI does the work for you such as injecting required services, getting boilerplates, and so on.

To create a new Angular Project with the help of CLI, use the following command:

ng new <project-name>

With the later versions of Angular, when you create a new project and before moving further, CLI asks if you want to add routing to your application and builds the project accordingly. We will discuss routing later in this chapter. CLI also asks the styling framework you would like to use. You can choose any as per your requirement. It will then start building your project, which is shown in the following screenshot:

Fig 1.4

Once the project build is completed you will be able to view the following...