Angular Introduction

Angular is a opinionated framework which allows us to create web-applications using TypeScript

There are many front-end JavaScript frameworks to choose from today, each with its own set of trade-offs

Many people were happy with the functionality that Angular 1.x afforded them. Angular 2 improved on that functionality and made it faster, more scalable and more modern. Organizations that found value in Angular 1.x will find more value in Angular 2.

Some features and benefits from http://angular.io

The first release of Angular provided programmers with the tools to develop and architect large scale JavaScript applications, but its age has revealed a number of flaws and sharp edges

Angular 2 was built on five years of community feedback

TypeScript is the native language of Angular which is even build / made by Microsoft

Hence we are using a Google / Microsoft product when we are using Angular

Angular 2 was written in TypeScript, a superset of JavaScript that implements many new ES2016+ features

By focusing on making the framework easier for computers to process, Angular 2 allows for a much richer development ecosystem

Programmers using sophisticated text editors (or IDEs) will notice dramatic improvements with auto-completion and type suggestions. These improvements help to reduce the cognitive burden of learning Angular 2. Fortunately for traditional ES5 JavaScript programmers this does not mean that development must be done in TypeScript or ES2015: programmers can still write vanilla JavaScript that runs without transpilation.

The Github TypeScript guide

This module explains the theory of installing typescript

Installation of TypeScript happens by issueing the following command in your terminal

After this npm-command we should be able to invoke the tsc command from the terminal

After installing TypeScript, we can add TypeScript code immediately

After adding code we can compile the greeter.ts file using the tsc compiler

The result of this should be greeter.js

We could run this greeter.js file using our node command or just watch the resulting greeter.js file.

Should print the version of typescript. Now (18-09-2018) the version should be around 3.0.3

A file greeter.js should be generated

Installing the Angular CLI is pretty simple. After installing Node and NPM we can invoke the the npm command to install it

After generating the application structure a lot of files are created. The most important onces will be described below but be aware that some parts are not used perse yet so the learning of this files is an organic process

Now we have created a directory user-app, jump into the directuring using the cd command

Although the application is now pretty blank, it is possible to run the Angular application now using the Angular CLI command ng serve e.g.

or to open your default browser directory in the app

At the moment of writing the default HTTP port of an Angular app is 4200 hence we can open an other browser and goto http://localhost:4200

Although it is not stated when running you can stop the application using Ctrl-C commands.

So when you press Ctrl and keep Ctrl key down and then press C the application will stop runnning

When you invoke the command ng serve angular starts to compile your source files to (native) JavaScript and places those files in the _dist/<appName>

If you look at that directory you will see several files

You might even copy that files to a public webroot and than you app will run there. e.g.

if you copy that files to c:\users\<username>\apps\bikeshop than you can run the app from that directory

For now the assumption is made that you (yes you, the reader) has learned some regarding Object Orientation so terms like the following below are familiar

In several languages so als for Angular it is common best practise and used a lot to express the classes which we are working on during development which are part of the customer domain / problem are created.

This helps us a lot (proven enough) e.g. to speak the same languare in the team and prevents us from making errors

This module explains how to generate a class in Angular using the Angular CLI

You can generate a domain class with the CLI using the following commands

e.g. to create a User class we express it like this

The domain class (here 'User') might be expressed using lower case or uppercase

The result of this 'ng generate class' is that Angular will generate a class in 'src/app' folder like this

We can (later) hack on this class to give it all the properties the User has but for now we will add id:Number and name:string to it (Number and string are bot TypeScript types)

After adding the domain class we are ready to continue developing the next step of the application, the Component

During this module we will learn what an Angular component is, why we are using it, when to use it and how to use it and finally what the starting content of a Component is

In Angular terms a Component is the part of the application which is responsible for rendering the HTML to the browser. So it is the view part of the MVC model

The answer to the question why are we using a component? is pretty trivial

