Creating a Portfolio/Blog with Angular/Agility CMS

Pre-Requisites

Step 1 — Create your Blog using Agility CMS

Step 2 — Install the Angular CLI

Step 3 — Create a new Angular Project

Step 4 — Generate our assets

Step 5 — Understanding So Far

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { MainComponent } from './main/main.component';
import { ProjectsComponent } from './projects/projects.component';
import { BlogComponent } from './blog/blog.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
MainComponent,
ProjectsComponent,
BlogComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 6 — Getting the basic layout

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

Step 7 — Configure Our Routes

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BlogComponent } from './blog/blog.component';
import { MainComponent } from './main/main.component';
import { ProjectsComponent } from './projects/projects.component';
const routes: Routes = [
{ path: '', component: MainComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'projects', component: ProjectsComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
<a routerLink="/">Main Page</a>
<a routerLink="/blog">Blog page</a>
<a routerLink="../projects">Project Page</a>

Step 8 — Building out your project’s services

import { Injectable } from '@angular/core';@Injectable({
providedIn: 'root'
})
export class ProjectDataService {
constructor() { } getProjects(){
return [
{
name: "A Project",
image: "An Image",
gitURL: "gitURL",
liveURL: "liveURL"
},
{
name: "A Project",
image: "An Image",
gitURL: "gitURL",
liveURL: "liveURL"
},
{
name: "A Project",
image: "An Image",
gitURL: "gitURL",
liveURL: "liveURL"
},
]
}
}
import { Component, OnInit } from '@angular/core';
import {ProjectDataService} from "../project-data.service"
@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
styleUrls: ['./projects.component.css']
})
export class ProjectsComponent implements OnInit {
projects constructor(projects:ProjectDataService) {
this.projects = projects.getProjects()
}
ngOnInit(): void {
}
}
<div *ngFor="let project of projects">
<h1>{{project.name}}</h1>
<img [src]="project.image">
<p><a [href]="project.gitURL">Git</a></p>
<p><a [href]="project.liveURL">Live</a></p>
</div>

Step 9 — Creating our BlogService

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { MainComponent } from './main/main.component';
import { ProjectsComponent } from './projects/projects.component';
import { BlogComponent } from './blog/blog.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
MainComponent,
ProjectsComponent,
BlogComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http"
@Injectable({
providedIn: 'root'
})
export class BlogDataService {
//make sure to set the guid in the URL, test it works in browser
guid:string = ""
url:string = `https://api.aglty.io/${this.guid}/fetch/en-us/list/myblog`
apikey:string = ""
constructor(private http: HttpClient) { } getBlogs(){
return this.http.get(this.url, {
headers: {
accept: "application/json",
APIKey: this.apikey
}
})
}
}
import { Component, OnInit } from '@angular/core';
import {BlogDataService} from "../blog-data.service"
@Component({
selector: 'app-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
blogs:Array<any> constructor(data: BlogDataService) {
// subscribe to the request data from our service
data.getBlogs().subscribe((blogs:any) => {
//Map the data to a more useable array
this.blogs = blogs.items.map(blog => blog.fields)
console.log(blogs)
})
}
ngOnInit(): void {
}
}
<div *ngFor="let blog of blogs">
<h1>{{blog.title}}</h1>
<p>{{blog.body}}</p>
<h2>{{blog.date | date}}</h2>
</div>

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store