Getting Started With Angular 2nd Edition Stephen

Adams download

https://textbookfull.com/product/getting-started-with-
angular-2nd-edition-stephen-adams/

Download more ebook from https://textbookfull.com

We believe these products will be a great fit for you. Click
the link to download now, or visit textbookfull.com
to discover even more!

Getting Started with Kubernetes 2nd Edition Baier

https://textbookfull.com/product/getting-started-with-
kubernetes-2nd-edition-baier/

Getting Started with PhantomJS Beltran Aries

https://textbookfull.com/product/getting-started-with-phantomjs-
beltran-aries/

Getting Started with R: An Introduction for Biologists

2nd Edition Andrew Beckerman

https://textbookfull.com/product/getting-started-with-r-an-
introduction-for-biologists-2nd-edition-andrew-beckerman/

Getting Started with Gulp - Second Edition Travis

Maynard

https://textbookfull.com/product/getting-started-with-gulp-
second-edition-travis-maynard/
Make Getting Started with Processing py Allison Parrish

https://textbookfull.com/product/make-getting-started-with-
processing-py-allison-parrish/

Getting Started with EEG Neurofeedback John N. Demos

https://textbookfull.com/product/getting-started-with-eeg-
neurofeedback-john-n-demos/

Getting Started with Advanced C# 1st Edition Vaskaran