When we are generating a Component we will generate three files during generating of the component part

All those parts will become clearer later on

We can generate a component using the Angular CLI using the following syntax: $ ng generate component <componentName>

An example, to create a component which will (later) render a list of all customers might be generated like this

After invoking the above command there will be a file created with the name users.component.ts, users.component.html and users.component.css in the subdirectory src/app_users_

Components shouldn’t fetch or save data directly. They should focus on presenting data and delegate data access to a Service

A service is the abstraction in Angular which you might see as the waiter in a restaurant. When eating or drinking, the waiter asks what you want and he will deliver it to you.

In Angular a service is responsible for fetching data from a RESTful webservice and giving that data to a Component Or better …​ a Component will ask the Service to get data and when done the component will render the content of his HTML template

In the MVC - pattern you might see a service as the *C*ontroller part of the pattern. But since we are now in the frontend (so everything here is on the View side of the application landscape) the term controller is very confusing, hence they call it the service, since in fact it is the service who is servicing the data from V (Component) to and from M(MOdel)

We just generated a service and made the service salonfahig for fetching data. In the next module we will plumb this newly service to the UsersComponent

To do this we have to add a dependency (aka wiring) using the constructor in users.component.ts, following the same principle as wiring the httpClient in the Service.

So to do this we add the following dependency in the users.component

In the users.component.html we now still have to render the users to the browser.

We will handle the simplest case first using an Unorder List using the HTML tag ul and it’s child tag li (List Item)

Almost done, the only thing we have to do still is to tell Angular through the app.component.html that we will render the users.component when it loads.

Since, after creation, the tag <app-users> is assigned to users.component.html we add the following tag in app.component.html so that it looks like this or contains this

After this module we now know how to generate a component and plumb the the service to the component. Our UsersComponent now shows the list of users. Would n’t it be nice to be able to create a user ?

In the next module we will generate a component and modify our service to create a fresh users, so follow along …​

In the previous module we used the so called GET HTTP verb to show a list of users In the module we explain WHY http has more than only the GET verb

There are more methods than GET alone to use in the http protocol and REST uses it conform a stanard REST convention way

A REST service is build and we assume that we now how in this entire course. But a small recap …​ Since jsonplaceholder.typicode.com uses GET to fetch a list and POST to create a user we have to be able to set the HEADER of the HTTP request to use the Method: GET or POST

Setting GET in the browser (e.g. Internet exploder, Firefox or Mozilla) is simple since it uses it by default, but setting the request method using a browser to POST is impossible hence we can skip this option

There is a application called Postman which every current developer should have installed. It is a so called REST client. Using Postman you can set the request method / verb to GET, POST, PUT or DELETE

In Angular the usage of verbs was necessary up till the Angular 5 version. After this version we can use the new HttpClientModule which supports transparent http calls since it has methods for post, get, update and delete in itself and finds the rest out for itself

Since we now know enough of the http verbs we can dive into the real generating of the UserCreateComponent and modifying the UserService to create a User

The userservice must have a create method for sending out the REST request to the jsonplaceholder.typicode.com url

Using the HttpClientModule we will create the following method in the service to create a user

Why would we want to make a (separate) component for creating users. The answer to this question lies in the above answered questions, but to recap: to have a single responsible component for one part of the application, to reuse it later and to have a loose coupling.

Hence, the CreateUserComponent is ONLY responsible for creating a user

Our CreateUserComponent will be responsible for creating a user. It will send out a request to the UserService to create a new user

Our UserService will send out the request of the component to the API using a POST request.

To generate a CreateUserComponent we invoke the following command on the terminal

After invoking this command, the Angular CLI should have * generated a src/app/create-user/create-user.component.ts file and accompanying .css, .html and .spec.ts file * should have modified the *app.module.ts file which now declarates the CreateUserComponent

A way to go for creating a user (again …​ a way to go) is using some input tags like this in the CreateUserComponent.html

