The Angular Blog

It’s time to start work on the Blog App project. As mentioned in previous posts my first project is to create a blog web application from scratch on both front and back end. First using the MEAN stack, then trying out different tech combinations on front and back end. I’m thinking of trying; React, Asp.Net, MySql (instead of MongoDB) and perhaps Ruby on Rails.

At this time I’ve had good experiences with MongoDB, with Node and Express and with Angular. Based on these experiences I’ve decided to start by creating the frontend Angular app before determining the design of the backend nodeExpress server and the MongoDB schematic.

The Angular Blog

I’ve worked on the Angular Blog in small increments over the past weeks. My approach was to start from scratch but to refer to the Tour of Heroes tutorial for guidance with the process. After setting up a basic project the first task was to find a way to get a text editor running as this is the crux of the application. Other tasks would be to create the different views, and to load and save blog posts from a web-api. In the remainder of this post I will describe the tasks I’ve worked on and the issues I’ve dealt with. Outlined here:

  • Quill Editor
    • Getting the styling to work.
    • Getting data into the editor.
    • Getting data out of the editor
    • Preserving the layout
  • Web-api

The current version

First a quick walkthrough of the current version.

This is the app root page. Click home will display the list of all blog posts.

Hovering a blog post will highlight it. Clicking it will route to the editor view.

As can be seen the main text is in the editor field, the title is displayed above. Pressing the delete button with delete the post and take the user back to the previous page.

Clicking the “New Post” button in the navigation bar will create a new post on the backend and take the user to the editor view for that post.

As can be seen there is no title, and no way to add a title yet.

Changing the text in the editor will automatically send those changes to the backend.

Navigating back to the home view it is seen that the new post has been added, with a new ID (as seen in the upper right corner of the post).

Finding an Editor

A quick google search for text editor modules for Angular came up with only one or two suggestions, and the main one seemed to be ngx-quill by KillerCodeMonkey on GitHub.

It is an Angular TS wrapper of QuillJS a pure Javascript version. Eventually I think I should create my own wrapper, to be able to get full value of QuillJS but for now this will get me moving.

Complications

It turns out it was not nearly as easy to get running as I hoped. The documentation from KillerCodeMonkey (KCM) is pretty sparse. I was able to install the module, but actually using it turned out more difficult. They had supplied an example that you can also download. This allowed me to look at how he had setup and got me started.

The very first issue though is that the editor is all over the place without a proper style sheet. KCM writes:

"include theme stylings: bubble.css, snow.css of quilljs in your index.html"

They don’t really mention how. At the QuillJS page I found a link to a stylesheet that I then could link to in the html. I want, however, to have the stylesheet on my server, served with the page. At first I tried to link to the style sheet in the Angular component I had created to hold the Editor.

Each component has meta information with style sheet URLs. Unfortunately, as I had to learn the hard way, stylesheets are limited to the component they are referenced in. So when I use KCMs component in my component the style I define is not transferred to his.

To solve the problem I had to include the downloaded stylesheet in the global style.css file. It’s not a glorious solution, and I bet there is a better one, but for now it will get me moving.

Getting text in and out

When editing a blog post, the text of the blogpost obviously need to be input into the editor. Inspecting the example code from KCM I found out that the editor html element has a property that is bound to a variable in the TypeScript. In this case named textFormat.

The property “format” determines how the editor should interpret the string from the textFormat variable.

We also need to know when the user has edited the text. To that effect the editor supplies an event to subscribe to.

onContentChanged is called whenever the content of the editor is changed. To avoid too many calls to the backend debounceTime() is called. It delays the call until the event has been quiet for 400ms in this case. It supplies the content of the editor as a parameter.

To preserve the format of the content; the font size, headings and so forth, I save the data in html encoding.

communicating with the backend

For now I use the same web-api as used in the Tour of Heroes tutorial. I created a blog.service that will be injected into the text editor class.

The updateBlogPost function creates a http put request passing in the blogpost. The function returns an Observable, since it’s an asynchronous call. Here I learned another hard lesson. When I first called this function it didn’t update the data in the web-api. After an hours of debugging and researching I reread the tutorial and found that i had forgotten to subscribe to the Observable. A function that returns an Observable will only fire if something subscribes to the Observable.

Conclussion

I will end this blog post here and perhaps update it later with details on how I implemented creating new posts and deleting posts. The next feature I will work on for the Angular Blog will be a login system, so only an admin can create, update and delete blog posts.

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.