• This is a second part in building Angular theme for Blogifier tutorial. First part here.
  • Source code for this tutorial available in this Github repository.

Running in VS Code

In this part we'll get to coding, so VS Code or other editor with Angular support highly recommended. I'll use VS Code here. Install if not already and open folder from the first tutorial, C:\demo\myapp. In the terminal, run ng serve to make sure it builds and runs application with no errors. You should see something similar to below.

data/rtur/2019/8/ang-tut2-cmd-serve.png

Generating Components

Basic blog has list of posts and individual post, so at minimum we need two components in the app. Generating them in Angular simple, quit running process in terminal with ctrl + c and run two commands to generate components.

ng g c home
ng g c posts

Setting up Routing

To generate routing module, run this in the terminal

ng generate module app-routing --module app --flat

Here is what completed code in generated module looks like

data/rtur/2019/8/ang-tut2-routing.png

To get it all working, replace markup in the app.component.html with this

<div>header</div>
<router-outlet></router-outlet>
<div>footer</div>

router-outlet is where component page, home or post, will be displayed in the browser. So if now we navigate to application page, we should see this (with home works! coming from generated home.component.html page)

data/rtur/2019/8/ang-tut2-page-init.png

Using HTML Template

With routing working, lets make it look better. No need to start designing from scratch, Clean Blog template from Bootstrap will do fine, just as any other HTML template you can find for free or buy for a reasonable price. Steps should be very similar.

The Clean Blog comes with this folder structure. Copy all folders except mail and scss to C:\demo\myapp\src\assets. Other files we will be interested in are index.html and post.html. No need to copy files themselves, we'll just copy some markup from there.

data/rtur/2019/8/ang-tut2-files.png

Now its just a matter of bringing markup from HTML templates into Angular pages. Here what it looks like after copying from index.html into application. Please not <base href="/"> line in the index page, it is important and responsible for relative paths working properly.

And visiting application in the browser will show this

data/rtur/2019/8/ang-tut2-page-head-foot.png

Much better now. Same process applied to the post.html page from Bootstrap template, with markup, except top navigation and page footer, moving to post.component.html. By now, we have all static markup migrated to application. In the next tutorial, it all will be replaced with dynamic content pulled from actual Blogifier application via API.