In the code above you see some [(ngModel)] parts which are new for you

It means that we are saying to the Angular framework that the user.name is bound to the property user.name in the corresponding create-user.component.ts file (some counts for user.id)

Also called banana in the box since we see here with some imagination a banana in a box

It just means that you are using property binding and event binding so both of the mentioned above

This is also called two way binding

Following the code above now please add a CreateUserComponent and modify your service to follow it’s need

The user also should have an username and email property.

Implement the username and email property (just like you did with the name) in the CreateUserComponent and Service

Routing is the way in Angular to map an URL in the form of a string to a component

We route to have a way to navigate between the various components

A routing component is a component which handles the URL(string) to component mapping of the app

The most important part of this routing is to know where to find it: app-routing.module.ts The other important part of this routing is to know where to configure it: routes field / array which contains a map of URL to Component mapping(s), with key: path and value: component

To have a single responsible component for fetching a detail overview of the user we are interested in

The UserShowComponent will be a component which shows all the details (which might be more properties than in the UsersComponent) of the user. It will fetch the data based on the id property of the user

Using the instruction above now please generate your own UserShowComponent and modify the service

The customer does not like the fact that the entire line of the user with id is able for clicking. He prefers a Show link on the right side of the row

Please implement this!

To have a single component to edit the user

The UserEditComponent will be responsible for fetching the user by id, updating the content of the user en sending the update request from the component to the service

Now that we did a lot regarding the component and such the customer called in that he is unable to remove a user

Using Routing and Navigation it is possible to redirect from one component to an other component. This is needed since for instance we would have to redirect to the list of users after adding a new user

In Angular routing and navigation is build upon the next parts

There might be some overlap in the following module which we already did during the days/evenings since it was somehow what reactive

The steps for this exercise are below in the next (sub) module ⇒

This topic is related to routing

Still I explain it here, since it is here! And relates to Routing

In the previous module - async programming - we learned that there are several ways to code asynchronously using JavaScript. That module was primairly meant to have your mind upto par with working with asynchronous code using callbacks, promises, async await and generators.

When version 2 of Angular came out, it introduced us to observables. Angular uses observables extensively in the event system and the HTTP service. Getting your head around observables can be quite a thing

In Angular there is another way to program asynchronously using Observables. Learning the principles of Observables and (correct) programming with Observables is the subject of this module.

The answer to why using Observables lies in simplicicatoin of asynchronous programming starting from EcmaScript 7 using Observables.

Observables are a way of implementing the Publish / Subscribe design pattern which uses an Observable and one ore more Observers

You can use an Observable everywhere in Angular when you expect an asynchronous stream of data

Observables provide support for passing messages between publishers and subscribers in your application. Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values.

Observables are declarative—that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.

An observable can deliver multiple values of any type—literals, messages, or events, depending on the context. The API for receiving values is the same whether the values are delivered synchronously or asynchronously. Because setup and teardown logic are both handled by the observable, your application code only needs to worry about subscribing to consume values, and when done, unsubscribing. Whether the stream was keystrokes, an HTTP response, or an interval timer, the interface for listening to values and stopping listening is the same.

Because of these advantages, observables are used extensively within Angular, and are recommended for app development as well.

There are in fact two ways of using an Observable which is more based on taste than on tactics …​

During this module we learned to work with the details of the Observable class. Although we already worked with it, during this module we learned the details of the Observable class and worked with the Subscription and the async filter

Since Angular 7 we can use the pipe method after having fetched an Observable. It is handy for filtering the returned data of the Observable e.g. to filter out some elements of the Observable which returns all numbers from 1 to 10 and you only are interested in the even numbers. That is a good use case for using the .pipe method.

When you have an Observable and want to pass the result through a chain of methods which filter out the data

This "link" describes very good how the usage of the pipe is

The How of using a pipe is best demonstrated using an example.

To learn working with the Observable and Pipe

