Angular 2+ and the Tour of Heroes

After getting an overview over Node JS, it’s time to start creating a frontend that will help me specify the methods the RESTful app should provide.

I had decided to try out both React and Angular, since they seem to be the most popular frontend techs. Of the two I will start with Angular.

Angular is an opensource framework developed by google it encourages the use of TypeScript, which is superset of javascript (ES6). It’s naming is slightly confusing as Angular 1.x is a quite different variation with no TypeScript. Angular 2 was the initial name for the new version of Angular, but seeing as they are soon at version 7 it seems only proper that they chose simply to refer to Angular 2+ as Angular.

Starting with Angular and TypeScript turned out to be surprisingly easy as they have a very nice and up to date tutorial at their website. It’s called Tour of Heroes, and in it you create a few different views where you can inspect a set of Heroes, change their names and add or delete them from the list. The tutorial went through everything from component creation, one and two way data-binding (to the html), through frontend routing and even showed how to use a mock-backend component to emulate having a backend.

I will go through some of the main points presented in the tutorial here:

  • Component system
  • Services and the MVC
  • Routing
  • Web-api

Component System

Angular uses a component system where each component is split into three parts. A typescript file, a html file and a css file. 

Components should in general be so minimalistic and specific as possible. To allow for maximum reuse-ability and pruning of the unused code. Components are introduced into the app via the main component, conventionally named app.component.

In a components typescript file (.ts) a selector is defined that is then used to insert the component into the html of the app.component or any nested components html.

This makes it easy to design reusable components with simple independent functionality that can be nested in other components.

To generate a component Angular provides a command line interface (CLI) that can generate a new component folder with all the files needed and registers the component in the app.module.

The app module is what boostraps the app. It also defines the app as a module. Modules are independent solutions that can be imported into other apps. The app module is where the components of the app are declared, and where other modules are imported. An important note is that the order modules are imported in is important. For instance importing the HttpClientInMemoryWebApiModule before the HttpClientModule would not work.

Services and the MVC

Angular also allows to define services that unlike components only consist of a single .ts file. It follows the naming convention name.service.ts.

Services provides a way to implement the Model, View, Controller model. Providing a separation between view and controller. The component that use a service has no idea how the services works and the service no idea what it provides a service to. This allows for more reuse and flexibility as well as easier debugging unit testing.

A service is injected into the component via the component constructor. A service could for instance be responsible for interacting with the backend, or passing messages internally in the app between components.

Routing

Angular has a whole set of modules available for use by importing them in the app.module as shown above. One of them is the AppRoutingModule. This module will intercept http requests in the browser. Routes can then be defined that will link a specific route with a specific component. This component will then be inserted into a <router-outlet/> element. In this way the app can avoid loading a new page and just load the element that is required.

 Web-api

The Tour of Heroes tutorial conveniently introduces a web-api module that can emulate a backend server and provide a response to requests sent by the services. This is super smart because it allow the full design of the client app before designing a suitable backend. Once the frontend is fleshed out the web-api module can be replaced with an actual backend service.

The web-api module use a data file and will persist data between views as long as the web app isn’t reloaded.

Conclusion

I’m quite happy with Angular, the tutorial was very informative and easy to follow. It left me feeling ready to start creating my Blog App. I like the modular component structure of Angular and the clarity it provides.

I used visual studio code as IDE and it it a real pleasure to work with.