Part 2: Building a Single Page Application (SPA) with Angular and Rails

This 6-part blog series takes you through building a single-page application (SPA) using Angular for the frontend and Ruby on Rails for the backend. By the end of this series, you’ll have a fully functional SPA and understand the integration of these two frameworks.

Part 2: Setting Up the Angular Frontend

Now, we’ll create the Angular frontend and prepare it to consume the Rails API.

Step 1: Install Angular CLI and Create a New Project

1. Ensure Node.js and npm are installed:

node -v
npm -v

2. Install the Angular CLI:

npm install -g @angular/cli

3. Create a new Angular project:

ng new blog_frontend --routing
cd blog_frontend

Step 2: Install Dependencies

For UI styling, we’ll use Angular Material:

ng add @angular/material

#Choose a theme during installation (e.g., Indigo/Pink).

Step 3: Configure the Angular Environment

Update the src/environments/environment.ts file with the Rails API URL:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

Step 4: Set Up Routing

Modify app-routing.module.ts to define basic routes for your application.

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'articles', component: ArticlesComponent }
];

Generate the required components:

ng generate component Home
ng generate component Articles

To be continued in the part 3.