Introduction to Content Management System

CMS is a software application that allows users to collaborate in the creation, editing and production of digital content that can be either web pages or blog posts.

Considering technically, a content management system is made up of two core parts:

Content Management Application(CMA): It allows to add and manage content on the site. It can be either adding content in pages/posts or uploading the media libraries.

Content Delivery Application(CDA): This is the backend, behind-the-scenes process that takes the content you input in the CMA and makes it visible to your visitors.

Popular Content Management Systems

• WordPress

• Drupal

• Joomla

• Squarespace

• Wix

Headless WordPress

A headless WordPress website is a site that mainly uses WordPress for content management and uses any other technology to build the front-end and display the content to the website visitors.

In contrast to the one system that produces, stores, and manages information, the other system exposes data to end-users through graphical user interfaces (UIs) such as a website or application. When developing a headless WordPress website, developers use a REST API to communicate between the backend and the frontend.

Rest API allows developers to interact with cross-technology interfaces when both speak the same language of JSON. JSON is a text-based representation of JavaScript objects which contains data in key-value pairs.

The Benefits of Using Headless WordPress CMS

In case, you might come across the situation where you need to add a blog feature to an existing web app built with either Angular or React. Thus instead of coding the full-fledged CMS in the native framework, use headless WordPress CMS to manage the content using Rest API.

• Flexibility

• Security

• Multichannel

• Optimized site loading time

Headless WordPress with Angular

Start with setting-up the WordPress site and admin as it's gonna work as backend for our Angular website. Rest API will be enabled by default.

Head over, Settings => Permalinks => Post name or Custom Structure in WordPress Admin.

Since we are working with API calls, we can work with Postman. Inside the Postman, enter the URL in the following format:

https://example.com/wp-json/wp/v2/posts

The only thing that varies is the last slug as per your post-type in WordPress. And of course, your domain!

Introduction to Angular

Angular is a development platform, built on TypeScript. As a platform, Angular includes:

• A component-based framework for building scalable web applications

• A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more

• A suite of developer tools to help you develop, build, test, and update your code

To build Angular apps; NodeJS, Node Package Manager and Angular CLI dependencies must be installed on your computer.

To check whether you have installed Node.js and NPM versions correctly, use the following command lines respectively.

Once the installation of Node Package Manager is completed, you can install Angular CLI with the following steps. Open command prompt in your system and enter the below command.

Here, g stands for Global Installation.

To check whether you have installed Angular CLI versions correctly, use the following command line

Create a New Angular App with the CLI

After setting up the environment, open the command line and run the following code to create the project

"my-project" represents the name of your project.

Once the project is created, run the following command and you will be able to see the angular app project output on http://localhost:4200

To get started with Angular as a Beginner, I will share some of my blogs from Medium which I wrote after attending the Angular conference in 2020 at Delhi.

Reference: "Angular Essentials" by Dhananjay Kumar(Organizer of ng-India)

1. 'Beginner in Angular: Why ‘Angular’ and setting up of environment.'

2. 'Beginner in Angular: Project Files and Components'

3. 'Beginner in Angular: Data Binding'

4. 'Beginner in Angular: Communication within Components @Input() and @Output()'

5. 'Beginner in Angular: Types of Angular Directives'

6. 'Beginner in Angular: View Encapsulation in Angular'

7. 'Beginner in Angular: Pipes in Angular'

8. 'Beginner in Angular: Template-Driven Forms in Angular'

9. 'Beginner in Angular: Reactive Forms in Angular'

Thankyou for reading my blog. Explore more till we meet next time!

#4weeksofshows