Getting Started With Angular 2nd Edition Stephen Adams

Getting Started With Angular 2nd Edition Stephen
Adams install download
https://textbookfull.com/product/getting-started-with-
angular-2nd-edition-stephen-adams/
Download more ebook instantly today - get yours now at 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
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
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

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.

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

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.

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.

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

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

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

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.

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

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/

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/

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:

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.

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:

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

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>

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.

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 Scribd Document
with Unrelated Content

altertümlichen Vasen für Dionysos die kräftige Haarfülle nicht gerade
als ein unterscheidendes Charakteristikum hingestellt werden kann,
so ist doch eine Reihe von Beispielen hervorzuheben, wo mehrere
Götter nebeneinander dar

The text on this page is estimated to be only 27.74%
accurate
1090 Dionysos (bärtig auf Vasen) gestellt sind und die
Absieht durch die Haarbildung zu individualisieren , deutlich wird.
Hier erscheint dann der J. tvgvxairrjg (Find. Isthm. 7, 4) vor den
anderen Göttern deutlieh ausgezeichnet: Gerhard a. V. 1,4 (Geburt
Athenasmit Zeus, Poseidon, Dion.) id. 2, 175 (Hermes, Poseidon,
Diou.), Mon. d. Inst. 6 u. 7, t. 67 (Hermes u. Dion.). Instruktiv in
dieser Hinsicht ist das Vasenbild ob. 1097/8 Fig. 3 (nach Mon. d.
Dionysos (bärtig auf Münzen) 1100 Die dargestellten Mythen sind
dieselben wie auf den echwarzfig. Vasen, nur fehlen Beispiele für das
tyrrhen. Abenteuer und die Verbindung mit Semele ; dafür tritt als
neu hinzu die Verknüpfung des Dionysos- und Tbeseusmythos in
dem grofsartigen att. Vasenbild Gerhard, etr. u. camp. . Vasen 6. 7.
Die betrachteten Vasendarstellungen sind als einzige sichere
Urkunde für den altertümlichsten Inst. 9, 43), wo neben dem
Himmelskönig der 10 Typus des Dionysos von Wichtigkeit. Sie
zeiGott des vegetativen "Wachstums nicht nur mit vollerem
Haarwuchs , sondern auch in mächtigeren Körperformen gebildet ist.
Zugleich ist die bei Dionysos beliebte stärkere Verhüllung zu
beachten. Unter den Attributen herrscht zunächst noch die Ranke
vor (Sosiasschale Müller-Wieseler 1, 210b. Gerhard a. V. 1, 77. El.
cer. 1, 44 etc.). Der Thyrsos erscheint zunächst bei dem Thiasos des
gen, obschon in den reifsten Exemplaren des strengen Stils in
verhältnismäfsig späte Zeit (Ende des 5. Jahrh.) hinabreichend, ein
zähes Festhalten am Althergebrachten. Weniger konservativ
erscheint die Kunst der Stempelsehneidung, insofern die wenigen
archaischen Darstellungen des Gottes auf Münzen doch schon
gewisse Merkmale eines fortgeschrittenen Typus bekunden. Gleich
an der Spitze Gottes , während für letzteren die Ranke bei- üo steht
sogar ein überraschendes Unicum , eine behalten ist, Mon. d. Inst.
11, 27, Münch. 273. 332. Dann wird er dem Gott selbst in die Hand
gegeben, zunächst mit gleichzeitiger Beibehaltung der Ranke
(Panofka, D. u. Thyiad. 1,2 a), dann unter Wegfall der letzteren
(Millingen 31, 1. Gerhard 1, 4 etc.). Die Spitze des Thyrsos schmückt

