Simple Angular Blog Engine :: Part 1

Yet Another Angular Blog…but wait, it’s also a blog engine, hmmm

I know. I know. There are so many blog engines out there. I just can’t help myself. Even if you are not creating a blog — you might be interested in using a Markdown Editor in your Angular applications.

  • Part I: Angular Module with Markdown Editor Component
  • Part 2: Creating Blog Post
  • Part 3: Display Blog Posts
  • Part 4: Refactor to Shared Angular Library

And still, I want to create yet another one. I already have the back end of the application generated/complete using my code generator/scaffolding tool. This tool creates the Web API, services, business layer with business rules, repository for data access, and Entity Framework data access components. So, really my main effort will be the Angular front end — still a lot of work.

The real motivation is to create an Angular client for the blog using a shared Angular library. I also want to be able to reuse the markdown content as source for some guides and ebooks.

Here are some of my top requirements:

  • Work with the latest version of Angular.
  • Be available from npm.
  • The editor and source of the blog must support markdown. I want to leverage the markdown files for my bookdown projects. See: https://bookdown.org/yihui/bookdown/
  • The content of the blog posts will be stored as bytes with an indicator as to the source type (i.e., markdown, HTML, or text).
  • The application will parse (process) the markdown and create output for the blog display.
  • Work with the Web API microservice; and other microservices to support the blog engine.
  • The blog will be an Angular Module library with: Administrative Features (Services and Components), Domain Service, Components, and Directives

The Markdown Editor

After some initial research I selected https://www.npmjs.com/package/simplemde. It has a nice set of features and configurable options. Later, I’ll refactor the implementation to a custom Angular @NgModule as a shared Angular Library — it will allow consumers of the module to provide the configuration to the markdown editor component using the conventional static method of the module. The npm package already has several options defined as . Therefore, it will be easy to set the editor options at runtime.

Let’s get started.

Package Installation

Retrieve the package from npm.

npm install simplemde -S

You will also need the types later,

npm install -S @types/simplemde@1.11.6

Styles and Script Configuration

Add the following to the file in the section of the node.

"../node_modules/simplemde/dist/simplemde.min.css"

Add the following to the file in the section of the node.

"../node_modules/simplemde/dist/simplemde.min.js"

Create an Application Module

Create a module for the editor.

ng generate module modules\markdownEditor

Add a new component to the editor.

ng generate component modules\markdownEditor\editor

Update the to export the component.

Editor Configuration

The editor has a nice set of defined for the configuration. Our implementation is using an Angular module. This will allow us to setup a static method to pass along the configuration using the defined interface already provided by .

Update Module for Configuration

First thing to do is to create a class that will contain the options using the provided by the editor. We will use this class to pass in the configuration when the module is initialized by the application.

Notice that we need to import the class so that we can reference the interface for implementation. Notice that all of the members of the interface are . Additionally, they are all strongly typed - this is a good thing, right?

To allow the module to accept the configuration when it is initialized, we will create a method using the convention: . Import the options and implement the static method. This will provide or make available the configuration to the module members at runtime. What we want is the component to be able to use the configuration to initialize an editor instance with the configuration.

Reference the MarkdownEditorModule

The application where I’m using this module uses a module to contain references to modules used by my Angular application. Reference the required items in your or whichever makes sense for your application.

import { MarkdownEditorModule } from './../markdown-editor/markdown-editor.module';
import { MarkdownEditorOptions } from './../markdown-editor/markdownEditorOptions';

Update the @NgModule to call the method on the - this allows us to pass in the configuration for the module.

MarkdownEditorModule.forRoot(editorConfig)

We’ll need to create a instance so that we can pass it in. I'm pretty sure that just initializing a new will not work. We'll probably need to create the instance using the same shape as the class. If all goes well, when we use the editor the default content/value will be .

const editorConfig = new MarkdownEditorOptions();
editorConfig.autoDownloadFontAwesome = true;
editorConfig.initialValue = 'Hello Editor...write something amazing.';

Here is the code for the @NgModule that will import and provide the configuration to the MarkdownEditorModule.

Editor Component

It is really amazing that the HTML element with a lot of JavaScript creates the markdown editor.

Here is the code for the . The constructor is looking for a parameter. Since, this is injected using the the of the module during module loading - Angular will use dependency injection and provide the configuration setup in the . The object is verified in the method.

The component uses the to provide the editor component the actual markdown content to display. This allows the editor component to be reused because its only responsibility is to display the content. The EventEmitter provides any changes to the content to the parent component — the parent component will always have the current value of the markdown content.

Using the Markdown Editor Module

Create a component in your Angular application to use the markdown editor component from the .

The template of your component will need the for the editor component. Add the following to your HTML template.

<simplemde body [markdown]="postContent" (markdownChange)="onMarkdownChange($event)"></simplemde>
  • [markdown]: is the @Input to allow the parent component to provide the content using the field.
  • (markdownChange): is the implemented as an to allow the parent to be notified when the value changes. It is handled by the method.

Concluding Part 1

I now have the beginnings of my blog engine. The most important requirement is the support for Markdown. I have a working module with configuration using Angular’s Dependency Injection, a component that takes input and emits markdown content changes to the parent component.

It is good for now. For more information about matt vaughn and the Angularlicious Podcast go to http://angularlicio.us.

I love tacos, code, jazz, my husky and maybe 3 people in this world...and of course: Angular. Angularlicious podcast — more info at www.AngularArchitecture.com