During this assignment you will add a Filter to the user app which filters the users based on the username

During this module we learned how to make use of Observable in general and especially the *pipe(…​) method

A component has a lifecycle managed by Angular. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur.

Directive and component instances have a lifecycle as Angular creates, updates, and destroys them.

Developers can tap into key moments in that lifecycle by implementing one or more of the lifecycle hook interfaces in the Angular core library

It is sometimes useful to invoke code when e.g. a Component start his life or finally dies

Each interface has a single hook method whose name is the interface name prefixed with ng. For example, the OnInit interface has a hook method named ngOnInit() that Angular calls shortly after creating the component

No directive or component will implement all of the lifecycle hooks. Angular only calls a directive/component hook method if it is defined.

During this module we learned how to make use of the (sometimes) handy lifecycle methods so that we can inject code during lifecycle hooks of the component

That time is now over …​ it is time to get acquinted with testing with Angular.

Testing with Angular will be the subject of this module

The above quote means so much as: If you don’t test properly, the rest of the world will do it for you!

What the above means? That you do a good testing or the testing is done by your customer! So …​ when should you test? Before the small fish become big sharks! As soon as possible!

Regarding to Angular we can use the following tools for testing

Jasmine is a javascript testing framework that supports a software development practice called Behaviour Driven Development, or BDD for short. It’s a specific flavour of Test Driven Development (TDD). Jasmine, and BDD in general, attempts to describe tests in a human readable format so that non-technical people can understand what is being tested. However even if you are technical reading tests in BDD format makes it a lot easier to understand what’s going on.

Manually running Jasmine tests by refreshing a browser tab repeatedly in different browsers every-time we edit some code can become tiresome.

Karma is a tool which lets us spawn browsers and run jasmine tests inside of them all from the command line. The results of the tests are also displayed on the command line.

Karma can also watch your development files for changes and re-run the tests automatically.

Karma lets us run jasmine tests as part of a development tool chain which requires tests to be runnable and results inspectable via the command line.

It’s not necessary to know the internals of how Karma works. When using the Angular CLI it handles the configuration for us and for the rest of this module we are going to run the tests using only Jasmine.

In the testworld there is a very strong principle we have to explain here ( a little ). Given ⇒ When ⇒ Then

It is even used in Scrumteams to create stories (which are testable!) and it is some like this

Sometimes also called the AAA principle: Arrange, Act, Assert

Angular created testfile (stubs) when creating services, component and classes

The files are located near the generated files itself and are postfixed with *.spec.ts)

We will dive (pretty) deep in this above in the upcoming module

Note to self: Let’s also browse through the slides of the Capgemini pdfs regarding Testing (day 7)

During this module we learned some background info on Testing so that we now know that we have unittests, integration test and e2e-tests and tools like Jasmine, Karma and Protactor

In the following module we will learn that HOW to make a unittests with Angular

In the previous module we learned that we have to test our code and we know some background regarding Testing

But we still have to learn to make tests in Angular, starting with unittests

Learning how to make unittest with Angular will be the subject of this module

The fixing of that problem will be the subject of this module

Given the image above which is called the Testing Pyramid we have to have a lot of unittests and than we are pretty confident about our work

Always create unittests …​ even create unitests before writing code is the principle of Test Driven Development (TDD)

To get and to learn how to get the ng test command succeeding

Using the instruction above and help of the trainer try to get the following command running in your env: ng test (enter)

To learn to create your first unittest

Using the example above, for starters, create a unittest for your voting in the app

In the previous module we learned that we can create a user by clicking Create user in the Angular UI. But …​ the customer complained …​ since not everybody should be able to create a new user

So we have now come to a very (im) populair topic Security and especially Guards

Creating and working with Guards will be the subject of this module

Credits: A lot of this module is used from this page regarding Guards on Angular.io so a lot of kudos go to them!!!