Epheulaub in dichtem Busch (vgl. Eur. Bacch. 1054 f.), zuweilen sind
aber nur einige Ranken oben an und in den aus dem 6. Jahrh.
stammende Silber münze Grofsgriechenlands („uncertain of Lucania
or Bruttii"), beistehend (Fig. 4) abgebildet nach Catal. of gr. coins in
the brit. Mus. Italu p. 395. Da völlige Nacktheit sonst bei dem
bärtigen Gott ganz unerhört ist, so hat man in dieser Figur lieber
einen Satyr erblicken Schaft gesteckt, wodurch sich letzterer als ein
30 wollen, doch tritt P. GardRohrgewächs (fapibjl, ferula communis)
zu erkennen giebt. Im übrigen ist die Natur des Schaftes nicht
deutlich genug charakterisiert (vgl. unten p. 1106). Bei Fröhntr, m.
de Fr. 6 dringt Dionysos auf einen Giganten mit der Lanze ein, deren
untere Spitze einen Epheubüschel trägt (eine Art &vqc6oy %og) ,
nach späterer Vorstellung ist die Lanzenspitze selbst in
Epheublättern versteckt, Diod. 3, 65. 3 ; eine ner , the types of gr.
coins p. 87 mit Recht für die Erklärung derselben als Dionysos ein.
Es ist hier Kg. d. eben der Versuch den Gott Münze UnteritalionB. in
völliger Nacktheit darzustellen nicht wegzuleugnen , nur steht
derselbe ganz vereinzelt da. Im übrigen zeigt die Münze den
gewöhnlichen archaischen Dioeinfache Lanze führte ein Dionysosbild
der 40 nysostypus: ein ruhiges Dastehen, tief auf den Lakonier,
Macrob. sat. 1, 19, 2. Das Trinkhorn wird seltener (Gerhard 1, 77.
Münch. 273, 736), der Kantharos Regel. Der Epheukranz ist auch
hier der übliche Hauptschmuck, ein Kranz von Weinlaub
ausnahmsweise (Münch. 273. 388), nur eine schmale Binde Fl. cir. 1,
44, eine dicke reifartige (vgl. oben unter Asklepios p. 628, 6)
Millingen 31, 1. In einem Beispiel (edelster strengfig. Stil) Nacken
fallendes Haar, Rebzweig und Kantharos. Eine Normaldarstellung des
hochaltertümlichen Stils bietet der Dionysoskopf auf Münzen von
Naxos (Sicil.) FriedländerSollet, das Mnigl. Mün;kab. n. 539 und 540
(Tai VI). Der Gott hat hier den Epheukranz, in den Nacken tief
herabfallendes Haupthaar und spitzen Bart, der geöffnete Mund soll
freundliches Lächeln ausdrücken (vgl. die cäretan, zeigt sich auch
schon die verzierte Stimbinde 50 Vase Mon. d. Inst. 9, 55, den J.
MnXi%ioq mit befransten Zipfeln (Gerhard, etr. u. camp. V. 6. 7),
über welche unten S. 1107. In der Stellung des Gottes findet man
hier weniger Mannigfaltigkeit als bei den schwarzfig. Vasen. Der

lässig gelagerte Gott tritt zurück (Münch. 388 [Verbindung beider
Stilarten] u. 783. Tischbein 4, 11), nicht minder der reitende (Mon.
d. Inst. 6. 7. t. 67 auf Ziegenbock gelagert). Fast ganz
verschwunden ist der wagenbesteivon Naxos (Insel) , Thcogon. 942
Jiwvvcov nolvyn&iu u. a.). Die Beziehung des Kopfes auf einer
Münze v. Antissa (Gardiur 16, 12) auf den Dionysos Phallen ist sehr
unsicher. Einen Schritt über den archaischen Typus der Vasenbilder
hinaus thun mehrere Münztypen, welche beweisen, dafs um die
Wende des 6. und 5. Jahrh. an Stelle jener alten solennen
Doppelgewandung das Idealkostüm des eingende Gott (ein Beispiel
sehr strengen Stils, i;u fachen Himations (O. Müller, Arch. § 336,
4)1'.), Mon. d. Inst. 10, 23. 24. bakch. Zug). Sitzend ist Dionysos in
Götterversammlungeu dargestellt, sonst aber meist stehend,
umgeben von dem bunten Treiben seines Thiasos, an welchem er
nur selten lebhafter teil nimmt (Gerhard a. V. 1 , 77 Münch. 273) ,
von dem er meist in würdevoller Ruhe sich umschwärmen läfst. auch
für Dionysos zur Anwendung gekommen sein mufs. So schon auf
einer von Gardner zwischen 550 und 479 gesetzten Münze von
Galarina (a. a. 0. Tat". 2, 2), welche bei Vorderansicht des RumpfsB
in der Seitenstellnng von FfiTsen und Kopf tue Eigentümlichkeit des
ältesten Reliefetils, in der Ranke dos altertümliche Attribut des
Gottes bewahrt, dagegen

accurate
1101 Dionysos (bärtig; aroh. Skulpt.) die rechte Brust und
den rechten Arm nackt aus dem Himation hervortreten läl'st. Und die
Bekleidung mit dem blofsen Himation halten dann die Münzen der
folgenden Periode (479 — 431) fest, so die Münzen v. Nagidus,
Gardner 4, 25 (Dionysos mit Weinranke und Thyrsos), oder die
Typen vonAbdera, unter denen ein vorzüglich erhaltenes Exemplar
bei Imhoof'-Blumer, mann, grecgues t. C p. 38 in der linken Hand
des Gottes einen Stab mit Baum- 10 kröne, in der rechten den
Kantharos, ein anderes bei Gardner t. 3 , 29 nur eine Trinkschale in
der Rechten zeigt. Dafs indes die althergebrachte Darstellung des
Dionysos in langem Chiton und darüber geschlagenem Himation
durch solche Neuerung nicht verdrängt ■wurde, sondern (von den
Münzen abgesehen) als die Regel beibehalten worden ist , wird sieh
weiter unten zeigen. Die Umschau nach Darstellungen des Dio- 20
nysos in der archaischen Skulptur führt auf einen sehr unsicheren
Boden. Unter den Reliefs des alten Stils ist keine Darstellung des
Dionysos erhalten , nur litterar. Zeugnisse liegen vor. So war an der
Lade des Kypselos der bärtige Gott liegend dargestellt, in der Hand
ein goldenes Trinkgeschirr und bekleidet mit einem xixav itoärigris,
Paus. 5, 19, 6. In dieser Darstellung „lydischen Einflufs" mit Welcher,
Götterl. 2, 615 zu empfln- su den vermögen wir nicht, wir müfsten
denn überhaupt die Göttertracht der altertümlichen Vasen, für
welche dieser Chiton charakteristisch ist, lydischemEinflufs
zuschreiben. Die Darstellung am Kypseloskasten ist ein Seitenstück
zu den ob. p. 1094 f. besprochenen Vasenbildern mit gelagertem
Dionysos und ergänzt dieselben insofern , als auf jenen entweder
Doppelgewand oder blofses Himation erschien ; im langen Chiton
allein lernten wir einen stehenden Dio- 40 nysos kennen im münch.
Vasenbild n. 696. Am Bathron des amykläischen Thrones waren
Dionysos und Semele dargestellt (Paus. 3, 19, 3) und am Throne
selbst (3, 18, 16) fehlte der Zurückführung Hephaists auf den Olymp
ihr Protagonist sicherlich nicht; vgl. oben die Vasenbilder. Eine Reihe
hochaltertümlicher Reliefs, die sogen. „Eantharosmänner", sämtlich

aus der Umgegend von Sparta, wurden, nachdem das zuerst
gefundene Exemplar auf 5o Dionysos und Ariadne gedeutet worden
(Conze in Annali 1870, 284ff. u. a.), von MücKhöfer im
Zusammenhang behandelt und dem bakchischen Kreise mit Recht
abgesprochen, Mitteilungen 2 p. 303 ff. Die zuerst versuchte
Deutung auf Hades-Chthonia (a. a. O. p. 459) hat MücKhöfer später
durch die richtige auf heroisierte Tote ersetzt, Mittheil. 4 p. 163 und
Areh. Zeitg. 39 p. 293 ff. Unter den erhaltenen archaischen Statuen
60 •wird ein sicher bezeugter Dionysos vermifst, da in den Fällen,
wo man einen solchen zu erkennen geneigt ist, die entscheidenden
Attribute verloren gegangen sind. So ist es der Fall bei einer
Kolossalstatue der Villa Albani, welche Winckelmann , G. d. K. 3, 2 §
11 {Werke 3, 319 Eiset.) für einen Priester und ein Beispiel
altetruskischer Kunst erklärte, Dionysos (bärtig; arch. Skulpt.) 1102
während sie entschieden altgriechischen Ursprungs ist (ob als
Original oder als genaue Kopie, ist noch festzustellen). Dieses für die
Kunstgeschichte wichtige Werk, bis jetzt nur in Feas Übers, d.
Kunitgesch. Winckelmann» 1 tav. 18 publiciert, giebt nach einer
Pbotogr. Fig. 5. Kolossalstatue der Villa Albani. beistehende Fig. 5.
Feas Erklärung derselben als Sacerdote di Bacco 1 p. 434 hat später
der Deutung auf Dionysos selbst Platz gemacht, Beschreibung der
Stadt Rom 3, 2 p. 535; vgl. E. Braun, Ruinen u. Mus. Roms p. 683.
Eine sichere Benennung ist bei dem Mangel charakteristischer
Attribute (beide Unterarme ergänzt) nicht zu wagen, doch läfst sich
wenigstens so viel sagen, dafs diese Gestalt mit

accurate
1103 Dionysos (bärtig; arch. Skulptur) ihrem lang auf den
Rücken und in je 4 Locken tief auf die Brust herabfallenden
Haupthaar, den vollen Körperformen, der Doppelgewandung, dem
offenbar beabsichtigten freundlichen Gesichtsausdruck aufs beste zu
der Vorstellung stimmt, welche man auf Grund der Vasenbilder und
anderweitiger Überlieferung sieb von einer archäischen
Dionysosstatue bildet. Dafs sich im Haar kein Epheukranz, sondern
eine Binde befindet, entspricht dem Brauch der alten Skulptur; auch
haben wir oben selbst auf Vasenbildern statt des regelmäfsigen
Epheukranzes bisweilen die einfache Binde angetroffen (z. B. Münch.
157. Mon. d. Inst. 5, 35). Keine gröfsere Sicherheit bietet die
Benennung einer Statue des Pal. Doria (Matz-Duhn 1 n. 317), welche
in Haarbildung, Doppelgewandung und Stellung der albanischen
Statue nahe steht. Die beiden Marmorköpfe von Del os (Bull, de c. h.
5 pl. 10), welche über der Stirn in drei Reihen frisierte
Schneckenlocken, eine schmale runde Haarbinde, langen und breiten
Bart, volle Wangen und milden Gesichtsausdruck zeigen (archaischer
Typus, aber archaisierende Ausführung), würden durch den Fundort
als bakchisch bezeugt gelten können, wenn die Kombinationen
Homolies (a. a. 0. p. 507 u. 509) das Richtige treffen. Über die in
der 1. Hälfte des 5. Jahrh. geschaffenen Dionysosbilder des
Dionysios von Argos (Paus. 5, 26, 3) uud des Myron (nach Paus. 9,
30, 1 das zweitbedeutendste Werk des Meisters) fehlen genauere
Nachrichten. Ein trefflicher Münztypus von Naxos Sic. (fällt zwischen
479 u. 431) lehrt, in welcher Weise der Kopf des Dionysos von der
reifarehaischen Kunst aufgefafst wurde; s. Abbildg. 6 nach
Fricdliinder-Sallet t. 6 n. 571; vgl. P. Gardner 2, 22. Den Beschlufs
mag ein auf Münzen von Mende in der 2. Hälfte des 5. Jahrh.
erscheinender und später häufig wiederkehrender Typus machen ,
welcher den Gott auf einem Maultier gelagert darstellt (Müller-
Wieseler 31, 349. Catal. of (jr. c. Macedonia p. 81 n. 4; p. 83 n. 10.
Annuaire de la soc. de numism. 3, 1, 40, überall mit Kantharos,
Imhoof -Blumer, monn. gr. p. 83 u. 87 mit dem altertümlicheren

Rhyton). Man schwankt in der Erklärung dieser Figur zwischen
Dionysos und Silen. Die Musterung der Reihe im Katal. des brit.
Museums scheint mir die Deutung auf den Gott zu sichern: in n. 5 u.
6 steht ein deutlich satyresk gebildeter nackter Silen neben einem
Esel. Ganz anders in n. 4 die auf dem Maultier gelagerte Gestalt,
welche in ihrer behaglichen aber würdevollen Ruhe, in dem langen
Haupt- und Barthaar, dem durchaus idealen Ausdruck des Kopfes,
dem um den Unterleib geschlagenen Ilimation ein Wesen höheren
Hanges bekundet und an den in der altertümlichen Kunst beliebten
Darstellungen des gcMünzo von Naxos (Sic.) Dionysos (bärtig; 1.
Blütezeit) 1104 lagerten Dionysos (vgl. oben p. 1094) ihr Ana ■
logon findet. 1. Blütezeit. Von den beiden Koryphäen derselben,
Pheidias u. Polyklet, sind uns keine Darstellungen desDionysos
überliefert (über e.gemutmafsten Dionysos unter den
Parthenonskulpturen vgl. jugendl. Dionysos p. 1126 f.). Kolotes hatte
an seinem Tisch zu Olympia auf der einen Nebenseite Dionysos mit
Pluton und 10 Persephone dargestellt (Paus. 5 , 20, 3) , eine Statue
des Dionysos von demselben Künstler entnimmt aus Eust. :. II. 2,
603 Brunn, G. d. gr. K. 1, 242. Praxias (Kaiamis' Schüler) und
Androsthenes schmückten den 'Westgiebel des Delphischen Tempels
mit Dionysos und den Thyiaden, Paus. 10, 19, 3; vgl. Welcher, a. D.
1, 151 u. 2, 111. In allen diesen Beispielen laust sich die bärtige
Bildung des Gottes wenigstens voraussetzen. Wenn aber 30 nach
Welckcrs auf Eurip. Ion 187 ff. gestützter Vermutung (a. a. 0.) die
beiden letztgenannten Künstler in einer Metope des Delph. Tempels
Dionysos einen Giganten tötend bildeten (lleydemann,
Winckelmannsprogr. 1881 p. 18 vergleicht zu Eur. a. a. 0. Luynes,
Descr. 19, 20. Gerhard, Trinlcsch. A. B), so werden wir in
Übereinstimmung mit sämtlichen Vasenbildern bis zum schönen Stil
herab diesen Gigantenbezwinger nur als den bärtigen Gott auffassen
dftr30 fen. Und mit genügender Sicherheit läfst sich dieser Typus
auch von dem chryselephantinen Dionysos des Alkamenes, der
Kultstatue des athenischen Heiligtums beim Theater, annehmen
(Paus. 1, 20, 2), deren Nachbildungen Beule, monn. d' Athenes p.
262 in athen. Tetradrachmen und Erzmünzen erkannt hat. Dieselben
sind offenbar von einem statuarischen Typus abhängig (Darstellung

von verschiedenen Seiten in stets gleichbleibender Anordnung), ■10
und das Original ist schwerlich anderswo zu suchen als in jenem
kostbaren , die hervorragendste Stätte des athenischen
Dionysoskults schmückenden Werk des Alkamenes. Die Münzen
zeigen den Gott auf einem Thron mit hober Rückenlehne würdevoll
dasitzend, in der erhobenen Rechten den Thyrsos, in der
vorgestreckten Linken den Kantharos. Das Gewand, nur ein
Himation, liegt in den für Details zuverlässigeren Erzmünzen auf der
lin50 ken Schulter und an dem Unterkörper; vergl. den olymp. Zeus
des Pheidias. Bei Beule p. 261 (Uvvrbeck, Plastik 1 p. 274) und
Combe , nnm. mus. brit. 7, 8 (schlecht wiederholt b. 3IiillerWieseler
2 n. 348) ist der Bart ziemlich kurz und das Haupthaar im Nacken
aufgebunden, wohl nur eine Ungenauigkeit infolge schlechter
Erhaltung. Ein mir in Abdruck vorliegendes Exemplar zeigt langen
Bart und um das Haupt einen kräftig vorspringenden Reif (vgl. 60
Millingcnp. d. v. Coghill 31) oder Kranz. Ebenfalls von Gold und
Elfenbein gearbeitet war. die Tempelstatue in dem wegen seiner
altertümlichen. Dionysosbilder schon oben (p. 1093) erwähnten
Heiligtum zu Sikyon, Paus. 2, 7, 6. Zu beiden Seiten des Gottes
befanden sich Marmorstatuen von Bakchen, ein Hinweis darauf, dafs
in dem chryselephantinen Kultbilde der Gott orgiastisch gedacht war,
ent

accurate
1105 Dionysos (bärtig; 1. Blütezeit) Dionysos (bärtig; 1.
Blütezeit) 1106 sprechend dem ebendaselbst befindlichen alten
.lünglingsgestalt bestehe, hat 0. Jahn, EinSehnitzbilde des J.
Bd*xtio$. Der Goldelfen- Int tum manch. Vasenlcat. p. 190 f.
ausgebeintechnik gemäfs wird die Statue nicht spä- sprochen, aber
p. 205 wieder eingeschränkt, ter als Ende des 5. Jahrb.. anzusetzen
sein. und mit Recht; denn der bärtige Gott ist auf Auf Münzen,
welche um den peloponn. Krieg diesen Vasenbildern noch sehr
häutig darge und bald nachher geschlagen worden sind, stellt und
läfst sich bis in den flüchtigen Stil läfst sich der bärtige Kopf des
Dionysos mehr- hinab verfolgen. fach nachweisen. Münzen v. Thas
os {Gard- Im allgemeinen hält sich der Typus des ner 7, 8) zeigen
ihn mit dem Ausdruck gött- Gottes in den von früher überkommenen
Forlicher Hoheit und zeusartig, Münzen von 10 inen; vgl. Miningen,
peint. d. v. pl. 19. El. Naxos Sicil. (Gardner 2, 22. Fricdländer-Sal-
ce'r. 1, 46 A (= Münch. 780). Münch. 793. Palet 6, 571) in einem
etwas vorgeschrittenen nofka, Dion. u. d. Thyiadcn 3, 12 etc. Typus.
Das Haupthaar ist hier überall in Unter den benutzten Sagenstoffen
erfreuen kleine Ringellöekchen aufgelöst; um den Kopf sich der alten
Beliebtheit die Gigantomachie liegt ein breites mit einer Epheuranke
ver- und die Zurückführung Hephaists. Erziertes Diadem. Der
geistige Inhalt tritt hin- stere ist durch zwei hervorragende
Vasenbilder ter der formalen Schönheit des Kopfes zurück vertreten,
welche in der Zeichnung die Grenze (jedenfalls aus der letzten Zeit
der Stadt, des strengen und schönen Stils, in der Situazerstört 403 v.
Chr.). Theben, welches auf tion dagegen eine neue Auffassung
zeigen, älteren Münzen sich mit Dionysischen Attri- 20 nicht mehr
den kämpfenden Gott, sondern ein buten begnügte, zeigt jetzt den
Kopf des Got- Vorstadium, die Rüstung zum Kampfe. Auf tes in einer
interessanten Reihe von Typen, der lebensvollen Vase v. Milo
(Früluicr, mus. (Katal. d. brit. Mus. Central Greece t. 13 Fig. de Fr. 8)
ist der Gott eben im Begriff den 5—9, zwischen 426 u. 395
angesetzt), welche Panzer über dem langen Chiton zu schliefsen,

einen Fortschritt vom strengeren Stil zur edel- während ein Satyr den
Helm bereit hält ; in sten Auffassung vorführen (n. 9 mit mildem, der
Petersburger Vase (C.-iJ. für 1867 t. 4) ersinnendem Ausdruck) ; vgl.
auch die Elektron- scheint Dionj'sos in kurzem Chiton , Panzer
münzen Thebens aus dem Anfang des 4. Jahr- und Stiefeln, die
erhobene Linke auf den Thyrhunderts a. a. 0. Taf. 14, 1 u. 2. Den
schönen sos gestützt, die Rechte in die Seite gestemmt, Köpfen
dieser Reihe ist gemeinsam das lockere 30 jeder Zoll ein Krieger.
Bakchantinnen halten Haar, welches ruäfsig tief auf Nacken und
seine Waffen (Schwert, Schild, Helm). Dafs Hals fällt und der kurze,
die Kinnbildung diese beiden Bilder nur auf den Gigantennicht
verdeckende Bart (die kräftigere Haar- kämpf zu beziehen sind ,
begründet Stephani fülle und überhaupt materiellere Auffassung a.
a. 0. p. 186. Auf die zahlreichen Darsteldes Kopfes bei Gardner 7 ,
24 erklärt sich lungen der Zurückführung Hephaists kommen wohl
aus der gewählten Vorderansicht). Der wir unten mehrfach zurück.
Doppelkopf auf Münzen v. Tenedos (Gard- Unter den Attributen ist
jetzt die Ranke ner 10, 43) wird von Gardner p. 175 im durch den
Thyrsos so gut wie vollständig Anschlufs an Lenormant für einen
zweige- verdrängt (Münch. n. 1181, Dionysos mit Ranke, . staltigen
oder androgynen Dionysos erklärt. io Mainade mit Thyrsos, soll nach
0. Jahn dem Meine Bedenken gegen den oft behaupteten schönen
Stil angehören). Der Schaft, in welAndrogynismus des Dionysos
finden unten chem man nach der schriftlichen Überlieferung (p.
lllOf.) Ausdruck; bei den tenedischen Dop- (Eurip.u. Plato) den
Narthex annehmen mufs, pelköpfen ist der jugendliche durch das
Ohr- ist meist nicht genügend charakterisiert, am gehänge doch
entschieden als weiblich ge- treuesten etwa Millingen pl. 19 mit
stehenkennzeichnet, also Ariadne. Auf Münzen v. gelassenen
Blattstielen und Baremberg-Saglio 1 Aigai (Mionn., D. 3, 2. 4. CJi.
Lenormant, n. Fig. 712; vgl. auch Mon. gr. 1879 prt- 3- Ein galt.
myth. pl. 33, 10) hat der Kopf des Gottes eigentümlich gewundener
Schaft Mon. d. Inst. bei mächtiger Haarfülle einen sehr freund-
11,27. Gerhard, etr. Spiegel 1,102. — Bierbach, liehen Ausdruck. 50
Flora mythol. p. 677 ist ungenügend. Lenz, Welchen Einflufs die
Malerei während Botanik der Griechen u. Römer p. 563 zählt der 1.

Blütezeit auf die Entwickelung des Dio- drei Arten von Narthex auf.
Den oberen Abnysosideals ausgeübt hat, läfst sich nur indi- schlufs
bildet ein Epheubüschel. [Der dolrekt aus den Vasenbildern
abnehmen. Der denförmige Blütenstand der ferula als natüreinzige
der älteren Maler, von welchem Dio- liehe Spitze des Thyrsos ist
noch unbekannt nysosbilder erwähnt werden, ist Parrhasios; und
erst auf späteren Vasen wie Müller-Wievgl. Brunn 2 p. 100 über
seinen Liber pater, seier 1 n. 11. 2 n. 442 dargestellt. Ebenso unmit
dem vielleicht ein zu Korinth mit dem bekannt ist auch noch der
Pinien zapfen auf Preise gekröntes Bild identisch ist. Die Notiz dem
Thyrsos, dessen frühestes Beispiel die Plades Theaitet über letzteres
bei Suid. s. v. 60 stik im Beiwerk des farnesischen Stiers (das oudfi»
jrpös Jiovvoov könnte die Mutmafsung Lysikratesdenkmal giebt keine
Sicherheit), die einer Neuerung, welche Parrhasios in der Dar-
Vasenmalerei in der Hand des jugendlichen Stellung des Gottes
wagte, veranlassen, und Gottes auf einem apul. Vasenbild (Gerhard
ap. in der That werden uns bei den Vasen des V. 15) liefert, während
ältere Vasen wohl stets schönen Stils alsbald eine Reihe von neuen
den Epheubüschel meinen. Eine meines Wissens Zügen im Bilde des
Gottes begegnen. Dafs nur auf süditalischen Vasen erscheinende
Thyrein Charakteristikum dieser Vasen in der sosform (Gerhard, Ap.
V. 1. Mulm, peint. d. Vorführung des Dionysos als einer schönen r. 2,
16; wird man, da ihre Blattstcngel zum

accurate
1107 Dionysos (bärtig; 1. Blütezeit) Aufhängen eines
Tympanon kräftig genug sind (Müller- Wieseler 2 n. 543), schwerlich
mit Gerhard als „Kornähre'' fassen dürfen, eher als eine Rohrpflanze
des Südens.] Jetzt zuerst erscheint auch dieNebris unter den
Gewandstücken des Gottes, z. B. Mütter-Wieseler 2 n. 196, eine
relativ späte Übertragung von den Mainaden auf den Gott selbst.
Während auf den älteren Vasenbildern neben dem Epheukranz nur
vereinzelt die Binde als einfaches 10 und schmales Haarband
erschien, tritt jetzt eine anspruchsvollere breite Binde sehr häufig zu
dem Epheukranz oder an seine Stelle und zwar meist in der für
Dionysos, besonders den jugendlichen, charakteristisch gewordenen
Verwendung als Stirnbinde (A. Z. 31, 14. Müller-Wieseler 2, 603, CS.
für 1861 Taf. 4), oft mit tief herabhängenden Zipfeln (3Iillhi g. m. 83,
336. Muller - Wieseler 2 n. 136 etc.1 , in auffallendster Weise Miliin ,
peint. 20 d. u. 1, 30; ein vereinzeltes Beispiel dieser Art giebt bereits
das grofsartige Vasenbild aus der letzten Periode des strengen Stils
Gerhard, etr. u. campan. Yas. 6, 7. Da die Stirnbinde als palästrische
Tracht üblich war (Diadumenos Farnese, Müller-Wieseler 1 n. 136;
attischer Ephebenkopf, Mon. d. Inst. 9, 36), so wird man in ihrem
Auftreten bei Dionj-sos noch keine weibische Tendenz, sondern ein
natürliches Mittel erblicken dürfen, 30 um das volle Haar an dem
Herabgleiten auf das Gesicht zu hindern. Anders freilich Fälle wie
Mülin p. d. v. 1 , 30 , wo die befranste Binde durchaus als Kopfputz
wirkt, und an den xQvcouiTQug Bäy-xos [Soph. Oed. S. 209)
erinnert (eine ähnliche Binde von auffallender Länge tragen übrigens
auch Männer beim Gelage, Mon. d. Inst. 3, 12). Und hiermit
kommen wir zu einer anderen, noch auffallenderen Neuerung im
Typus des Gottes auf Vasen seit 40 dem 4. Jahrb. , jenem
ärmellosen , mit reicher Stickerei verzierten kurzen Rock*) nebst
Gürtel, welchen Dionysos über dem langen ion. oder dor. Chiton
trägt in Beispielen wie Müller-Wieseler 2, n. 196 und den jüngeren.
C. B. für 1861, t. 4 (= Conze, Heroen- und Göttergest. 60). A. Z. 31,
14. Ga:. arch. 1879 pl. 5 = nebenstehende Abbildung Fig. 7). In

dem ersten und letzten Beispiel trägt Dionysos über diesem
gestickten xircovt'ctiog 50 noch die Nebris , in Figur 7 zudem auf
dem linken Arm noch eine Chlamys. An dieser komplizierten
Gewandung sind das auffallendste der Chitoniskos und die Binde.
Beide haben einen fremdländischen Charakter und werden uns beim
jugendlichen Dionysos, in dessen Typus sie eine viel gröfsere Rolle
spielen, wiederbegegnen. Der Chitoniskos. am reichsten verziert in
der Petersburger Vase ComptcEendu a. a. O. (vgl. auch Mon. dclV
Inst. 10, 60 51 , wo er unmittelbar auf den Leib gezo*) Statt dieses
RockB ein nur bis zu den Hüften reichendes Wams b. Müller- WitMltr
2, 6li3 und dazu eine befranste Prachtbinde ib. n. litt» (Priester des
Dionysos?). Vielleicht ist auch im pompejao. Gemälde ib. ii 613 dies
"Wams, und Dicht ein Pauzer [iluaranta) genieint. Pafs es kein
spezifisches Kostüm des Dionysos war, beweist der Flötenspieler
Mon. tt. Inst. 5, 10. Dionysos (bärtig; 1. Blütezeit) 1108 gen1),
gehört in die Kategorie jener Prachtgewänder, welche fortan auf
Vasenbildern bei mehreren Göttern und Heroen erscheinen und von
O. Jahn, Einleitung p. 227 etwas zu spät erst aus der Zeit des
Verfallstils datiert werden. Am frühesten scheint von den Göttern
Dionysos mit ihnen auegestattet worden zu sein; doch ist ihre
Verwendung beim bärtigen Gott auf die Vasenbilder beschränkt
geblieben und auch hier selten Fig. 7. Dionysos in absonderl. Tracht
auf Yasenb. (S. 1107,47). nachweisbar. Aufgekommen sein mag
dieser orientalische Luxus bei den Dionysischen Prachtaufzügen
(Müller. Arch. § 336, 8), in die Kunst hat er aber vermutlich erst
durch Vermittelung des Theaters Eingang gefunden. Unter den oben
genannten 4 Vasenbildern behandeln zwei offenbar einen
Bühnenstoff: Müller- Wieseler 2 n. 196 die Zurückführung Hephaists,
welche Kpicharm in seinen Komasten dramatisch bearbeitet hatte
(O. Müller, Votier 2" p. 247), das attische Vasenbild Arch. Zeit. 31 T.
14 (Dionysos einen Satyr mit der Lanze züchtigend) vermutlich eine
Situation aus irgend einem Satvrdrama. F. Lenormnntb.Darcvtbcrg-
Sagh'o 1 p. 628b will den hier verwendeten kurzen t'berroci als
xpoxeorric. in Anspruch nehmen, wozu hinreichender Grund fehlt.
DennKrokotosheifst bald ein Himation (Follux 4, 117. Suid.B.v.),

accurate
1100 Dionysos (bärtig; 1. Blütezeit) Dionysos (bärtig; i.
Blütezeit) 1110 bald ein Chiton (Schol. Thtamoph. 268), und i od.
Chiton mit Überschlag, darüber Himation). offenbar ein Chiton ist
gemeint Thesmoph. 258, In allen drei Fällen hat der Qott auch die
wo Mnesiloehos denKrokotos als erstes Gewand- breite Zipfelbinde.
I>as 3. Beispiel ist wieder stück auf den Leib zieht. Da der Name
xpo- eine Zurückfühlung Hephaists und damit werxazög von der
Farbe hergenommen ist und die den wir auch für dieses seltene
Kostüm des verschiedensten Gewänder safranfarbig sein Dionysos
auf den Brauch des Theaters hinkonnten, so werden wir auf seine
Nachweisung gewiesen. verzichten müssen. Die gleiche
Zurückhaltung Nun hat aber, nach anderer (Welcher, Giitist
gegenüber der Bassara geboten, nach terl. 2, 616. Preller, gr. Myth.
la, 575f.) VorPollu.c 7, 60: AvSmv %ndv zig ... . Jiovvaia- io gang, Fr.
Lenormant b. Daremiberg-Saglio s. v. xos jrod/Jpjjs, nach Etym.
magn. p. 191, 5 thra- Bacchus p. 598fl'., 616, 628 f. mit grofser
Zuverkisch, irodtiQtjs und TtoiKtlog. Sicher ist die- sieht den Typus
eines androgynen lydischon selbe als Tracht der Mainaden (vergl.
oben Bassareus aufgestellt und für die „tiefgreifenp. 1039 und F. G.
Schoene, de person. in Eurip. den Modifikationen", welche der
bärtige grieBaccli. habitu scen. p. 23 u. 146) und schon chische
Dionysos zur Zeit der grofsen Tragivon Aischylos auf der Bühne
verwendet (vgl. ker durch denselben erfahren, unter anderem seine
„Bassarides" u.frg.MbDind.). „Baechogui- das erste der eben
besprochenen Vasenbilder dem perspicue nusquam tribuiticr" sagt
Schoene (Daremb. Fig. 712) als Beleg beigebracht, woa. a. O. p. 23.
Den Beinamen des Gottes Bassa- bei als Bassara bald der lange
Frauenchiton, reus von dem Gewände seiner Mainadeu abzu- 20
bald das darübergeworfene Tierfell gelten leiten, wie der Schol. zu
Hör. carm. 1, IS, 11 mufs. Als Beleg gilt Lenormant ferner die thut ,
ist vollständig ausreichend, und da wir Vase Mon. d. Inst. 1, 50 A =
Müller- Wicselcr 2 von der Beschaffenheit der Bassara keine klare n,
447, welche völlig asiatisch bekleidete MänVorstellung haben, so

wird die Annahme eines ner und Frauen um einen ebenso
kostümicrmit der ßctoeuga bekleideten Dionysos auch in ten, auf
einem Dromedar sitzenden Mann mit jenen sehr seltenen Beispielen,
wo der Gott phrygischer Mütze und kurzem Scepter schwär auf
Vasenbildern einen dem weibliehen Kostüm mend und musicierend
vorführt und eine Darentsprechenden Chiton trägt, zu vermeiden
Stellung der dem Bassareus als Eroberer Baksein und umsomehr, als
das Prädikat Ttotxüog triens (vergl. das Dromedar) auf dem Tmolos
(Et. Magn.) auf ihn nicht zutrifft. Nicht zu 30 gefeierten Feste sein
soll. Aber das Bild diesen Beispielen gehört das schöne Vasenbild
giebt gar keine für den Dionysoskult charakmit der Zurüekführung
Hephaists Millingen teristischen Merkmale, vielmehr eine Darstelpl. 6
(Miliin, g. m. 83, 336), wo Dionysos wie lung aus der menschlichen
Sphäre, den festder ihm folgende Hephaist auf dem blofsen liehen
Aufzug irgend eines orientalischen Leib einen kurzen gegürteten
Chiton trägt, Würdenträgers (die Vase wohl aus dem Ende aber im
Gegensatze zu jenem von einem fein- des 4. Jahrb..). Beispiele eines
androgynen gefältelten Stoffe und mit einem Überschlag, bärtigen
Dionysos sieht Lenormant auch Mus. welche beiden Merkmale im
Gewände der vor- P. Gl. 5, 8 (vgl. das Folg.) und besonders in
aufschreitenden Komodia wiederkehren. Hier einer Bronze des Mus.
von Angers (Ch. Lenorfindet also wenigstens eine Annäherung an die
40 mant, noiw. galt myth. p. 53). Aber die hier weibliche Tracht
statt, und dafs darin eine angeblich auf dem Himation dargestellten
drei Eigentümlichkeit des bakchischen Bühnen- Reihen weiblicher
Brüste sind nichts anderes kostüms überliefert ist, beweist die
inschrift- als ein troddelartiger Gewandschmuek (ein lieh beglaubigte
Anwesenheit der Komodia. Webemuster ähnlicher Form auf dem
Gewand(Ich kann weder mit 0. Müller, Dorier 22, 348 Stoffe Bev.
arch. n. S. 24 pl. 15), überdies ist hier einen Dionysos „im alten
Feierkostüm", die Deutung des Figürehens als Dionysos nicht noch
mit F. Lenormant bei Daremberg-Saglio sicher. Die beigebrachten
Zeugnisse halten p. 627 den Typus des D. Brisaios anerken- nicht
Stich und die ganze Hypothese schwebt nen. Von letzterem wissen
wir nichts wei- in der Luft. Überliefert ist vom Dionysos ter, als dafs
er bärtig dargestellt wurde, 50 Bassareus nur, dafs er bärtig gebildet

wurde, Macrob. Sat. 1, 18, 9.) Für eine von weib- Macrob. Sat. 1, 18,
9. — Früher als der lydische licher Gewandung nicht mehr zu
unterschei- Bassareus ist der phryg. Sabazios herangedende
Bekleidung des Dionysos scheinen nur zogen worden, um ihn auf
den Dionysostypus drei Beispiele vorzuliegen, von welchen zwei
einen verweichlichenden Einflufs ausüben zu den Gott in gleicher
Situation, im Lauf- oder lassen, so besonders von Gerhard, der (Text
Tanzschritt auf eine folgende Mainade zurück- zu den a. D. p. 129 f.,
gr. M. § 438, 3 c ; 446, blickend, vorführen: die Pariser Vase bei Da-
2 a: EtrusJc. Spiegel 1, 70 A. 140) bis zur Aufremberg-Saglio 1 Fig.
712, wo der Gott einen Stellung eines mannweiblichen sabazischen
Diofeingefältelten , mit tiefem Überschlag verse- nysos gelangt. Auch
hier fehlt die positive henen ion. Chiton und darüber die Pardalis 60
Grundlage. Die von Gerhard herbeigezogenen und einen Gürtel
trägt, die Mainade denselben Monumente stammen aus später
römischer Zeit Chiton , nur etwas tiefer herabgelassen und und
zeigen (soweit mir in Abbildung zugängüber ihm eine Nebris ohne
Gürtel. Das lieh) nichts Androgynes, sondern den bärtigen 2. Beispiel
giebt Miliin, peint. d. v. 1, 30; der Gott höchstens mit breiter
Kopfbinde und lanGott trägt hier nur einen langen dorischen gern,
gegürtetem Chiton. Der römische SarChiton mit Überschlag und
doppelter Gürtung kophag M. P. Cl. 5, 8 (Miliin, g. m. 63, 241) und
über den linken Arm eine Cblamys. Da- liefert einen absonderlich
ausgestatteten Diozu kommt noch El. cc'r. 1 , 47 ^Dionysos im nysos
in gegürtetem Chiton (mit Überschlag

accurate
1111 Dionysos (bärtig; 1. Blütezeit) Dionysos (bärtig; 2.
Blütezeit) 1112 wenn nicht richtiger mit übergezogenem Chi- Relief
v. Philippi ist eine späte griechische toniskos, oben p. 1107) und
langen Ärmeln. Arbeit und wenn bei der schlechten Erhaltung
Letztere erscheinen zwar auch auf einem late- doch ein gehörnter
Dionysos anzuerkennen ist, ranischen Sarkophag (Bennd.-Schöne nr.
125 so würde sich derselbe schon aus dem seit Taf. 22, 2), sind aber
sonst ebenso wenig wie hellenistischer Zeit auftretenden
allgemeinen das von der Linken gehaltene Tympanon für
Kunstgeschmack (vgl. unten p. 11 50) hinreichend den bärtigen Gott
nachweisbar , denn die erklären lassen. Dafs die stierartige Bildung
beiden Eckfiguren auf dem Sarkophag Casali des Sabazios später
(wenigstens in Kleinasien) (Müller- Wieseler 2 n. 432a, nach Gerliard
ein nicht üblich war, zeigen oben Relief 1 und 2, „zweifaches Idol des
Sabaz") , sind mit Wie- 10 demnach bleibt zur Stützung derselben
nur scler entschieden für 2 Priester zu erklären, Diodors Zaßägios
xEQaziag (4, 4, 1 in Verbinund demnach liegt auf dem vatikanischen
Sar- düng mit 3, 64, 2) übrig. Beruht derselbe auf kophag wohl nur
eiue Übertragung dieses guter, alter Überlieferung, so kann man auf
priesterlichen Habitus auf den Gott vor. Auf ihn die vereinzelten
stierförmigen Bildungen keinen Fall können so späte Bildwerke für
des griechischen Dionysos zurückführen. Jeeine vermeintliche
Beeinflussung des Dionysos- denfalls sind dieselben lokalisiert
geblieben typus in griechischer Zeit etwas beweisen. Zu- und
frühzeitig hinter den idealen Tendenzen dem lassen Gerhard wie
Lenormant aufser acht, der griechischen Kunst zurückgetreten. Als
dafs der weichliche Charakter, welchen Dio- dann in späterer Zeit (5.
Jahrh.) der Sabazioskult nysos bei den Tragikern und besonders in
der 20 in seiner spec. phrygischen Mysterienform noch späten
Litteratur zeigt, mit dem Ideal des einmal in Griechenland Eingang
fand, begegbärtigeu Gottes nichts zu thun hat, sondern nete ihm der
bessere Teil der Bevölkerung durehvon der Vorstellung des
jugendlichen Diony- aus ablehnend (Arist. Lysistr. 833 und sonst, sos

ausgeht, worüber der 2- Abschn. zu vergl. Apollophan. KQrjrss fr. 3
Heineke. Demosth. de Das wenige, was wir von der Darstellung des
cor. p. 313 Beiske); eine Beeinflussung des in Sabazios wissen, giebt
der Theorie des Andro- sich längst gefestigten Dionysoskults von
diegynismus keinen Halt. ser Seite ist also an sich unwahrscheinlich,
Nur zwei (durch Inschrift gesicherte) Dar- zudem läfst das
inschriftlich häufige Ze«s Stellungen des phrygischen Sabazios
Sctßd&os den Versuch einer Gleichsetzung mit sind uns
überkommen: l)ein Relief v. Koloe, 30 dem Göttervater erkennen.
Wir verlassen die welches nach Wageners leider von keiner Ab-
fremdländischen Göttergestalten mit dem negabildung begleiteter
Beschreibung (Mein, com- tiven Resultat, dafs sie auf die
Entwickelung ronn. et mein, des sav. ctrang. der belg. Acud. des
bärtigen Dionysosideals keinen bemerkBd. 30 p. 8) den Gott auf
einem von 2 Ros- baren Einflufs ausgeübt haben. War der in sen
gezogenen Wagen mit den Attributen der vorgeschichtlicher Zeit aus
Thrakien importierte Schlange und des Adlers darstellt; 2) das Re-
Gott von Hause aus stiergestaltig gewesen, so lief v. Blaudos (Conze,
Reise auf den Inseln erscheint doch das archaische Dionysosbild in
d.thrdk. 31. T. 17, 7; vgl. p. 99 f.): S. als thro- rein griechischem
Typus. Uralter Einflufs nender Jüngling in Chiton und Himation, im
Thrakiens erhält sich im bakch. Orgiasmus; Haar e. Binde, in den
Händen Schale und lan- .10 an ihm haftet eine Reihe von Symbolen
und zenartiges Scepter und neben ihm um einen Geräten (vgl. Voigt
oben p. 1036), als deren Baum geringelt seine Schlange. Für den
grie- Träger zunächst der nrythisehe Thiasos des chischen Dionysos
geben beide Reliefs keinen Gottes erseheint. Allmählich geht dann
von charakteristischen Zug, in der Schlange viel- diesen Attributen
das eine oder das andere mehr ein Symbol, das neben der Gestalt
des auf die Gestalt des Gottes selbst über (ParDionysos keine Rolle
spielt (s. ob. p. 1095 u. 96). dalis, Tbyrsos, Nebris). Andererseits
scheint Nun hat man in zwei Reliefs thrakischen das unter dem
Patronat des Dionysos erwachUrsprungs einen stierartig gebildeten
Sabazios sene Bühnenwesen iu gewissen Kostümformen erkennen
wollen, was (wenn richtig) für den in auf die Ausstattung des Gottes
Einflufs geeinzeluen griechischen Lokalkulten verehrten 50 habt zu

haben , doch (ausgenommen etwa die „Stierbakchos" (vgl. unten p.
1149) in Betracht breite Hauptbinde mit langen Zipfeln) nur
vorkommen würde. Diese Darstellungen liefern übergehend. Aber
dies alles sind Äiifserlich3) ein Relief v. Paros, Müller-Wieseler 2
keiten, von denen die Gestalt des Gottes in n. 814 (die Weihung
eines Odrysers), in wel- ihrem Wesen nicht berührt worden ist. Die
ehern jedoch der Stier mit bärtigem Menschen- Weiterentwickelung
des Dionysosideals wird köpf trotz Heuzey (Itev. arch. n. s. 11, 451)
dies zur Genüge bestätigen, nicht als irgendwie gesicherte
Darstellung des 2. Blütezeit. Dem Streben der jüngeren Sabazios
gelten kann (Flufsjfott nach Michaelis, attischen Schule nach
individueller CharakAnnali 1S63 p. 317), 4) das von dem genannten
teristik und psychologischer Vertiefung mufste Gelehrten entdeckte
Felsrelief v. Philippi 00 die Gestalt des Dionysos ein ergiebiger Stoff
(Mission de Maced. pl. 3,2), darstellend das sein, vermöge der
mannigfachen in seinem Brustbild eines langgelockten Jünglings mit
Wesen liegenden Kontraste. Dem feurigen Nebris und Stierhörnchen
unter einem Kopf- Bkx^hos (in dem auch ein Zug ruantischer tuch
(Baumet „Löwenfell"). Ileuseg erblickt Verzückung liegt, Eurip.
Bacch. 297; vergl. in diesem Bild den unter griech. Einflufs an-
llerod. 7,111. Paus. 10,38, 11) steht der milde thropomorphisierten,
ursprünglich stiergestal- Avetos, der herzerfreuenden Kraft des
Weines tigen thrakischen Naturgott; vgl. auch Lcnor- eine Trübsinn
und Ermattung bewirkende gomant, liev. arch. n. s. S. 29, 380 ff.
Aber das geuüber; derselbe Gott, der sich den Menschen

accurate
1 1 13 Dionysos (bärtig; '2. Blütezeit) als i]-!TiioTccTog
erweist, kann sieh in einen &tög dfivotazog wandeln {Ew. Bacch.
S60); einen bedeutenden Gegensatz birgt das Patronat der
tragischen und zugleich der komischen Poesie ; endlich hat Dionysos
eine (im Bewufstsein der Griechen nie ganz verdunkelte)
allgemeinere Bedeutung als Vegetationsgott, es konnte an ihn also
neben der Vorstellung des Spriefseus, Blüheus, Früchtezeitigens (wie
bei allen Göttern vegetativer Naturkrat't) auch die Vorstellung des
Ersterbens und Vergehens , der Gegensatz von Freude und Trauer
geknüpft werden (s. indes ob. S. 1040). So mochte jetzt in den
bildenden Künsten dem in voller Jugendschöne gebildeten
Frühlingsgott (vgl. den J. "Av&ios) ein von der Vergänglichkeit des
Erdenlebens bewegter, ein leidender Gott entgegengesetzt werden,
und dafa dies in der That geschehen, beweist vielleicht ein gleich zu
besprechendes Kunstwerk. Zahlreiche Dionysosbilder von Künstlern
des 4. Jahrb. werden erwähnt, von den Bildhauern Kephisodot d. A.,
Enkleides, Euphranor, Skopas, Praxiteles, Bryaxis,
Lysippus,Thymilos,Eutychides, von den Malern Aristides, Nikias,
meist leider ohne jede genauere Angabe. Zweimal wird ausdrücklich
das Dionysoskind genannt (Kephisod., Praxitel.), einmal der Jüngling
(Praxiteles), keinmal der bärtige Gott. Der Schwerpunkt liegt jetzt
jedenfalls in der Ausgestaltung des jugendlichen Ideals (vergl.
Abschnitt II); doch ist damit der bärtige Gott noch keineswegs in
den Hintergrund gedrängt, wie erhaltene Bildwerke lehren. Von
besonderem Interesse ist der Kopf auf einer thebanischen Münze (a.
Abbildg. 8, nach Friedländer-Sallet Taf. 3, 183). Der abwärts
geneigte Blick*), der vergeistigte AusFig. 8. Theban. Münze. Fig. 9.
Münze v. Sybrita. druck einer in sich versunkenen Schwärmerei
weisen diesem schönen Kopfe eine wichtige Stelle in der
Entwickelung des Dionysostypus zu. Auf einer Münze v. Sybrita bei
Gardner Tf. 9, 4 erscheint der Gott in ganzer Gestalt, auf einem
Stuhl sitzend, mit Kantharos und Thyrsos , Himation um den
Unterkörper, reichlich auf den Nacken fallenden Locken.

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

Getting Started With Angular 2nd Edition Stephen Adams

Weitere ähnliche Inhalte

Ähnlich wie Getting Started With Angular 2nd Edition Stephen Adams (20)

Getting Started With Angular 2nd Edition Stephen Adams