Benefits of Angular Javascript Framework
The great thing about the Angular framework is that a lot of the work is done for you, under the hood so to speak. The Angular command line interface (cli) tool is among the best within the JavaScript world. It’s quick and easy to build out components, services and things of that nature, learn more about the Angular cli here
To understand the benefits of the Angular framework I’ll start with the MVC (model view controller), I’ll try and make this simple, it’s the best I can. The MVC is a very useful and popular design pattern and can be one of the hardest to truly understand.
So let’s best understand this by building an example app, I’ll call this My-Blog-App and for this project I’ll be using the WordPress REST API as the backend and Angular to view the app on the frontend. In simple terms all the data will come from the WordPress REST API as a JSON object and then we will using the Angular CLI (version 6.0.8) and some front-end development skills to build the app. Let’s take a look…
Quick Overview of MVC
The model represents the data, and does nothing else. The view displays the data. The controller interprets user actions such as button clicks.
The Model
The JSON object is all the data of our application, which is known as the model and this is what we will be using to display on the screen and we’ll be using HTML to generate this model.
Note: The model does NOT depend on the controller or the view.
The Controller
The controller provides the model data to the view, and interprets user actions such as button clicks. The controller depends on the view and the model. In some cases, the controller and the view are the same object.
Connecting Angular 6 and WordPress API
In this tutorial, you’ll learn how to build an Angular Blog App. We’ll connect Angular to the WordPress API to retrieving the data to view into the front-end framework of Angular.
The Outcome:
- Using Angular 6 front-end framework.
- Work with WordPress as the back-end.
- Creating Single Page App Blog.
- Requests/Endpoints.
- Listing posts.
- Styling (looks pretty).
Prior Knowledge
- Use of Angular & WordPress
- Basic JavaScript/Typescript
- HTML & CSS
Starting Angular 6 Project
We use the Angular CLI to start the new project called My-Blog-App and we add routing.
ng new My-Blog-App --routingNEXT we cd into My-Blog-App and run:
ng serveNow we create 2 component called home and posts
ng g c homeng g c postswe also need to import the HttpClientModule from @angular/core
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 { HomeComponent } from './components/pages/home/home.component';
import { PostsComponent } from './components/https/posts/posts.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
PostsComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
NEXT we create a service called data
ng g s dataFirst in the constructor we add our dependency injection the (HttpClient) and then our custom method called getPosts. Here in the method we call the WordPress API add the URL of your WordPress site.
dataService.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
// Create an Instance - dependency injection
export class DataService{ constructor(private http: HttpClient) { }
// Create custom method get the posts from WordPress
getPosts() {
return this.http.get('https://ewebdesigns.com.au/wp-json/wp/v2/posts');
}
}
This returns JSON an array of objects in key value pairs. We will focus on the title: date: and content: to display in our App
[
{
"id": 165,
"date": "2019-08-29T23:10:14",
"date_gmt": "2019-08-29T23:10:14",
"guid": {
"rendered": "https://ewebdesigns.com.au/?p=165"
},
"modified": "2019-08-29T23:10:16",
"modified_gmt": "2019-08-29T23:10:16",
"slug": "learn-more-about-ewebdesigns-affordable-websites",
"status": "publish",
"type": "post",
"link": "https://ewebdesigns.com.au/learn-more-about-ewebdesigns-affordable-websites/",
"title": {
"rendered": "Learn More About eWebDesigns Affordable Websites"
},
"content": {
"rendered": "\n<h3><strong>What We Do</strong></h3>\n\n\n\n<p>Here at eWebDesigns we work hard to deliver beautiful, modern functional websites for local business and abroad. We are located in Biggera Waters, Queensland and are working together with local businesses.<br> Specialising in business, eCommerce and tradesman websites which include air conditioning, carpenters, cabinetmakers, bricklayers, concreter’s, electricians, motor mechanics, plumbers and more… As well as dentists, doctors and lawyers.</p>\n\n\n\n<h3><strong>Servicing Areas</strong></h3>\n\n\n\n<p>We provide affordable website solutions for small to medium size businesses in the Gold Coast, Queensland areas including, Coomera, Pimpama, Ormeau, Helensvale, Labrador, Runaway Bay, Sanctuary Cove, Southport, Surfers Paradise, Broadbeach, Nerang, Miami, Burleigh Heads, Mudgeeraba and Tallebudgera.<br> Our work includes web design, web development, graphical design, websites for social media and advertising. We provide websites that are linked to your social media accounts for greater exposer and interactions. Social media is a powerful tool and used right is rewarding</p>\n\n\n\n<h3><strong>Ecommerce Websites</strong></h3>\n\n\n\n<p>Ecommerce solutions with payment gateway for online shopping, start selling your products online with our eCommerce designed website. We can develop fully functional custom WordPress websites that come with a secure checkout, integrated with woo commerce payment gateway. Sites are easily customizable for managing, adding products, details, coupons, specials and discounts.</p>\n\n\n\n<h3><strong>Tradie Websites</strong></h3>\n\n\n\n<p>We are working with local tradesman to develop a professional, modern website to showcase off the brand, workmanship, skills and trust. Try our website strategy’s to get your phone ringing with more emails and enquires for your services.</p>\n\n\n\n<p>No business is too small business cards are from the past, current businesses showcase their brand, work and skill through a website. This is great for customers trying to making their final decision.</p>\n\n\n\n<p>Get yourself an affordable website to showcase your brand, work and skills with a tradie website by eWebDesigns.</p>\n\n\n\n<h3><strong>Why Us</strong></h3>\n\n\n\n<p>Websites for small to medium business that are done right her at eWebDesigns, professional design websites for your business or niche.</p>\n\n\n\n<p>eWebDesigns is a great way for new start-up businesses to get online without the big price tag, an affordable website solution for business.</p>\n\n\n\n<p>Get in touch with Allen today to discuss your website for your future.</p>\n",
"protected": false
},
"excerpt": {
"rendered": "<p>What We Do Here at eWebDesigns we work hard to deliver beautiful, modern functional websites for local business and abroad. We are located in Biggera Waters, Queensland and are working together with local businesses. Specialising in business, eCommerce and tradesman websites which include air conditioning, carpenters, cabinetmakers, bricklayers, concreter’s, electricians, motor mechanics, plumbers and more… … <a href=\"https://ewebdesigns.com.au/learn-more-about-ewebdesigns-affordable-websites/\">Continued</a></p>\n",
"protected": false
},
"author": 1,
"featured_media": 0,
"comment_status": "open",
"ping_status": "open",
"sticky": false,
"template": "",
"format": "standard",
"meta": [ ],
"categories": [
1
],Learn how to make custom endpoints below
NEXT retrieving the data we first Pass in the DataService in the constructor, next we ‘ll add a property for holding the return data from the API and last we will subscribe to get and bind the data to our app and console log the result.
posts.component.ts
import { DataService } from './../../../data.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.scss']
})
export class PostsComponent implements OnInit {
// Add a property for holding the return data from API
posts$: Object;
// Passing in the data service
constructor (private data: DataService) { }
// Getting and binding the data
ngOnInit() {
this.data.getPosts().subscribe(
data => this.posts$ = data
);
// check by logging in the console
console.log(this.data.getPosts());
}
}
NEXT displaying the post on the front-end
we add the ngFor directive to loop through our variable called post of our posts$ observable and render the title, content and post date in our Angular app
posts.component.html
<h1>Angular 6 & WordPress API</h1>
<ul>
<li *ngFor="let post of posts$">
<h2>
<div [innerHTML]="post.title.rendered"></div>
</h2><br>
<div [innerHTML]="post.content.rendered"></div>
<p>{{post.date}}</p>
</li>
</ul>
WordPress by default will return the last 10 posts from your website.
Thanks, hope this helps you integrate your Angular app with the WordPress API.
How to use Custom WordPress Restful API Endpoints
A much more cleaner way to return JSON data from WordPress
Help me make more content.