Using Guards in necessary when you have an app and should be able to implement security on it. You might wonder …​ we should add security sooner? Or you might wonder …​ we should add security at last? There are several opinons (polymics) and discussions around it! Fact remains that we should be security-aware with EVERY app we make and when to implement it is more customer based.

What we want is an security agnostic application

(Personal note: I like to create my app with all the first needed features in it and them add the security although I am aware that it must be added)

You use guards when you want to add security and have not much code impact on the existing app! (and it is the best way to add security)

Guards are guards :-) They are classes which conduct the access of the application / components / routing and are not a part of the application, hence the name Guards

You can have multiple guards at every level of a routing hierarchy. The router checks the CanDeactivate and CanActivateChild guards first, from the deepest child route to the top. Then it checks the CanActivate guards from the top down to the deepest child route. If the feature module is loaded asynchronously, the CanLoad guard is checked before the module is loaded. If any guard returns false, pending guards that have not completed will be canceled, and the entire navigation is canceled.

In the following parts of this module we will investigate them (especially CanActivate and CanDeactivate since it is used most and the principles are (almost) the same)

Applications often restrict access to a feature area based on who the user is.

You could permit access only to authenticated users or to users with a specific role. You might block or limit access until the user’s account is activated.

The CanActivate guard is the tool to manage these navigation business rules.

Having the code above using the CanActivateGuard returning only true or false please

implement the guard for the users/create to be open (returning true in the guard) and if that rocks …​ return false and than the url of users/create should not be able to open anymore

To learn to work with guards, especially (first) the CanActivateGuard

During this assignment you will implement the CanActivateGuard to the user application including a pretty real simulated authentication

To learn to work with guards and add realer security

During this assignment you will add more security to the CanActivateGuard so that we are having a more real feeling and a realer user realm

In the previous module we learned that we have a CanDeactivate guard such that we can implement some kind of (pretty simple) security.

Guard can be used for several reasons. Another good reason for using a guard is for moving away from a webpage where you changes something in inputfields. It is quite pityful if a customer moves away from a site forgetting to save

The fixing of that problem will be the subject of this module

You use a CanDeactivate guard for several reaons but a much used use case in the moving away from a website|form use case

In this example type T here is a so called generic type

In this module we will add the following use case

To learn working with the CanDeactivateGuard

During this assignment you will add and use the CanDeactivate guard principle

During this module we learned what guards are, why and when to use them and even how to make them and make them working with the Angular app and show the worth them have!

Below you find for this topic some extra resources to watch after the week the topic Can Deactivate Guard is introduced during the training

In the previous modules we implicitly learned and worked with the (older) template driven forms. So we will not dive deep(er) into that since we already know enough of it.

But …​ In this module we will learn how to create fancy forms using the Angular Reactive Forms module which is new since Angular2+

We will use Forms when we want to submit some data. So Forms are a very much used HTML principle. So the Why question here is obsolete?

Now we have created and finished and explained the newly create-post.component.ts we can use this component in the user-show.component.ts since we will add the posts there

To learn to start working with the Angular Reactive Forms module

During this assignment you will implement a new form to create a Post for a User using the Angular Reactive Forms Manual and the flow we just described above

During this module we learned how to make use of the Angular Reactive Forms library which concludes the topic of this Angular training.

Uptil now we were always working on our own machine (development) and now it is time to deliver our app to the customer. But not before testing it thoroughly using an other collegae which is a real tester and not before the customer is willing to accept the app. Only after the customer accepting the app we will bring the app to production.

Working with these environment and especially the location of the files how to work with these environments if the subject of this module

To learn to deploy your app using an other URL to fetch data from

During this assignment you will create an other configuration, set an other url: String in your UserService for fetching data and then make a build for a different environment and deploy that build (for brevity and handy-ness on your own machine)

In this module we learned how to create an environment (Since Angular6 being called a configuration). In the following module we will learn how to install that build what is called Deployment

Deployment will be the topic of the next module