Sarcar [Sarcar

https://textbookfull.com/product/getting-started-with-
advanced-c-1st-edition-vaskaran-sarcar-sarcar/

Getting Started with Microsoft System Center Operations

Manager Kevin Greene

https://textbookfull.com/product/getting-started-with-microsoft-
system-center-operations-manager-kevin-greene/

Getting Started with Natural Language Processing MEAP

V06 Ekaterina Kochmar

https://textbookfull.com/product/getting-started-with-natural-
language-processing-meap-v06-ekaterina-kochmar/
Getting Started With Angular
Stephen Adams
This book is for sale at http://leanpub.com/getting-started-with-angular

This version was published on 2020-04-01

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.

© 2019 - 2020 Stephen Adams

Tweet This Book!
Please help Stephen Adams by spreading the word about this book on Twitter!
The suggested hashtag for this book is #gettingstartedwithangular8.
Find out what other people are saying about the book by clicking on this link to search for this
hashtag on Twitter:
#gettingstartedwithangular8
I thank my wife, Caroline, and children, Georgia and Charlie, who have supported and encouraged
me throughout writing this book.
Contents

Chapter 1: What is Angular? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

What is Angular? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Some examples of the type of projects built with Angular . . . . . . . . . . . . . . . . . . . . 2
Angular’s history . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Why use Angular? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Features of Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
The Client Contacts Manager Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Chapter 2: Angular Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Overview of Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Installing the Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Installing Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
The architecture of an Angular app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
The architecture of our Client Contacts application . . . . . . . . . . . . . . . . . . . . . . . . 27
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Chapter 3: Getting Started with the Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

How a CLI helps Angular developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Installing the Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Creating the Client Contacts Manager application . . . . . . . . . . . . . . . . . . . . . . . . . 32
Running your application in the browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Commands of the Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
What are Schematics? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Chapter 4: Components, Templates, and Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
What are components? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Why do we have components now? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
The structure of a component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
The Component class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
The component life cycle hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Passing data into and out of components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
CONTENTS

Component templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Categories of components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
An introduction to forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Creating a Reactive form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
When to use template forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
When to use Reactive forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Chapter 5: NgModules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
What are modules in Angular? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
The parts of the NgModule file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
How to create modules using the CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Creating modules for our Client Contact Manager application . . . . . . . . . . . . . . . . . 89
Adding our Client components to the ClientModule . . . . . . . . . . . . . . . . . . . . . . . 92
Adding Angular Material . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Chapter 6: Routing and Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

What are routes? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Creating our navigation component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Route parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Route Guards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Implementing a Route Guard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Chapter 7: Dependency Injection, Services, and HttpClient . . . . . . . . . . . . . . . . . . . . 127

What is Dependency Injection? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
How does Angular handle Dependency Injection . . . . . . . . . . . . . . . . . . . . . . . . . 129
Providers in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Services in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
A look at the services Angular provides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
The HttpClient service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Features of the HttpClient API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Advanced features of HttpClient service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Chapter 8: Observables and RxJs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Observables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
What is RxJs? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Examples of Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
The Operator Decision Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Subjects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
How Angular uses RxJs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
CONTENTS

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

Chapter 9: State Management and NgRx . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Defining state management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
The Redux library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Exploring NgRx . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Example of a Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Example of an Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Example of the Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Example of Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Installing NgRx . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Chapter 10: Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Testing and Test Driven Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Jasmine in action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Setup and tear down of tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
The Karma test runner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Taking a Test Driven Development approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Karma settings in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Running tests using the Angular CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Writing tests in Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
The TestBed class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Examples of tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Chapter 11: Packaging Our Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

Building a release version with the CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
The angular.json file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Ahead-of-Time compilation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Other various production optimisations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Making use of lazy loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Application size budget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Measuring performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Chapter 1: What is Angular?
Welcome to this book on Getting Started with Angular. Throughout this book, we will be exploring
Angular and how to get started building applications with Angular. We will be looking at topics
such as how to set up an Angular application and how to use the tools the Angular team provide
to begin developing an Angular application. We will look at the architecture of a typical Angular
application and how components and modules are used to build sections of the app. We will explore
ways data is accessed and passed in an app and what mechanisms Angular provides for managing
data.
We will also look at more advanced topics, such as observables and RxJS, testing, and packaging an
application for production. We will even take a look at the NgRx, which is a library for managing
state.
In this chapter, we will introduce Angular, what it is, and the reasons it is an ideal choice for web
application development, as well as go through the features of Angular and what’s in the latest
release, version 8.
I will also introduce the demo application we are going to be building throughout the book. So, to
recap, in this chapter, we will cover the following topics: - Why are we looking at Angular? - What is
Angular? - Some examples of the types of applications that can be built with Angular - The history
of Angular, how it was started, and what problems it aimed to solve What are the new features of
Angular - What is the demo application we will be building throughout this book

What is Angular?
According to the official Angular docs, Angular is a platform that makes it easy to build applications
with the web. Awesome, but what does that actually mean? Well, Angular is a web application
framework that helps developers build web applications, web applications that can run on all
platforms, from desktop and mobile, which makes Angular an ideal choice for your next web
application.
The official documentation goes on to describe Angular as, [combining] declarative templates, de-
pendency injection, end-to-end tooling, and integrated best practices to solve development challenges.
Angular empowers developers to build applications that live on the web, mobile, or the desktop.
This perfectly describes what Angular is. Through templates, dependency injection, and end-to-end
tooling, Angular empowers developers to build web applications and applications that are built on
best practices.
Chapter 1: What is Angular? 2

Some examples of the type of projects built with

Angular
By learning Angular, you can build many different types of applications, using the one framework.
For example, you can build a complete web application, such as the Google Grab and Go program,
where enterprise companies can manage their usage of Chromebooks.
Google announced the Grab and Go program for Chromebooks, powered by Angular at the
following URL: https://blog.angular.io/google- announces-grab-and-go-program-for-chromebooks-
powered-by-angular-7954c11900bd.¹
If you ever wanted to build an email client, you can in Angular. There is already a project called
ProtonMail, which is a full-featured email client developed by scientists and engineers from CERN,
written in Angular.
You can also build desktop applications in Angular. Working along with Electron (Electron | Build
cross-platform desktop apps with JavaScript, HTML, and CSS), the Node-based framework for
building cross-platform desktop apps, you can use Angular as the framework to structure your code
while letting Electron manage the running of the application on the desktop. A great example of this
type of project is Nrwl’s Angular Console application, which provides Angular developers with a
UI in order to work with the Angular CLI (more on the CLI later).
And, of course, there is mobile; through using projects such as Angular Material, you can create
Angular applications that are designed to look exactly like native mobile applications, (especially if
you are building for Android). Now, while Angular will allow you to create a web application that
looks and acts like it will run as a native application, Angular doesn’t solve the problem of how to
install the project as a native mobile application, along with the full native support of the phone’s
features. That’s where a project like Ionic comes in. But, as you can see, a developer who knows
how to write Angular applications has a lot of variety for the projects they can build.

Angular’s history
The history of Angular is an interesting one; first, there was AngularJS, and then came Angular.
AngularJS was created as part of an internal project within Google by Misko Hevery. He created
the first version of the project to make it easier for the designers within his team to build web
applications.
Misko wanted a way to extend the vocabulary of HTML in order for the designers to use HTML
tags that were more relevant to what they were designing. So, over a long weekend, yes, that’s a
weekend, Misko came up with the first version of AngularJS. The name Angular came from the
angled brackets that are at the beginning and the end of an HTML tag.
¹https:/ / blog. angular. io/ google-announces- grab- and- go- program- for- chromebooks- powered- by-angular- 7954c11900bd
Chapter 1: What is Angular? 3

Brad Green, Misko’s team leader at the time, asked Misko to work on a project called the Google
Feedback Tool, which was written in Google Web Kit (GWT), a Java-based framework. But, after
six months working on the project with GWT, the team found that it was extremely difficult to
work with. So, Misko said that he could rewrite the Feedback Tool project in two weeks using his
side project, AngularJS. Unfortunately, he took three weeks to complete the project, but he reduced
the number of lines of code down to 1,500 from the 17,000, which is the amount the old GWT version
had. And all this in three weeks as a solo developer!
Brad was obviously impressed, so he asked other developers to help Misko to work further on
Angular; Igor Minor (who still works on Angular along with Misko) and Shyam Seshadri both helped
Misko to complete the rewrite of the Google Feedback Tool and develop AngularJS further.
The next project the team worked on with AngularJS was the DoubleClick application that Google
had just purchased. The team was challenged to create a new landing page for DoubleClick; first,
they tried using GWT, but, after a two-week struggle, they turned to AngularJS, which Misko had
been promoting within Google. They were able to complete the landing page project within two
days using AngularJS. As a result of this success, the DoubleClick team decided to use AngularJS.
With this, the first version of AngularJS was released in May 2011.
But this is all about AngularJS; we’re not looking at the previous version. We’re interested in the
latest version of Angular, its second iteration. This new version of Angular came out in September
2016, after two and a half years of development, which shows how much thought has gone into the
new version.

Why use Angular?

Why should a developer decide to learn Angular? Well, there are several reasons, but the main
reason is so they can create applications for all platforms: desktop, mobile, and the web. All these
platforms are reachable for a developer who knows how to write Angular applications.
There are other similar technologies out there; for example, there are many JavaScript frameworks
like Angular, but Angular is extremely well established and supported by Google. It is an ideal
frontend framework for enterprise-level application, with all the out-of-the-box features that come
with Angular (including modules, classes, components, and unit testing), All of these are extremely
important to enterprises wanting their teams to develop well structured, tested applications;
applications that are going to work the first time for their clients.
There is also a huge ecosystem around Angular; teams such as Nrwl with their Nx Extensions,
which allow teams to create libraries to support the large enterprise-level applications that Nrwl
specialises in. There is also a vast amount of training resources available to an Angular developer;
companies such as Plurasight, EggHead, and Ultimate Angular all have in-depth courses for Angular
development.
There are a large number of reasons why we should use Angular as our web application framework
of choice. Let’s look at these reasons.
Chapter 1: What is Angular? 4

Supported by Google
One of the main reasons to use Angular is because it is supported by Google. They don’t just sponsor
the development of Angular, they are the team behind the development of Angular; Unlike other
frameworks, which are supported by open source developers who work on fixing issues and creating
new features for a framework in their spare time, Angular has a full-time team constantly working
on supporting Angular.
Google has also provided a Long Term Support (LTS) plan for Angular, which shows that they plan
to support older versions of Angular for the next few years. In this LTS, we can see what versions of
Angular they provide support for and when older versions will no longer be supported. With Google
being so transparent in terms of their support of Angular, we can be sure that it has a long future.
This is extremely important for large businesses looking to select the framework they are going to
invest in for their next large-scale project. Being able to see that Angular has the support of a large
organisation like Google, and that there is an LTS plan, which shows that Angular will be supported
for the long term, makes the decision to pick Angular as their framework of choice a straightforward
one.
See the release dates from the official Angular website: https://angular.io/guide/releases.²

Built on TypeScript
Angular is built on TypeScript, a superset of JavaScript, from Microsoft. TypeScript brings so many
benefits, including Type interfaces and static typing. When we create objects and variables within
our code through static typing, the details of these types are known when we compile our code
and this helps to provide insight. So, bugs can be found at compile time instead of runtime. Not
only does TypeScript help us write better code, but it also allows tools such as VSCode to provide
IntelliSense of our code, which gives us better navigation, refactoring, and autocompletion, making
the experience of writing TypeScript far more enjoyable than JavaScript.
Along with providing a great development experience, as a result of using TypeScript, we have access
to all the ES2016/ES2017 features that aren’t yet available in JavaScript. TypeScript can provide
features that are still to be released in JavaScript. Being able to compile down to ES2015 (the version
of JavaScript that the browser understands), TypeScript can provide these latest features and still be
able to generate ES2015 code.
So, being built on TypeScript, Angular has access to all the latest features of the language and all
the fantastic tooling TypeScript provides.

The Angular CLI

Another great reason for using Angular is the Angular CLI; this is a command-line tool provided
by the Angular team that helps us to build and run Angular projects. The CLI comes with a wide
²https:/ / angular.io/ guide/ releases
Chapter 1: What is Angular? 5

range of features, including the following: - Creating the start of a project - Creates components,
services, directives, and other files using a simple command - Runs the application in the browser -
Reloads the application after each saved change so that the latest version is displayed in the browser
- It can update a project’s dependencies (other libraries used in a project) automatically - It can add
new libraries to the project - It can run all the unit tests in a project and the end-to-end tests
The Angular CLI is a great tool, and you’ll see as we proceed that learning Angular is an important
part of developing Angular applications. Many other frontend frameworks don’t have CLIs, and
those that do, they do not have the features of the Angular CLI.

Command-Line Interface (CLI) is a way of writing commands to the computer via a

Terminal window.

Built on best practices

Angular is designed with best practices in mind. Any code generated by the CLI follows these best
practices, as set out by the team from Google. By following the approach prescribed by the Angular
team on how to write an Angular application, you know that the application you are building is
using the best practices of modern web applications.
These best practices include the following: - Component-based architecture - Modularised structure
- Dependency injection - Testing - Readable code - Ease of maintenance
Being built on a set of best practices means that you know the architecture of your application is
built on the basis of these good practices.

Testing is a first-class citizen of Angular

Testing is an extremely important part of creating bug-free applications. Angular supports testing
straight out of the box. Whenever the CLI creates a new Component or Service, it automatically
creates a Test Spec file for the new Component or Service. The CLI can also run the tests. No longer
do we have to set up test runner files; all of this is automatically managed by the CLI.
Making writing tests and running tests are so easy, so there is no reason not to have a good set of
tests for your application. Angular actively encourages writing tests, and by doing this, it reduces
bugs and issues that an end user may find, thereby making Angular an ideal choice for large-scale
enterprise level applications.

The Angular community

Another great reason for choosing Angular as your framework of choice is the community that
has grown around Angular. There are over 100,000 Angular developers, a number that is still
growing. There are Angular meetups all around the world, where you can go and meet other Angular
developers to discuss their experiences with using Angular and you can learn from them.
Chapter 1: What is Angular? 6

There are also many conferences you can attend as an Angular developer to learn about the
new features of Angular and hear talks on different approaches to working with Angular. These
conferences are all over the world, and attended by the Angular team, so you can put your questions
to the team directly.
Not only are there conferences and meetups you can attend to learn about Angular, but there
are also so many online resources created by members of the Angular community that we
can access to learn about Angular. There are sites such as Ultimate Courses (https:// ultimate-
courses.com/courses/angular³) who provide courses on Angular and TypeScript.
There are also podcasts where you hear interviews with leaders of the Angular community, including
the Angular team. Podcasts such as Adventures in Angular and EggHead.io provide great interviews
with Angular developers.

Access to third-party libraries

The Angular community, as well as allowing us to learn from one another, is also active in building
libraries and tools that work with Angular. Libraries such as NgRx, NGXS, and MobX all provide
solutions on how to manage state within an Angular application (NgRx is something we will
explore in Chapter 9, State Management and NgRx). There are also UI libraries such as Angular
Material, NGX-Bootstrap, and Nebular, which provide UI components you can add to your Angular
applications.
There are libraries for accessing data from cloud-based systems, such as Firebase. So, if your
application needs to connect to an existing Firebase application, there are libraries you can add
that simplify working with Firebase in your application. You can also find libraries that facilitate
working with GraphQL if that’s how your team creates their APIs.
If you want to add tools to your Angular workflow, the Angular community has provided tools
like Augury (https://augury.rangle.io⁴) from Rangle.io, which is a plugin for Chrome for debugging
Angular applications.
Another great tool from the Angular community is the NX workspaces from Nrwl. They have
created an extension to the Angular CLI that helps to create large enterprise Angular applications,
where teams of developers work on the same project. The NX tool helps the CLI create libraries
within Angular projects so that large-scale teams can share code across teams.

To see the types of extra resources available for Angular, look at the Resources list on the
Angular website: https://angular.io/resources.⁵

As you can see, there are so many reasons to use Angular. We’re already on version 8, which shows
that the Angular team aren’t slowing down in terms of making Angular better and better. Let’s now
go through some of the recent features of Angular and see what’s new in Angular.
³https:/ /ultimatecourses. com/ courses/ angular
⁴https:/ / augury. rangle. io
⁵https:/ / angular. io/ resources.
Chapter 1: What is Angular? 7

Features of Angular
As we know, Angular provides a framework for developing web applications, but there is more
to Angular than just the building blocks of a web application (components, services, directives,
and so on). Angular has many features we can use as Angular developers to create fast, powerful
applications.

Schematics
The first feature we’re going to look at is schematics. This is a tool we can add to our workflow as
Angular developers, similar to how we use the Angular CLI. Schematics allow us to apply transforms
to our projects; we see an example of this when we ask the Angular CLI to create Components or
Services for our application.
When we call the CLI to create a Component file, it updates the filesystem where our project is kept.
So, the CLI is writing to the filesystem. You’ll see as we progress through this book that the Angular
CLI is really helpful at starting up and adding to a project.
While the CLI is a wonderful workflow tool, the role of schematics is to build upon this scaffolding
feature that the CLI supports. So, schematics allow us to add to the project in a way that we can
get the CLI to build new features as part of our project. For example, we could write a schematic
that will add a new library to a project. Or, we could have a schematic that adds a UI library, which
is standard across all projects within an organisation, to a new Angular project. If your company
has a set of UI components that need to be used in any project, we could write a schematic, which
is called through the CLI, that will add this UI library and create the new Angular project in one
process.
Schematics don’t write to our filesystem; they update a Tree object. This Tree object is a represen-
tation of our project’s filesystem, and when a schematic is run, this Tree object is updated with the
new updates, as set out in the schematic’s rules.
A schematic is a TypeScript file that has the rules for this new schematic set out within this file. In
the schematic file, the Tree data object can be updated and added to. So, we can update the Tree to
have new files, or add new libraries.
Tools such as Nrwl’s NX workspaces make use of schematics to add to the workflow of the Angular
CLI. So, if your project is using the NX workspaces, you can run commands that create libraries that
will be shared across teams.

To read more about NX and how it makes use of schematics, check out the NX workspaces
website: https://nx.dev/getting-started/nx-and-cli⁶.
⁶https:/ / nx. dev/ getting- started/ nx- and- cli
Chapter 1: What is Angular? 8

CLI prompts
Another feature is CLI prompts, where the Angular CLI will ask questions when we run a command
such as ng add or ng generate (both commands we will see in use throughout the book). The CLI
will prompt the user with questions such as Which stylesheet format would you like to use? or Would
you like to add Angular routing?.
We can also create these prompts for our own schematics, so when a team member is running one
of our schematics through the Angular CLI, they will be prompted with questions we want them
to be asked as the schematic is running in order for them to make different choices in terms of the
features our schematic may be adding to the project it is building.
The great benefit of having CLI prompts is that it helps developers discover new features of the CLI.
With each release of the CLI, the team can add new prompts, asking if we want to make use of any
new features that are part of a new Angular release.

Angular Elements
A really interesting new feature of Angular is Angular Elements. Angular Elements is the ability to
create custom web components that can be loaded into any modern browser.
Through these web components, we can create small Angular applications, which will run as part
of the web page. For example, if you have a web page built using ASP.Net, but a small section of the
page needs to use a piece of functionality that is already in an Angular application, with Angular
Elements, you can convert that Angular application to a web component that will run within the
ASP.Net page as a standalone piece of functionality.
Web components are a feature of the Web Platform (https://www.w3.org/Talks/2012/10- lea-
webplatform/wpd-talk/#intro⁷) and are supported by all modern web browsers. They allow us, as
web developers, to extend HTML by creating our own tags, which the browser will understand.
We can package up HTML, CSS, and JavaScript to create one of these Web Components, which the
browser can understand and run, just like it would a standard HTML tag.
With Angular Elements, a Web Component made with HTML, CSS, and JavaScript can also have the
Angular framework incorporated into the component, giving us access to all that Angular provides.
This means our component can, in essence, be a mini-Angular application, running within any
other type of web page. So, if we have a React page that needs to have a feature from an Angular
application, it can be loaded via Angular Elements.
One area where I’ve found Angular elements to be extremely useful is when there is an AngularJS
application that needs upgrading to Angular (AngularJS will no longer be supported after 2021).
With Angular Elements, we can create new features for an existing AngularJS site and then load
this new feature into the AngularJS site using Angular Elements. Then, as the AngularJS code is
rewritten in Angular, each new part can be loaded into the original application via an Angular
Element. Once everything has been written in Angular, the AngularJS code can be removed and we
⁷https:/ / www. w3. org/ Talks/ 2012/ 10-lea- webplatform/ wpd- talk/ #intro
Chapter 1: What is Angular? 9

now have everything written in Angular. The end user will not notice a difference. Well, perhaps
the application will load faster for them, but that’s not a problem!

The Ivy Renderer

Another feature of Angular is the new view renderer engine called Ivy.
Ivy provides so many great features, including the following: - Easier-to-read generated code. - Faster
rebuild times between updates. - Small payload sizes, especially production-ready code. The smaller
the payload, the faster the application loads. - Improved Type checking in our HTML templates.
While Ivy is nearly ready, it’s not quite set for production-ready applications, so if you want to play
with it to see the great benefits it brings, then use the preceding command to create an application
that uses Ivy. Then, you’ll be able to see how much smaller the final size of the application Ivy
generates is and how fast it reloads between each build.
A great place to find out about Ivy is the Angular Next website, which is a guide with documentation
on some of the new features coming in Angular. You can find this guide by going to Angular Next
(https://next.angular.io/guide/ivy⁸).

CLI Builders
Another new feature in Angular is CLI Builders. This is a new API that allows us to add to, and
build upon, features with the Angular CLI.
We currently have schematics, which, as we know, allow us to write commands that the CLI can
use to generate new code for our applications. CLI Builders expands on this and provides an API we
can use to write commands to the CLI’s build system.
While schematics give us the ability to ask the CLI to generate new files or install new packages
for us, for example, adding Angular Material as part of a new application can be handled through
a schematic. With CLI Builders, the Angular team have expanded on this openness to the CLI and
have provided us with a way to write commands that can change the build system of Angular.
Through CLI Builders, we can run commands and tasks against the CLI to build our Angular
applications in any way we want. So, for example, as part of the build, we may need to have all
Angular Libraries built at the same time, or have all our tests run as part of the build; these tasks
can now be set up through the CLI Builder API.

Differential loading of JavaScript

In Angular, the CLI will now produce both ES5 and ES2015 JavaScript. ES5 is a legacy version of
JavaScript, while ES2015 is the latest version of JavaScript with all the modern features we now
expect of JavaScript. This will improve loading times in today’s modern browsers, as they will be
given the ES2015 version of the bundled code instead of the legacy ES5 version, which is far slower.
⁸https:/ / next. angular. io/ guide/ ivy
Chapter 1: What is Angular? 10

The Angular route improvements

Another new feature of Angular is the fact that the routing in our applications has been improved
to support AngularJS routing. By doing this, it will help with upgrading an AngularJS application
to Angular because the routing of an application is usually the last thing to be upgraded.
In Angular, there will be a backward compatibility mode for the router, so it will understand how to
run the AngularJS version of the router, and lazy-loading is supported for the AngularJS router. This
is a real benefit for those on AngularJS looking to upgrade before AngularJS is no longer supported.

Library updates
Along with all these new features in Angular, all the versions of RxJS, TypeScript, and Node have
been updated to their latest versions. So, we can start taking advantage of the new features from
these libraries as well.
Angular has some really nice new features; it is expanding in terms of opening up the Angular CLI
to us as developers so that we can tailor the CLI to our needs; it’s also adding features to help with
the upgrade from AngularJS to Angular.
The way we write Angular applications, which we will learn in this book, still applies to Angular 8,
so once you know how to create applications with Angular, you can then explore further these new
features in Angular.

The Client Contacts Manager Application

So, throughout this book, we are going to be building a sales team contacts app for a fictional
company. The idea behind this app is to have a system that allows the fictional sales team of our
fictional company to manage and access the contact details of their clients and the companies they
work with. This mini-CRM (Customer Relationship Manager) allows us to create an app that uses a
number of features so we can really explore the features of Angular. This application’s main features
are that it allows us to add, edit, and view the details of customers. We can also filter the list of
customers using the built-in features of Angular.
We can look at how we will create the UI using Angular components and Angular Material. We can
look at how we will build up the model of the application, how data will be passed throughout our
app as we build up the functionality to add new customers, save their details, and see a list of all of
our saved customer contacts.
We will see how Angular uses TypeScript, which gives us excellent tooling and insight into our code,
making the development process even easier than before when we were using JavaScript.
The idea is to create two versions of the mini-CRM that the salesperson will use; the mobile version
will be used when they are out and about talking to their customers, and the desktop app will be
used when back in the office to search for all the new wonderful customers they have.
Chapter 1: What is Angular? 11

As part of this application, we are going to use a fantastic third-party library called the In- Memory
Web API (https://github.com/angular/in-memory-web-api⁹). This library allows us to create local,
in-memory storage similar to a database that we can save data to, access data from, and remove data
from, all via API calls.
Using this library means we have a source of storage for our Client Contacts Manager Application
and we can make API calls to this storage system without having to set up a local database of external
API. We can just focus on learning how to write Angular.
Once you’ve finished reading this book, and you’ll want to create your own application to practice
what you’ve learned, I highly recommend looking at the In Memory Web API as a temporary data
source for your practice applications; it’s not a replacement for a real database, but is really easy to
use for small demo applications.

Summary
So, we have looked at what Angular is, what problems it aims to solve, and a bit about the history
of Angular. We have looked at some examples of the types of projects we can build using Angular
and have gone through the new features of Angular.
Finally, we’ve looked at what we will be building throughout this book, how we will be creating
a mini-CRM, which gives us the ability to really explore the features of Angular. So by the end of
this book, you should not only have an understanding of both frameworks, but you’ll also be able
to create apps in Angular.
Next, we are going to start working the Angular version of the application. We’re going to start
building the app using the Angular CLI, and we will look at the architecture of an Angular
application.
⁹https:/ / github. com/ angular/ in- memory- web- api
Chapter 2: Angular Architecture
Now that you know what Angular and Ionic are, it’s time to start looking into things more deeply.
In the first part of this book, we’re going to be concentrating on Angular, and in this chapter, we’re
going to be looking at the architecture of an Angular application.
How are we going to do that? Well, we need an application to look at, in order to see the various
parts of the application: what they are, what they do, and how they are built. In order to do this, we
need to create an Angular application, and in order to do that, we need to install the Angular CLI.
So, let’s do that.
In this chapter, we’ll be looking at the architecture of an Angular application to see how the Angular
framework structures a typical application. You’ll also learn how the various parts of an Angular
application are pieced together. Here’s what you’ll be learning in this chapter:

• Why Angular is an ideal frontend framework

• How an Angular application is structured
• What modules are, what components are, and how they are used
• What dependency injection is and how services are loaded
• Why TypeScript is used, and the benefits it brings
• The structure of the app being built throughout the first part of this book

Overview of Angular
Angular is more than just a framework; it’s now both a framework and a platform. In the previous
version, AngularJS was just a frontend framework, but now, with more advanced frontend tools,
Angular has grown from a frontend framework into a complete platform.
Being a complete platform, Angular can now be used to create a wider variety of applications;
before, AngularJS was used for creating Single-Page Applications (SPAs). As more and more teams
used AngularJS as the basis for their tools, AngularJS could be used to develop different types of
applications.
With Angular (the second version of AngularJS), as there are more mature tools for frontend
development, the Angular team has been able to expand Angular from a frontend framework into
this complete platform. It’s a platform that allows developers to create web apps, mobile apps,
desktop apps, and even server-side applications.
Chapter 2: Angular Architecture 13

The problem Angular solves

The main problem that Angular aims to solve, like all other application frameworks, is providing
the developer with a consistent way to develop and deploy applications. Angular has a set approach
to building a web application that is based on some best practices. The team behind Angular
have created the framework, so when we (as Angular developers) build our applications using the
framework, we are using the current best practices for developing web applications. We do not have
to worry about whether we are writing our applications using the best approach, as the framework
has these best practices already built in.
Following the approach of a framework means that as a developer, you don’t have to worry about
some of the more mundane parts of building an app (for example, making HTTP calls to an API).
This is something that is becoming a standard feature in web apps. Having to create a service that
makes your HTTP calls over and over again every time you start a new project is a waste of time if
you have a framework that can take this away from you; in that case, all you need to do is make a
call to the framework’s HTTP service. This saves you plenty of time to worry about other parts of
your application.
Angular, unlike other popular web frameworks, provides you with a lot of out-of-the-box features
that they think you will need when building modern web applications. This includes things like
HTTP access services, a module system, a build system, a way to package your app for production,
and a routing system, so that your users can navigate around the application you’ve built.
The second main problem that Angular aims to solve is providing developers with a set approach to
how to build modern web applications. By having this prescribed approach, Angular developers can
simply focus on the domain-specific problems of the application and not have to worry about how
they will handle the more common features of an application (like navigation, for example). When I
say domain-specific problems, I mean the problems that the web application is trying to solve. The
time that is spent trying to work out a method of navigation for your application can now be spent
working on the problems that the app is trying to solve.
Another problem that Angular solves is a collaboration between developers. Having a framework
like Angular is like following a map for how an Angular application is set out. As you’ll see when
we look into the architecture of the Angular and Ionic apps that we are going to build throughout
this book, there are many similarities between the applications’ structures. Someone that is only an
Angular developer would be able to go through the code of an Ionic application and know how the
application works, and vice versa; a developer who is mainly an Ionic developer can go through the
source code of an Angular application and have an idea of how the app works.
This common knowledge of how an Angular application works helps developers to collaborate on a
different project far faster than an application that’s not built using a framework. This is great not
only for onboarding new developers to a team, but for open source development, as well.
So, to recap, Angular gives you a set approach based on the best practices for modern web
development. It gives you many out-of-the-box features that you will need to build an application.
Its common patterns make learning how a new Angular application works quicker, and onboarding
Chapter 2: Angular Architecture 14

new developers to your project/team is easier and smoother.

Now, we are going to create a small demo application, which we will use to look at the basic structure
of an Angular application; however, we first need to install the Angular CLI, which is the main tool
you’ll use to create Angular applications.

Installing the Angular CLI

To install the Angular CLI, we need Node, so we need to go to the Node website and install it.
So, let’s go to the Node website at https://nodejs.org/en/¹⁰. Once we’re there, we need to click
on the download link for the Long Term Stable (LTS) version of Node. This version of Node is
recommended for most users and is ideal for our needs.
Once the download has completed, click through the installation wizard and complete the installa-
tion of Node. Then, when that has finished, we need to open up our Terminal or Command Prompt
and check the version of Node we’ve just installed. To do this, run node -v you should see the version
number come up, which confirms that Node has been installed.
OK, that’s done; now, to install the Angular CLI.

Why do I need to install the CLI when I’ve just installed Node? The answer is, we need
Node Package Manager (NPM), to install the Angular CLI for us.

Again, in your Terminal or Command Prompt, run the following command:

npm install -g @angular/cli

This command is telling npm to go and install the Angular CLI package globally (so that it’s available
from anywhere, within any folder). Then, npm goes off and downloads the latest version of the
Angular CLI and installs it for you. The days of CDs or floppy disks are long gone; it’s all command-
line magic now.
Now, we should have the Angular CLI installed, and it’s time to create our first Angular app. This
isn’t going to be the Client Contact demo app that I mentioned earlier; this is just going to be a small
app with which we can look through the code and see how an Angular app is made and what the
structure of the app is.
To create an Angular application, we need to go back into our Terminal or Command Prompt and
navigate to a folder in which we can work. Once we have navigated to our development folder, we
simply run the command ng new, along with the name of the Angular app we’re building. So, for
this, type in the following:
ng new angular-architecture
¹⁰https:/ /nodejs.org/en/
Chapter 2: Angular Architecture 15

This will create a new folder within the development folder, called angular-architecture. The CLI
uses the name you provide to create a new folder in which to create the application. Once that has
run, you should see the following message:
Project 'angular-architecture' successfully created

Congratulations! You’ve created your first Angular app.

So, let’s recap on what we’ve done. We’ve installed Node, because we need npm to install the Angular
CLI. We installed the CLI, and then we created a new Angular application. We are going to leave
the Angular CLI for now; there will be more on what the CLI is and how you will use the CLI as an
Angular developer later, in Chapter 3, Getting Started with the Angular CLI. Now, we need to start
looking at the code the CLI has generated; to do that, we need to open the angular-architecture
folder in our favourite editor.

Installing Visual Studio Code

Ask a room full of developers what their favourite editor is, and you’ll get a thousand different
answers. One thing is for sure: there is no correct answer. For this book, we’re going to be using
Visual Studio Code, for the following two reasons:

• It’s free, so you can download it with no cost to yourself

• It works well with Angular

There are other great editors available for writing Angular applications, like Webstorm, Atom, and
even Visual Studio itself. All of these are good editors for Angular, but we are using Visual Studio
Code because it’s free and good with Angular. With the power of the Angular CLI, you could (in
theory) use Notepad with the Terminal to create an Angular application, but why would you do that
to yourself?
If you don’t already have Visual Studio Code (more commonly called VSCode), go to https://code.visualstudio.com/¹¹
and download the latest version. Once that’s installed, let’s open up VSCode and navigate to our
newly created Angular app.
You should see the following screenshot:
¹¹https:/ / code. visualstudio. com/
Chapter 2: Angular Architecture 16

VSCode showing our Angular application

This is VSCode with our new app loaded. We can now use the features of VSCode to go through the
app and see how it’s structured.
First, let’s expand the source tree folder; you should see the full src folder, as follows:
Chapter 2: Angular Architecture 17

VSCode showing the src folder

There are a few main parts to the app; the first thing you’ll notice is that there are two main folders,
the src folder and the e2e folder. The src folder contains all the source code for your app. It will
contain all the HTML, CSS, and TypeScript code of your app. The e2e folder contains all your end-
to-end tests, and these tests can be run to test how your app runs in the browser. However, we are
looking at the architecture of an Angular app, so let’s carry on with that.
Within the src folder, you’ll see the app folder, and inside of that you’ll see the following files:

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.module.ts

We now have a small Angular app, which we can take a look at while we go through the architecture
of an Angular application.
Chapter 2: Angular Architecture 18

The architecture of an Angular app

Okay, now we have discussed the problems Angular solves, and we’ve even created our first Angular
application; it’s time to discuss how an Angular app is structured.
Angular is essentially a framework and a platform, written using HTML and TypeScript. The
functionality of the application is written in TypeScript files that can be imported throughout the
app as libraries, adding functionality throughout the app.
When the Angular application app is run in the browser, these TypeScript files are converted into
JavaScript files, which are then bundled up into the payload that is delivered to the browser (there
are ways that this payload can be separated into smaller, separate files in order to keep its size down,
but this is something we will briefly look at in Chapter 3, Getting Started with the Angular CLI ).
There are three main parts to an Angular application, and they are as follows:

• Modules: Modules are the glue that holds an application together. They are single TypeScript
files that reference all the other files used within the application. They allow us as Angular
developers to group the functionality of our application together.
• Components: Components are the building blocks of the application. They are single pieces of
functionality in our application, which are linked together under a module. Components can
have visual elements to them, which allow the user to interact with the application.
• Services: Services are single TypeScript classes used to access information and share it between
components.

When you think of an Angular application, you can think of it as a tree; the module is the trunk
of the tree, and the components are the branches of the tree, branching out of the module, with
services being passed into components to share data throughout the application. Everything is tied
together through the module, and as the complexity of your Angular application grows, the number
of modules you’ll have in your application will grow.
Now let’s take a more in-depth look at each of these three parts, starting with modules.

What are modules?

We’ve now provided an overview of the general structure of an Angular app, so we’re going to be
looking further into modules, or, as they are known in the Angular world, NgModules. To see an
example of a module, open the app.module.ts file of our Angular app.
You should see the following:
 Chapter 2: Angular Architecture 19

1 import { NgModule } from '@angular/core';

2 import { AppComponent } from './app.component';
3 @NgModule({
4 declarations: [
5 AppComponent
6 ],
7 imports: [
8 BrowserModule
9 ],
10 providers: [],
11 bootstrap: [AppComponent]
12 })
13 export class AppModule { }

This is the main App module; as you can see, it’s made up of four main parts: the declarations array,
the imports array, the providers array, and the bootstrap array. There is another part to a module
that is not shown in this example: the Exports array.
So, what do all these different arrays do? Well, let’s look at each one, as follows:

• declarations: This contains the components, directives, and pipes that are part of this module.
• imports: This contains other modules, whose classes are needed by components of the module
they are being imported into.
• providers: This contains any services that are required by components. If a service is added to
the module level, it is available to all components that are part of the module, but services can
also be imported at just the component level.
• bootstrap: This contains the main component, or the root component, which starts the whole
application. Only the root module (in our architecture application it’s the app.module.ts file)
that we have opened can have a Bootstrap array.
• export: This contains a list of declarations that are available by components in other modules.

One of the first things to point out is the use of a decorator to tell Angular about the details of
this module. As you can see, the @NgModule is a decorator. Angular sees this and knows that this
TypeScript class is a module, and, that the details within the @NgModule decorator are all parts of
this module. So, through this decorator, Angular knows that this module has its own version of
AppComponent that belongs to this module. It then imports another module called BrowserModule,
and when Angular boots up, it should use the AppComponent as part of this Bootstrap process.
NgModule’s main role is to tell the framework what components belong where when the application
is being compiled. For example, suppose that I have a component called ComponentOne.ts, and in
the same application, another developer working on the project also creates a new component and
decides to call it ComponentOne.ts, adding it to the same project. The compiler wouldn’t know which
ComponentOne to use when the application was running. By using a module, we can say that one
 Chapter 2: Angular Architecture 20

ComponentOne belongs to this module, and the other one belongs to another module. Then, when
the compiler is running the application and it is running the code that belongs to a module, the
compiler knows which ComponentOne file to use. This helps to group functionality together and
allows a different developer to work on separate parts of an application without affecting the part
of the application that another developer is working on.
With NgModule, we can say that one ComponentOne.ts belongs to the admin modules, admin.module.ts,
and the other ComponentOne.ts belongs to the ordering module, ordering.module.ts; so now, each
component has a context of where it belongs. So, Angular knows where each ComponentOne belongs
and that they are separate components. Although naming components the same name is never a
good idea, it’s sometimes unavoidable, especially when incorporating a third-party library into your
project.
We will be going further into NgModule in Chapter 5, NgModules, where we will not only look into
a more complex module file, but will also start to create modules for our demo app.

What are components?

We’ve already mentioned components; they are one of the main building blocks of an Angu-
lar application. Again, going back to our angular-architecture demo application, if we open
app.component.ts, we will see the following:

1 @Component({
2 selector: 'app-root',
3 templateUrl: './app.component.html',
4 styleUrls: ['./app.component.css'
5 })
6 export class AppComponent {
7 title = 'app'
8 }

This is the entry component of our application. If you look at the app.module.ts file, you’ll see
that AppComponent is set to be the Bootstrap component for the application. That means that this
component will be the start of the application, and the template for this component will be the first
thing a user will see when the app has loaded in the browser.
Again, the component is a TypeScript class that is using the @Component decorator to tell Angular
about the details of the component. In this @Component decorator, we can see that the component
has an HTML template called app.component.html and a CSS file called app.component.css.
The @Component decorator also tells Angular that the selector, or HTML tag, for this component is
app-root; this is the HTML that the selector generates:

<app-root></app-root>
 Chapter 2: Angular Architecture 21

The selector name is used to create the HTML tag that Angular knows about, so when that HTML tag
is seen in other component templates, Angular knows what component to use and what component’s
template to display.
In our example component within the class, we can see a property of the component class called
title. This property is available in the associated template of the component, which you can see in
the following section of app.component.html:

1 <div style="text-align:center">
2 <h1>Welcome to {{ title }}!</h1>
3 </div>

There’s more that can be added to the component class besides properties that are available to the
associated template/view. The functionality of the template is defined in the component class, as
well as data and common functionality provided by Services is loaded into the component class,
making it available to the component template.
We’ll be looking at components more closely in a later chapter. We’ll be creating new components for
our demo application and looking more closely at the relationship between the component class and
the component template. But for now, this should give you an understanding of the basic structure
of an Angular component.
Now, we are going to look at Services: how they are structured, and how Decorators are used to
define what a Service is in Angular.

What are Services?

You now know what NgModules are and what components are, so we’re going to take a look at
another major part of an Angular application: Services.
A Service is simply a TypeScript class, similar to how a component has a TypeScript class. The
main difference between a component class and a service is that services are used to create more
modularity and reusability within the application. They are used as a way to share functionality that
may be needed more than once throughout the application. This helps to improve the modularity
of the application by dividing functionality into reusable and standalone services that components
call in to do a single piece of the app’s functionality. This leads to the app being divided up into
these smaller services, rather than having all the logic of the app in one large, monolithic service or
component.
Services are there to do one thing and one thing well. This means that the component can load in
Services to do the one piece of logic the component requires; then, the component can call another
service to perform another piece of logic that the component needs. This leads to a component
needing to have access to multiple services. Angular loads services into components through
Dependency Injection.
 Chapter 2: Angular Architecture 22

Dependency Injection (DI) is the method that Angular uses to tell components what services the
component can consume. DI is not just an Angular-specific concept; there are many frameworks
that use Dependency Injection, and not just frontend frameworks.
Angular has always used DI. Even from the early versions of AngularJS, DI has been the method
that Angular has used to inject Services into components.
In our angular-architecture project, we don’t have a service automatically generated for us by the
Angular CLI. This is because (as we know), services are used to manage data and logic within our
application. This changes from application to application. The Angular CLI team couldn’t get the
CLI to generate a service for us that fits the needs of our application, it’s impossible. So, they don’t
provide a service for a very basic Angular application (although, as we will see in Chapter 3, Getting
Started with the Angular CLI, the CLI can generate Services); we have to create one ourselves.
While the angular-architecture application doesn’t have a service, we can still take a look at an
example to see the structure of a Service.
In the Angular official documentation, there is an example application called Tour of Heroes, and
it is possible to download and view the source code of this example application. (It’s well worth
doing this, as the Tour of Heroes application has great examples of the various parts of an Angular
application. It was written by some of the leading experts within the Angular community, so it’s a
great example of some best practices for building Angular apps.)
In this Tour of Heroes application, there are many Services that we can take a look at to see how a
Service is structured. This is one of the main services, which loads a list of Heros from an external
API:

1 export class HeroService {

2 private heroes: Hero[] = [];
3 constructor(private backend: BackendService, private logger: Logger) {}
4
5 getHeroes() {
6 this.backend.getAll(Hero).then( (heroes: Hero[]) => {
7 this.logger.log(`Fetched ${heroes.length} heroes.`);
8 this.heroes.push(...heroes); // fill cache
9 });
10 return this.heroes;
11 }
12 }

As you can see, it is a simple TypeScript class with a Constructor and a single method called
getHeros(). It also calls another service, called BackendService (showing an example of this
modularity that services provide, where one service does one single task and uses another to perform
another task, in this case providing data).
 Another Random Document on
Scribd Without Any Related Topics
night before, she had kept her wardrobers and seamstresses at work
the whole night to alter a white satin habit to the simplicity and style
of that which Angèle had worn.
“What think you of my gown, my lady refugee?” she said to Angèle,
at last, as the Gentlemen Pensioners paraded in the space below,
followed by the Knights-Tilters—at their head the Queen’s champion,
Sir Henry Lee: twenty-five of the most gallant and favored of the
courtiers of Elizabeth, including the gravest of her counsellors and
the youngest gallant who had won her smile, Master Christopher
Hatton. Some of these brave suitors, taken from the noblest families,
had appeared in the tilt-yard every anniversary of the year of her
accession and had lifted their romantic office, which seemed but the
service of enamoured knights, into an almost solemn dignity.
The vast crowd disposed itself around the great improvised yard
where the Knights-Tilters were to engage, and the Queen, followed
by her retinue, descended to the dais which had been set up near
the palace. Her white satin gown, roped with pearls only at the neck
and breast, glistened in the bright sun, and her fair hair took on a
burnished radiance. As Angèle passed with her in the gorgeous
procession, she could not but view the scene with admiring eye,
albeit her own sweet, sober attire—a pearly gray—seemed little in
keeping; for the ladies and lords were most richly attired, and the
damask and satin cloaks, crimson velvet gowns, silk hoods, and
jewelled swords and daggers made a brave show. She was like some
moth in a whorl of butterflies.
Her face was pale, and her eyes had a curious, disturbed look, as
though they had seen frightening things. The events of last evening
had tried her simple spirit, and she shrank from this glittering show;
but the knowledge that her lover’s life was in danger, and that her
happiness was here and now at stake, held her bravely to her place,
beset as it was with peril; for the Queen, with that eccentricity which
had lifted her up yesterday, might cast her down to-day, and she
had good reason to fear the power and influence of Leicester, who
she knew with a sure instinct was intent on Michel’s ruin. Behind all
her nervous shrinking and her heart’s doubt, the memory of the face
of the stranger she had seen last night with Sir Andrew Melvill
tortured her. She could not find the time and place where she had
seen the eyes that, in the palace, had filled her with mislike and
abhorrence as they looked upon the Queen. Again and again in her
fitful sleep had she dreamed of him, and a sense of foreboding was
heavy upon her—she seemed to hear the footfall of coming disaster.
The anxiety of her soul lent an unnatural brightness to her eyes; so
that more than one enamoured courtier made essay to engage her
in conversation, and paid her deferential compliment when the
Queen’s eyes were not turned her way. Come to the dais, she was
placed not far from her Majesty, beside the Duke’s Daughter, whose
whimsical nature found frequent expression in what the Queen was
wont to call “a merry volt.” She seemed a privileged person, with
whom none ventured to take liberties, and against whom none was
entitled to bear offence, for her quips were free from malice, and her
ingenuity in humor of mark. She it was who had put into the
Queen’s head that morning an idea which was presently to startle
Angèle and all others.
Leicester was riding with the Knights-Tilters, and as they cantered
lightly past the dais, trailing their spears in obeisance, Elizabeth
engaged herself in talk with Cecil, who was standing near, and
appeared not to see the favorite. This was the first time since he had
mounted to good fortune that she had not thrown him a favor to
pick up with his spear and wear in her honor, and he could scarce
believe that she had meant to neglect him. He half halted, but she
only deigned an inclination of the head, and he spurred his horse
angrily on with a muttered imprecation, yet, to all seeming, gallantly
paying homage.
“There shall be doings ere this day is done. ‘Beware the Gypsy!’”
said the Duke’s Daughter, in a low tone, to Angèle, and she laughed
lightly.
“Who is the Gypsy?” asked Angèle, with good suspicion, however.
“Who but Leicester,” answered the other. “Is he not black enough?”
“Why was he so called? Who put the name upon him?”
“Who but the Earl of Sussex, as he died—as noble a chief, as true a
counsellor as ever spoke truth to a queen. But truth is not all at
court, and Sussex was no flatterer. Leicester bowed under the storm
for a moment when Sussex showed him in his true colors; but
Sussex had no gift of intrigue, the tide turned, and so he broke his
heart and died. But he left a message which I sometimes remember
with my collects. ‘I am now passing to another world,’ said he, ‘and
must leave you to your fortunes and to the Queen’s grace and
goodness; but beware the Gypsy, for he will be too hard for all of
you; you know not the beast so well as I do.’ But my Lord Sussex
was wrong. One there is who knows him through and through, and
hath little joy in the knowing.”
The look in the eyes of the Duke’s Daughter became like steel and
her voice hardened, and Angèle realized that Leicester had in this
beautiful and delicate maid-of-honor as bitter an enemy as ever
brought down the mighty from their seats; that a pride had been
sometime wounded, suffered an unwarrantable affront, which only
innocence could feel so acutely. Her heart went out to the Duke’s
Daughter as it had never gone out to any of her sex since her
mother’s death, and she showed her admiration in her glance. The
other saw it and smiled, slipping a hand in hers for a moment; and
then a look, half-debating, half-triumphant, came into her face as
her eyes followed Leicester down the green stretches of the tilting-
yard.
The trumpet sounded, the people broke out in shouts of delight, the
tilting began. For an hour the handsome joust went on, the Earl of
Oxford, Charles Howard, Sir Henry Lee, Sir Christopher Hatton, and
Leicester challenging, and so even was the combat that victory
seemed to settle in the plumes of neither, though Leicester of them
all showed not the greatest skill, while in some regards greatest
grace and deportment. Suddenly there rode into the lists, whence no
one seemed to know, so intent had the public gaze been fixed, so
quickly had he come, a mounted figure all in white, and at the
moment when Sir Henry Lee had cried aloud his challenge for the
last time. Silence fell as the bright figure cantered down the list,
lifted the gauge, and sat still upon his black steed. Consternation
fell. None among the people or the Knights-Tilters knew who the
invader was, and Leicester called upon the masters of the
ceremonies to demand his name and quality. The white horseman
made no reply, but sat unmoved, while noise and turmoil suddenly
sprang up around him.
Presently the voice of the Queen was heard clearly ringing through
the lists. “His quality hath evidence. Set on.”
The Duke’s Daughter laughed, and whispered mischievously in
Angèle’s ear.
The gentlemen of England fared ill that day in the sight of all the
people, for the challenger of the Knights-Tilters was more than a
match for each that came upon him. He rode like a wild horseman of
Yucatan. Wary, resourceful, sudden in device and powerful in onset,
he bore all down, until the Queen cried: “There hath not been such
skill in England since my father rode these lists. Three of my best
gentlemen down, and it hath been but breathing to him. Now, Sir
Harry Lee, it is thy turn,” she laughed, as she saw the champion ride
forward; “and next ’tis thine, Leicester. Ah, Leicester, would have at
him now?” she added, sharply, as she saw the favorite spur forward
before the gallant Lee. “He is full of choler—it becomes him, but it
shall not be; bravery is not all. And if he failed”—she smiled acidly
—“he would get him home to Kenilworth and show himself no more
—if he failed, and the white knight failed not! What think you,
dove?” she cried to the Duke’s Daughter. “Would he not fall in the
megrims for that England’s honor had been overthrown? Leicester
could not live if England’s honor should be toppled down like my
dear Chris Hatton and his gallants, yonder.”
The Duke’s Daughter courtesied. “Methinks England’s honor is in
little peril—your Majesty knows well how to ‘fend it. No subject
keeps it.”
“If I must ‘fend it, dove, then Leicester there must not fight to-day.
It shall surely be Sir Harry Lee. My Lord Leicester must have the
place of honor at the last,” she called aloud. Leicester swung his
horse round, and galloped to the Queen.
“Your Majesty,” he cried, in suppressed anger, “must I give place?”
“When all have failed and Leicester has won, then all yield place to
Leicester,” said the Queen, dryly.
The look on his face was not good to see, but he saluted gravely and
rode away to watch the encounter between the most gallant Knight-
Tilter in England and the stranger. Rage was in his heart, and it
blinded him to the certainty of his defeat, for he was not expert in
the lists. But by a sure instinct he had guessed the identity of the
white horseman, and every nerve quivered with desire to meet him
in combat. Last night’s good work seemed to have gone for naught.
Elizabeth’s humor had changed; and to-day she seemed set on
humiliating him before the nobles who hated him, before the people
who had found in him the cause why the Queen had not married, so
giving no heir to the throne. Perturbed and charged with anger as he
was, however, the combat now forward soon chained his attention.
Not in many a year had there been seen in England such a display of
skill and determination. The veteran Knight-Tilter, who knew that the
result of this business meant more than life to him, and that more
than the honor of his comrades was at stake—even the valor of
England, which had been challenged—fought as he had never fought
before, as no man had fought in England for many a year. At first
the people cried aloud their encouragement; but as onset and attack
after onset and attack showed that two masters of their craft, two
desperate men had met, and that the great sport had become a vital
combat between their own champion and the champion of another
land—Spain, France, Denmark, Russia, Italy?—a hush spread over
the great space, and every eye was strained; men gazed with bated
breath.
The green turf was torn and mangled, the horses reeked with sweat
and foam, but overhead the soaring skylark sang, as it were, to
express the joyance of the day. During many minutes the only sound
that broke the stillness was the clash of armed men, the thud of
hoofs, and the snorting and the wild breathing of the chargers. The
lark’s notes, however, ringing out over the lists, freed the tongue of
the Queen’s fool, who suddenly ran out into the lists, in his motley
and cap and bells, and in his high, trilling voice sang a fool’s song to
the fighting twain:

“Who would lie down and close his eyes

While yet the lark sings o’er the dale?
Who would to Love make no replies,
Nor drink the nut-brown ale,
While throbs the pulse, and full’s the purse
And all the world’s for sale?”

Suddenly a cry of relief, of roaring excitement, burst from the

people. Both horsemen and their chargers were on the ground. The
fight was over, the fierce game at an end. That which all had feared,
even the Queen herself, as the fight fared on, had not come to pass
—England’s champion had not been beaten by the armed mystery,
though the odds had seemed against him.

“Though wintry blasts may prove unkind,

When winter’s past we do forget;
Love’s breast in summer-time is kind,
And all’s well while life’s with us yet—
Hey, ho, now the lark is mating,
Life’s sweet wages are in waiting!”

Thus sang the fool as the two warriors were helped to their feet.
Cumbered with their armor, and all dust-covered and blood-stained,
though not seriously hurt, they were helped to their horses, and
rode to the dais where the Queen sat.
“Ye have fought like men of old,” she said, “and neither had
advantage at the last. England’s champion still may cry his challenge
and not be forsworn, and he who challenged goeth in honor again
from the lists. You, sir, who have challenged, shall we not see your
face or hear your voice? For what country, for what prince lifted you
the gauge and challenged England’s honor?”
“I crave your high Majesty’s pardon”—Angèle’s heart stood still. Her
love had not pierced his disguise, though Leicester’s hate had done
so on the instant—“I crave your noble Majesty’s grace,” answered
the stranger, “that I may still keep my face covered in humility. My
voice speaks for no country and for no prince. I have fought for
mine own honor, and to prove to England’s Queen that she hath a
champion who smiteth with strong arm, as on me and my steed this
hath been seen to-day.”
“Gallantly thought and well said,” answered Elizabeth; “but England’s
champion and his strong arm have no victory. If gifts were given
they must needs be cut in twain. But answer me, what is your
country? I will not have it that any man pick up the gauge of
England for his own honor. What is your country?”
“I am an exile, your high Majesty; and the only land for which I raise
my sword this day is that land where I have found safety from my
enemies.”
The Queen turned and smiled at the Duke’s Daughter. “I knew not
where my own question might lead, but he hath turned it to full
account,” she said, under her breath. “His tongue is as ready as his
spear. Then ye have both labored in England’s honor, and I drink to
you both,” she added, and raised to her lips a glass of wine which a
page presented. “I love ye both—in your high qualities,” she
hastened to add, with dry irony, and her eye rested mockingly on
Leicester.
“My lords and gentlemen and all of my kingdom,” she added, in a
clear voice, insistent in its force, “ye have come upon May Day to
take delight of England in my gardens, and ye are welcome. Ye have
seen such a sight as doeth good to the eyes of brave men. It hath
pleased me well, and I am constrained to say to you what, for divers
great reasons, I have kept to my own counsels, laboring for your
good. The day hath come, however, the day and the hour, when ye
shall know that wherein I propose to serve you as ye well deserve. It
is my will—and now I see my way to its good fulfilment—that I
remain no longer in that virgin state wherein I have ever lived.”
Great cheering here broke in, and for a time she could get no
further. Ever alive to the bent of the popular mind, she had chosen a
perfect occasion to take them into her confidence—however little or
much she would abide by her words, or intended the union of which
she spoke. In the past she had counselled with her great advisers,
with Cecil and the rest, and through them messages were borne to
the people; but now she spoke direct to them all, and it had its
immediate reward—the acclamations were as those with which she
was greeted when she first passed through the streets of London on
inheriting the crown.
Well pleased, she continued: “This I will do with expedition and
weightiest judgment, for of little account though I am, he that sits
with the Queen of England in this realm, must needs be a prince
indeed.... So be ye sure of this that ye shall have your heartmost
wishes, and there shall be one to come after me who will wear this
crown even as I have worn, in direct descent, my father’s crown.
Our dearest sister, the Queen of the Scots, hath been delivered of a
fair son; and in high affection the news thereof she hath sent me,
with a palfrey which I shall ride among you in token of the love I
bear her Majesty. She hath in her time got an heir to the throne with
which we are ever in kinship and alliance, and I in my time shall give
ye your hearts’ desire.”
Angèle, who had, with palpitating heart and swimming head, seen
Michel de la Forêt leave the lists and disappear among the trees, as
mysteriously as he came, was scarce conscious of the cheers and
riotous delight that followed Elizabeth’s tactful if delusive speech to
the people. A few whispered words from the Duke’s Daughter had
told her that Michel had obeyed the Queen’s command in entering
the lists and taking up the challenge; and that she herself, carrying
the royal message to him and making arrangements for his
accoutrement and mounting, had urged him to obedience. She
observed dryly that he had needed little pressure, and that his eyes
had lighted at the prospect of the combat. Apart from his innate love
of fighting, he had realized that in the moment of declining to enter
the Queen’s service he had been at a disadvantage, and that his
courage was open to attack by the incredulous or malicious. This
would have mattered little were it not that he had been given
unusual importance as a prisoner by the Queen’s personal notice of
himself. He had, therefore, sprung to the acceptance, and sent his
humble duty to the Queen by her winsome messenger, who, with
conspicuous dramatic skill, had arranged secretly, with the help of a
Gentleman Pensioner and the Master of the Horse, his appearance
and his exit. That all succeeded as she had planned quickened her
pulses, and made her heart still warmer to Angèle, who, now that all
was over, and her Huguenot lover had gone his mysterious way,
seemed lost in a troubled reverie.
It was a troubled reverie, indeed, for Angèle’s eyes were on the
stranger who was present with Sir Andrew Melvill the night before.
Her gaze upon him now became fixed and insistent, for the sense of
foreboding so heavy on her deepened to a torturing suspense.
Where had she seen this man before? To what day or hour in her
past did he belong? What was there in his smooth, smiling, malicious
face that made her blood run cold? As she watched him, he turned
his head. She followed his eyes. The horse which Mary Queen of
Scots had sent with the message of the birth of her son was being
led to the Queen by the dark-browed, pale-faced churl who had
brought it from Scotland. She saw a sharp, dark look pass between
the two.
Suddenly her sight swam, she swayed and would have fainted, but
resolution steadied her, and a low exclamation broke from her lips.
Now she knew!
The face that had eluded her was at last in the grasp of horrified
memory. It was the face of one who many years ago was known to
have poisoned the Duc de Chambly by anointing the pommel of his
saddle with a delicate poison which the rider would touch, and
touching would, perhaps, carry to his nostrils or mouth as he rode,
and die upon the instant. She herself had seen the Duc de Chambly
fall; had seen this man fly from Paris for his life; and had thereafter
known of his return to favor at the court of Mary and Francis, for
nothing could be proved against him. The memory flashed like
lightning through her brain. She moved swiftly forward despite the
detaining hand of the Duke’s Daughter. The Queen was already
mounted, her hand already upon the pommel of the saddle.
Elizabeth noted the look of anguished anxiety in Angèle’s eyes, her
face like that of one who had seen souls in purgatory; and some
swift instinct, born of years upon years of peril in old days when her
life was no boon to her enemies, made her lean towards the girl,
whose quick whispered words were to her as loud as thunder. She
was, however, composed and still. Not a tremor passed through her.
“Your wish is granted, mistress,” she said aloud, then addressed a
word to Cecil at her side, who passed on her command. Presently
she turned slowly to the spot where Sir Andrew Melvill and the other
sat upon their horses. She scanned complacently the faces of both,
then her eyes settled steadily on the face of the murderer. Still
gazing intently, she drew the back of her gloved fingers along the
pommel. The man saw the motion, unnoted and unsignificant to any
other save Angèle, meaningless even to Melvill, the innocent and
honest gentleman at his side; and he realized that the Queen had
had a warning. Noting the slight stir among the gentlemen round
him, he knew that his game was foiled, that there was no escape.
He was not prepared for what followed.
In a voice to be heard only at small distance, the Queen said,
calmly:
“This palfrey sent me by my dear sister of Scotland shall bear me
among you, friends; and in days to come I will remember how she
hath given new life to me by her loving message. Sir Andrew Melvill,
I shall have further speech with you; and you, sir”—speaking to the
sinister figure by his side—“come hither.”
The man dismounted, and with unsteady step came forward.
Elizabeth held out her gloved hand for him to kiss. His face turned
white. It was come soon, his punishment. None knew save Angèle
and the Queen the doom that was upon him, if Angèle’s warning
was well founded. He knelt, and bent his head over her hand.
“Salute sir,” she said, in a low voice.
He touched his lips to her fingers. She pressed them swiftly against
his mouth. An instant, then he rose and stepped backward to his
horse. Tremblingly, blindly, he mounted.
A moment passed, then Elizabeth rode on with her ladies behind her,
her gentlemen beside her. As she passed slowly, the would-be
regicide swayed and fell from his horse, and stirred no more.
Elizabeth rode on, her hand upon the pommel of the saddle. So she
rode for a full half-hour, and came back to her palace. But she raised
not her gloved right hand above the pommel, and she dismounted
with exceeding care.
That night the man who cared for the horse died secretly, as had
done his master, with the Queen’s glove pressed to his nostrils by
one whom Cecil could trust. And the matter was hidden from the
court and the people; for it was given out that Melvill’s friend had
died of some heart trouble.
 XV
T seemed an unspeakable smallness in a man of
such high place in the state, whose hand had tied
and untied myriad knots of political and court
intrigue, that he should stoop to a game which
any pettifogging hanger-on might play—and reap
scorn in the playing. By insidious arts, Leicester
had in his day turned the Queen’s mind to his
own will; had foiled the diplomacy of the Spaniard, the German, and
the Gaul; had by subterranean means checkmated the designs of
the Medici; had traced his way through plot and counter-plot, hated
by most, loved by none save, maybe, his royal mistress, to whom he
was now more a custom than a beloved friend. Year upon year he
had built up his influence. None had championed him save himself,
and even from the consequences of rashness and folly he had risen
to a still higher place in the kingdom. But such as Leicester are ever
at last a sacrifice to the laborious means by which they achieve their
greatest ends—means contemptible and small.
To the great intriguers every little detail, every commonplace
insignificance is used—and must be used by them alone—to further
their dark causes. They cannot trust their projects to brave
lieutenants, to faithful subordinates. They cannot say, “Here is the
end; this is the work to be done; upon your shoulders be the
burden!” They must “stoop to conquer.” Every miserable detail
becomes of moment, until by-and-by the art of intrigue and
conspiracy begins to lose proportion in their minds. The detail has
ever been so important, conspiracy so much second nature, that
they must needs be intriguing and conspiring when the occasion is
trifling and the end negligible.
To all intriguers life has lost romance; there is no poem left in
nature; no ideal, personal, public, or national, detains them in its
wholesome influence; no great purpose allures them; they have no
causes for which to die—save themselves. They are so
honeycombed with insincerity and the vice of thought that by-and-by
all colors are as one, all pathways the same; because, whichever
hue of light breaks upon their world they see it through the gray-
cloaked mist of falsehood; and whether the path be good or bad
they would still walk in it crookedly. How many men and women
Leicester had tracked or lured to their doom; over how many men
and women he had stepped to his place of power, history speaks not
carefully; but the traces of his deeds run through a thousand
archives, and they suggest plentiful sacrifices to a subverted
character.
Favorite of a queen, he must now stoop to set a trap for the ruin of
as simple a soul as ever stepped upon the soil of England; and his
dark purposes had not even the excuse of necessity on the one
hand, of love or passion on the other. An insane jealousy of the
place the girl had won in the consideration of the Queen, of her
lover who, he thought, had won a still higher place in the same
influence, was his only motive for action at first. His cruelty was not
redeemed even by the sensuous interest the girl might arouse in a
reckless nature by her beauty and her charm.
So the great Leicester—the Gypsy, as the dead Sussex had called
him—lay in wait in Greenwich Park for Angèle to pass, like some
orchard-thief in the blossoming trees. Knowing the path by which
she would come to her father’s cottage from the palace, he had
placed himself accordingly. He had thought he might have to wait
long or come often for the perfect opportunity; but it seemed as if
fate played his game for him, and that once again the fruit he would
pluck should fall into his palm. Bright-eyed, and elated from a long
talk with the Duke’s Daughter, who had given her a message from
the Queen, Angèle had abstractedly taken the wrong path in the
wood. Leicester saw that it would lead her into the maze some
distance off. Making a détour, he met her at the moment she
discovered her mistake. The light from the royal word her friend had
brought was still in her face; but it was crossed by perplexity now.
He stood still, as though astonished at seeing her, a smile upon his
face. So perfectly did he play his part that she thought the meeting
accidental; and though in her heart she had a fear of the man, and
knew how bitter an enemy he was of Michel’s, his urbane power, his
skilful diplomacy of courtesy had its way. These complicated lives,
instinct with contradiction, have the interest of forbidden knowledge.
The dark experiences of life leave their mark, and give such natures
that touch of mystery which allures even those who have high
instincts and true feelings, as one peeps over a hidden depth and
wonders what lies beyond the dark. So Angèle, suddenly arrested,
was caught by the sense of mystery in the man, by the fascination
of finesse, of dark power; and it was womanlike that all on an
instant she should dream of the soul of goodness in things evil.
Thus in life we are often surprised out of long years of prejudice,
and even of dislike and suspicion, by some fortuitous incident, which
might have chanced to two who had every impulse towards each
other, not such antagonisms as lay between Robert Dudley, Earl of
Leicester, and this Huguenot refugee. She had every cue to hate
him. Each moment of her life in England had been beset with peril
because of him—peril to the man she loved, therefore peril to
herself. And yet, so various is the nature of woman that, while
steering straitly by one star, she levies upon the light of other stars.
Faithful and sincere, yet loving power, curious and adventurous, she
must needs, without intention, without purpose, stray into perilous
paths.
As Leicester stepped suddenly into Angèle’s gaze, she was only, as it
were, conscious of a presence in itself alluring by virtue of the
history surrounding it. She was surprised out of an instinctive dislike,
and the cue she had to loathe him was for the moment lost.
Unconsciously, unintentionally, she smiled at him now, then,
realizing, retreated, shrinking from him, her face averted. Man or
woman had found in Leicester the delicate and intrepid gamester,
exquisite in the choice of detail, masterful in the breadth of method.
And now, as though his whole future depended on this interview, he
brought to bear a life-long skill to influence her. He had determined
to set the Queen against her. He did not know—not even he—that
she had saved the Queen’s life on that auspicious May Day when
Harry Lee had fought the white knight, Michel de la Forêt, and
halved the honors of the lists with him. If he had but known that the
Queen had hid from him this fact—this vital thing touching herself
and England—he would have viewed his future with a vaster
distrust. But there could be no surer sign of Elizabeth’s growing
coldness and intended breach than that she had hid from him the
dreadful incident of the poisoned glove and the swift execution of
the would-be murderer, and had made Cecil her only confidant. But
he did know that Elizabeth herself had commanded Michel de la
Forêt to the lists; and his mad jealousy impelled him to resort to a
satanic cunning towards these two fugitives, who seemed to have
mounted within a few short days as far as had he in thrice as many
years to a high place in the regard of the Majesty of England.
To disgrace them both, to sow distrust of the girl in the Queen’s
mind; to make her seem the opposite of what she was; to drop in
her own mind suspicion of her lover; to drive her to some rash act,
some challenge of the Queen herself—that was his plan. He knew
how little Elizabeth’s imperious spirit would brook any challenge from
this fearless girl concerning De la Forêt. But to convince her that the
Queen favored Michel in some shadowed sense, that De la Forêt was
privy to a dark compact—so deep a plot was all worthy of a larger
end. He had well inspired the court of France through its
ambassador to urge the Medici to press actively and bitterly for De la
Forêt’s return to France, and to the beheading sword that waited for
him; and his task had been made light by international difficulties,
which made the heart of Elizabeth’s foreign policy friendship with
France and an alliance against Philip of Spain. She had, therefore,
opened up, even in the past few days, negotiations once again for
the long-talked-of marriage with the Duke of Anjou, the brother of
the King, son of the Medici. State policy was involved, and, if De la
Forêt might be a counter, the pledge of exchange in the game, as it
were, the path would once more be clear.
He well believed that Elizabeth’s notice of De la Forêt was but a
fancy that would pass, as a hundred times before such fancies had
come and gone; but against that brighter prospect there lay the fact
that never before had she shown himself such indifference. In the
past she had raged against him, she had imprisoned him, she had
driven him from her presence in her anger, but always her
paroxysms of rage had been succeeded by paroxysms of tenderness.
Now he saw a colder light in the sky, a grayer horizon met his eye.
So at every corner of the compass he played for the breaking of the
spell.
Yet as he now bowed low before Angèle there seemed to show in his
face a very candor of surprise, of pleasure, joined to a something
friendly and protective in his glance and manner. His voice insinuated
that by-gones should be by-gones; it suggested that she had
misunderstood him. It pleaded against the injustice of her prejudice.
“So far from home!” he said, with a smile.
“More miles from home,” she replied, thinking of never-returning
days in France, “than I shall ever count again.”
“But no, methinks the palace is within a whisper,” he responded.
“Lord Leicester knows well I am a prisoner, that I no longer abide in
the palace,” she answered.
He laughed lightly. “An imprisonment in a Queen’s friendship. I
bethink me, it is three hours since I saw you go to the palace. It is a
few worthless seconds since you have got your freedom.”
She nettled at his tone. “Lord Leicester takes great interest in my
unimportant goings and comings. I cannot think it is because I go
and come.”
He chose to misunderstand her meaning. Drawing closer, he bent
over her shoulder. “Since your arrival here my only diary is the tally
of your coming and going.” Suddenly, as though by an impulse of
great frankness, he added, in a low tone:
“And is it strange that I should follow you—that I should worship
grace and virtue? Men call me this and that. You have no doubt been
filled with dark tales of my misdeeds. Has there been one in the
court, even one, who, living by my bounty or my patronage, has said
one good word of me? And why? For long years the Queen, who,
maybe, might have been better counselled, chose me for her friend,
adviser—because I was true to her. I have lived for the Queen, and
living for her have lived for England. Could I keep—I ask you, could I
keep myself blameless in the midst of flattery, intrigue, and
conspiracy? I admit that I have played with fiery weapons in my day,
and must needs still do so. The incorruptible cannot exist in the
corrupted air of this court. You have come here with the light of
innocence and truth about you. At first I could scarce believe that
such goodness lived, hardly understood it. The light half-blinded and
embarrassed; but at last I saw! You of all this court have made me
see what sort of life I might have lived. You have made me dream
the dreams of youth and high, unsullied purpose once again. Was it
strange that in the dark pathways of the court I watched your
footsteps come and go, carrying radiance with you? No—Leicester
has learned how sombre, sinister, has been his past, by a presence
which is the soul of beauty, of virtue, and of happy truth. Lady, my
heart is yours. I worship you.”
Overborne for the moment by the eager, searching eloquence of his
words, she had listened bewildered to him. Now she turned upon
him with panting breath, and said:
“My lord, my lord, I will hear no more. You know I love Monsieur de
la Forêt, for whose sake I am here in England—for whose sake I still
remain.”
“’Tis a labor of love but ill requited,” he answered, with suggestion in
his tone.
“What mean you, my lord?” she asked, sharply, a kind of blind agony
in her voice; for she felt his meaning, and though she did not believe
him, and knew in her soul he slandered, there was a sting, for
slander ever scorches where it touches.
“Can you not see?” he said. “May Day—why did the Queen
command him to the lists? Why does she keep him here—in the
palace? Why, against the will of France, her ally, does she refuse to
send him forth? Why, unheeding the laughter of the court, does she
favor this unimportant stranger, brave though he be? Why should
she smile upon him?... Can you not see, sweet lady?”
“You know well why the Queen detains him here,” she answered,
calmly now. “In the Queen’s understanding with France, exiles who
preach the faith are free from extradition. You heard what the Queen
required of him—that on Trinity Day he should preach before her,
and upon this preaching should depend his safety.”
“Indeed, so her Majesty said with great humor,” replied Leicester.
“So, indeed, she said; but when we hide our faces a thin veil
suffices. The man is a soldier—a soldier born. Why should he turn
priest now? I pray you, think again. He was quick of wit; the Queen’s
meaning was clear to him; he rose with seeming innocence to the
fly, and she landed him at the first toss. But what is forward bodes
no good to you, dear star of heaven. I have known the Queen for
half a lifetime. She has wild whims and dangerous fancies, fills her
hours of leisure with experiences—an artist is the Queen. She means
no good to you.”
She had made as if to leave him, though her eyes searched in vain
for the path which she should take; but she now broke in,
impatiently:
“Poor, unnoted though I am, the Queen of England is my friend,” she
answered. “What evil could she wish me? From me she has naught
to fear. I am not an atom in her world. Did she but lift her finger I
am done. But she knows that, humble though I be, I would serve
her to my last breath; because I know, my Lord Leicester, how many
there are who serve her foully, faithlessly, and there should be those
by her who would serve her singly.”
His eyes half closed, he beat his toe upon the ground. He frowned,
as though he had no wish to hurt her by words which he yet must
speak. With calculated thought he faltered.
“Yet do you not think it strange,” he said, at last, “that Monsieur de
la Forêt should be within the palace ever, and that you should be
banished from the palace? Have you never seen the fly and the
spider in the web? Do you not know that they who have the power
to bless or ban, to give joy or withhold it, appear to give when they
mean to withhold? God bless us all—how has your innocence
involved your judgment!”
She suddenly flushed to the eyes. “I have wit enough,” she said,
acidly, “to feel that truth which life’s experience may not have taught
me. It is neither age nor evil that teaches one to judge ’twixt black
and white. God gives the true divination to human hearts that need.”
It was a contest in which Leicester revelled—simplicity and single-
mindedness against the multifarious and double-tongued. He had
made many efforts in his time to conquer argument and prejudice.
When he chose, none could be more insinuating or turn the flank of
a proper argument by adroit suggestion. He used his power now.
“You think she means well by you? You think that she, who has a
thousand ladies of a kingdom at her call, of the best and most
beautiful—and even,” his voice softened, “though you are more
beautiful than all, that beauty would soften her towards you? When
was it Elizabeth loved beauty? When was it that her heart warmed
towards those who would love or wed? Did she not imprison me,
even in these palace grounds, for one whole year because I sought
to marry? Has she not a hundred times sent from her presence
women with faces like flowers because they were in contrast to her
own? Do you see love blossoming at this court? God’s Son! but she
would keep us all like babes in Eden and she could, unmated and
unloved.”
He drew quickly to her and leaned over her, whispering down her
shoulder. “Do you think there is any reason why all at once she
should change her mind and cherish lovers?”
She looked up at him fearlessly and firmly.
“In truth, I do. My Lord Leicester, you have lived in the circle of her
good pleasure, near to her noble Majesty, as you say, for half a
lifetime. Have you not found a reason why now or any time she
should cherish love and lovers? Ah, no; you have seen her face, you
have heard her voice, but you have not known her heart!”
“Ah, opportunity lacked,” he said, in irony and with a reminiscent
smile. “I have been busy with state affairs, I have not sat on
cushions, listening to royal fingers on the virginals. Still, I ask you,
do you think there is a reason why from her height she should stoop
down to rescue you or give you any joy? Wherefore should the
Queen do aught to serve you? Wherefore should she save your
lover?”
It was on Angèle’s lips to answer, “Because I saved her life on May
Day.” It was on her lips to tell of the poisoned glove, but she only
smiled, and said:
“But, yes, I think, my lord, there is a reason, and in that reason I
have faith.”
Leicester saw how firmly she was fixed in her idea, how rooted was
her trust in the Queen’s intentions towards her; and he guessed
there was something hidden which gave her such supreme
confidence.
“If she means to save him, why does she not save him now? Why
not end the business in a day—not stretch it over these long
midsummer weeks?”
“I do not think it strange,” she answered. “He is a political prisoner.
Messages must come and go between England and France. Besides,
who calleth for haste? Is it I who have most at stake? It is not the
first time I have been at court, my lord. In these high places things
are orderly”—a touch of sarcasm came into her tone—“life is not a
mighty rushing wind save to those whom vexing passion drives to
hasty deeds.”
She made to move on once more, but paused, still not certain of her
way.
“Permit me to show you,” he said, with a laugh and a gesture
towards a path. “Not that—this is the shorter. I will take you to a
turning which leads straight to your durance—and another which
leads elsewhere!”
She could not say no, because she had, in very truth, lost her way,
and she might wander far and be in danger. Also, she had no fear of
him. Steeled to danger in the past, she was not timid; but, more
than all, the game of words between them had had its fascination.
The man himself, by virtue of what he was, had his fascination also.
The thing inherent in all her sex, to peep over the hedge, to skirt
dangerous fires lightly, to feel the warmth distantly and not be
scorched—that was in her, too, and she lived according to her race
and the long predisposition of the ages. Most women like her—as
good as she—have peeped and stretched out hands to the alluring
fire and come safely through, wiser and no better. But many, too,
bewildered and confused by what they see—as light from a mirror
flashed into the eye half blinds—have peeped over the hedge and,
miscalculating their power of self-control, have entered in, and
returned no more into the quiet garden of unstraying love.
Leicester quickly put on an air of gravity. “I warn you that danger
lies before you. If you cross the Queen—and you will cross the
Queen when you know the truth, as I know it—you will pay a heavy
price for refusing Leicester as your friend.”
She made a protesting motion and seemed about to speak, but
suddenly, with a passionate gesture, Leicester added: “Let them go
their way. Monsieur de la Forêt will be tossed aside before another
winter comes. Do you think he can abide here in the midst of plot
and intrigue and hated by the people of the court? He is doomed.
But more, he is unworthy of you; while I can serve you well, and I
can love you well.” She shrank away from him. “No, do not turn from
me, for, in very truth, Leicester’s heart has been pierced by the
inevitable arrow. You think I mean you evil?”
He paused as though uncertain how to proceed, then with a sudden
impulse continued: “No! no! And if there be a saving grace in
marriage, marriage it shall be, if you will but hear me. You shall be
my wife—Leicester’s wife. As I have mounted to power, so I will hold
power with you—with you, the brightest spirit that ever England
saw. Worthy of a kingdom with you beside me, I shall win to greater,
happier days; and at Kenilworth, where kings and queens have
lodged, you shall be ruler. We will leave this court until Elizabeth,
betrayed by those who know not how to serve her, shall send for me
again. Here—the power behind the throne—you and I will sway this
realm through the aging, sentimental Queen. Listen, and look at me
in the eyes—I speak the truth, you read my heart. You think I hated
you and hated De la Forêt. By all the gods! it’s true I hated him,
because I saw that he would come between me and the Queen. A
man must have one great passion. Life itself must be a passion.
Power was my passion—power, not the Queen. You have broken all
that down. I yield it all to you—for your sake and my own. I would
steal from life yet before my sun goes to its setting a few years of
truth and honesty and clear design. At heart I am a patriot—a loyal
Englishman. Your cause—the cause of Protestantism—did I not fight
for it at Rochelle? Have I not ever urged the Queen to spend her
revenue for your cause, to send her captains and her men to fight
for it?”
She raised her head in interest, and her lips murmured, “Ah, yes, I
know you did that.”
He saw his advantage and pursued it. “See, I will be honest with you
—honest at last, as I have wished in vain to be, for honesty was
misunderstood. It is not so with you—you understand. Ah, light of
womanhood, I speak the truth now. I have been evil in my day—I
admit it—evil because I was in the midst of evil. I betrayed because
I was betrayed; I slew else I should have been slain. We have had
dark days in England, privy conspiracy and rebellion; and I have had
to thread my way through dreadful courses by a thousand blind
paths. Would it be no joy to you if I, through your influence, recast
my life—remade my policy, renewed my youth—pursuing principle
where I have pursued opportunity? Angèle, come to Kenilworth with
me. Leave De la Forêt to his fate. The way to happiness is with me.
Will you come?”
He had made his great effort. As he spoke he almost himself
believed that he told the truth. Under the spell of his own emotional
power it seemed as though he meant to marry her, as though he
could find happiness in the union. He had almost persuaded himself
to be what he would have her to believe he might be.
Under the warmth and convincing force of his words her pulses had
beat faster, her heart had throbbed in her throat, her eyes had
glistened; but not with that light which they had shed for Michel de
la Forêt. How different was this man’s wooing—its impetuous,
audacious, tender violence, with that quiet, powerful, almost sacred
gravity of her Camisard lover! It is this difference—the weighty,
emotional difference—between a desperate passion and a pure love
which has ever been so powerful in twisting the destinies of a moiety
of the world to misery, who otherwise would have stayed contented,
inconspicuous, and good. Angèle would have been more than human
if she had not felt the spell of the ablest intriguer, of the most
fascinating diplomatist of his day.
Before he spoke of marriage the thrill—the unconvincing thrill
though it was—of a perilous temptation was upon her; but the very
thing most meant to move her only made her shudder; for in her
heart of hearts she knew that he was ineradicably false. To be
married to one constitutionally untrue would be more terrible a fate
for her than to be linked to him in a lighter, more dissoluble bond. So
do the greatest tricksters of this world overdo their part, so play the
wrong card when every past experience suggests it is the card to
play. He knew by the silence that followed his words, and the slow,
steady look she gave him, that she was not won nor on the way to
the winning.
“My lord,” she said, at last, and with a courage which steadied her
affrighted and perturbed innocence, “you are eloquent, you are
fruitful of flattery, of those things which have, I doubt not, served
you well in your day. But, if you see your way to a better life, it were
well you should choose one of nobler mould than I. I am not made
for sacrifice, to play the missioner and snatch brands from the
burning. I have enough to do to keep my own feet in the ribbon-
path of right. You must look elsewhere for that guardian influence
which is to make of you a paragon.”
“No, no,” he answered, sharply, “you think the game not worth the
candle—you doubt me and what I can do for you; my sincerity, my
power you doubt.”
“Indeed, yes, I doubt both,” she answered, gravely, “for you would
have me believe that I have power to lead you. With how small a
mind you credit me! You think, too, that you sway this kingdom; but
I know that you stand upon a cliff’s edge, and that the earth is
fraying ’neath your tread. You dare to think that you have power to
drag down with you the man who honors me with—”
“With his love, you’d say. Yet he will leave you fretting out your soul
until the sharp-edged truth cuts your heart in twain. Have you no
pride? I care not what you say of me—say your worst, and I will not
resent it, for I will still prove that your way lies with me.”
She gave a bitter sigh, and touched her forehead with trembling
fingers. “If words could prove it, I had been convinced but now, for
they are well devised, and they have music, too; but such a music,
my lord, as would drown the truth in the soul of a woman. Your
words allure, but you have learned the art of words. You yourself—
oh, my lord, you who have tasted all the pleasures of this world,
could you then have the heart to steal from one who has so little
that little which gives her happiness?”
“You know not what can make you happy—I can teach you that. By
God’s Son! but you have wit and intellect and are a match for a
prince, not for a cast-off Camisard. I shall ere long be lord-lieutenant
of these isles—of England and Ireland. Come to my nest. We will fly
far! Ah, your eye brightens, your heart leaps to mine—I feel it now, I
—”
“Oh, have done, have done,” she passionately broke in. “I would
rather die, be torn upon the rack, burned at the stake, than put my
hand in yours. And you do not wish it—you speak but to destroy, not
to cherish. While you speak to me I see all those”—she made a
gesture as though to put something from her—“all those to whom
you have spoken as you have done to me. I hear the myriad
falsehoods you have told—one whelming confusion. I feel the
blindness which has crept upon them—those poor women—as you
have sown the air with the dust of the passion which you call love.
Oh, you never knew what love meant, my lord. I doubt if when you
lay in your mother’s arms you turned to her with love. You never did
one kindly act for love; no generous thought was ever born in you
by love. Sir, I know it as though it were written in a book: your life
has been one long calculation—your sympathy or kindness a
calculated thing. Good-nature, emotion you may have had, but never
the divine thing by which the world is saved. Were there but one
little place where that Eden flower might bloom within your heart,
you could not seek to ruin that love which lives in mine and fills it,
conquering all the lesser part of me. I never knew of how much love
I was capable until I heard you speak to-day. Out of your life’s
experience, out of all that you have learned of women, good and
evil, you—for a selfish, miserable purpose—would put the gyves
upon my wrists, make me a pawn in your dark game—a pawn which
you would lose without a thought as the game went on.
“If you must fight, my lord, if you must ruin Monsieur de la Forêt
and a poor Huguenot girl, do it by greater means than this. You
have power, you say. Use it then; destroy us, if you will. Send us to
the Medici: bring us to the block, murder us—that were no new
thing to Lord Leicester. But do not stoop to treachery and falsehood
to thrust us down. Oh, you have made me see the depths of shame
to-day! But yet”—her voice suddenly changed, a note of plaintive
force filled it—“I have learned much this hour—more than I ever
knew. Perhaps it is that we come to knowledge only through fire and
tears.” She smiled sadly. “I suppose that sometimes, some day, this
page of life would have scorched my sight. Oh, my lord, what was
there in me that you dared speak so to me? Was there naught to
have stayed your tongue and stemmed the tide in which you would
engulf me?”
He had listened as in a dream at first. She had read him as he might
read himself, had revealed him with the certain truth, as none other
had done in all his days. He was silent for a long moment, then
raised his hand in protest.
“You have a strange idea of what makes offence and shame. I
offered you marriage,” he said, complacently. “And when I come to
think upon it, after all that you have said, fair Huguenot, I see no
cause for railing. You call me this and that; to you I am a liar, a
rogue, a cut-throat, what you will; and yet, and yet, I will have my
way—I will have my way in the end.”
“You offered me marriage—and meant it not. Do I not know? Did
you rely so little on your compelling powers, my lord, that you must
needs resort to that bait? Do you think that you will have your way
to-morrow if you have failed to-day?”
With a quick change of tone and a cold, scornful laugh he rejoined,
“Do you intend to measure swords with me?”
“Oh no, my lord,” she answered, quietly, “what should one poor,
unfriended girl do in contest with the Earl of Leicester? But yet, in
very truth, I have friends, and in my hour of greatest need I shall go
seeking.”
She was thinking of the Queen. He guessed her thought.
“You will not be so mad,” he said, urbanely, again. “Of what can you
complain to the Queen? Tut! tut! you must seek other friends than
the Majesty of England.”
“Then, my lord, I will,” she answered, bravely. “I will seek the help of
such a Friend as fails not when all fails, even He who putteth down
the mighty from their seats and exalteth the humble.”
“Ah, well, if I have not touched your heart,” he answered, gallantly,
“I at least have touched your wit and intellect. Once more I offer
you alliance. Think well before you decline.”
He had no thought that he would succeed, but it was ever his way to
return to the charge. It had been the secret of his life’s success so
far. He had never taken a refusal. He had never believed that when
man or woman said no that no was meant; and if it were meant he
still believed that constant dropping would wear away the stone. He
still held that persistence was the greatest lever in the world, that
unswerving persistence was the master of opportunity.
 “IT WAS THE QUEEN’S FOOL”

They had now come to two paths in the park leading different ways.
“This road leads to Kenilworth, this to your prison,” he said, with a
slow gesture, his eyes fixed upon hers.
“I will go to my prison, then,” she said, stepping forward, “and
alone, by your leave.”
Leicester was a good sportsman. Though he had been beaten all
along the line, he hid his deep chagrin, choked down the rage that
was in him. Smiling, he bowed low.
“I will do myself the honor to visit your prison to-morrow,” he said.
“My father will welcome you, my lord,” she answered, and, gathering
up her skirt, ran down the pathway.
He stood, unmoving, and watched her disappear.
“But I shall have my way with them both,” he said, aloud.
The voice of a singer sounded in the greenwood. Half consciously
Leicester listened. The words came shrilling through the trees:

“Oh, love, it is a lily flower,

(Sing, my captain, sing, my lady!)
The sword shall cleave it, Life shall leave it—
Who shall know the hour?
(Sing, my lady, still!).”

Presently the jingling of bells mingled with the song, then a figure in
motley burst upon him. It was the Queen’s fool.
“Brother, well met—most happily met!” he cried.
“And why well met, fool?” asked Leicester.
“Prithee, my work grows heavy, brother. I seek another fool for the
yoke. Here are my bells for you. I will keep my cap. And so we will
work together, fool: you for the morning, I for the afternoon, and
the devil take the night-time! So God be with you, Obligato!”
With a laugh he leaped into the undergrowth and left Leicester
standing with the bells in his hand.
 XVI
NGÈLE had come to know, as others in like case
have ever done, how wretched indeed is that
poor man that hangs on princes’ favors. She had
saved the Queen’s life upon May Day, and on the
evening of that day the Queen had sent for her,
had made such high and tender acknowledgment
of her debt as would seem to justify for her
perpetual honor. And what Elizabeth said she meant; but in a life set
in forests of complications and opposing interests the political
overlapped the personal in her nature. Thus it was that she had kept
the princes of the world dangling, advancing towards marriage with
them, retreating suddenly, setting off one house against the other,
allying herself to one European power to-day, with another to-
morrow, her own person and her crown the pawn with which she
played. It was not a beautiful thing in a woman, but it was what a
woman could do; and, denied other powers given to men—as to her
father—she resorted to astute but doubtful devices to advance her
diplomacy. Over all was self-infatuation, the bane of princes, the
curse of greatness, the source of wide injustice. It was not to be
expected, as Leicester had said, that Elizabeth, save for the whim of
the moment, would turn aside to confer benefit upon Angèle or to
keep her in mind, unless constrained to do so for some political
reason.
The girl had charmed the Queen, had, by saving her life, made
England her long debtor; but Leicester had judged rightly in
believing that the Queen might find the debt irksome; that her
gratitude would be corroded by other destructive emotions. It was
true that Angèle had saved her life, but Michel had charmed her eye.
He had proved himself a more gallant fighter than any in her
kingdom; and had done it, as he had said, in her honor. So, as her
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

textbookfull.com