Full Stack Ruby On Rails and Angular | CRUD Application – Full Course | Rails 7 | Angular 15

Ruby on Rails (or simply Rails) is a server-side web application framework written in Ruby. It is designed to make web development easier by providing conventions for solving common problems, while Angular is a popular JavaScript framework for building web applications.

In this full course, we will learn how to build a full stack CRUD (Create, Read, Update, Delete) application using Ruby on Rails 7 and Angular 15.

What is a CRUD application?

CRUD stands for Create, Read, Update, Delete. It is a common set of operations that are typically performed on data stored in a database. A CRUD application allows users to create new data, read existing data, update existing data, and delete data.

Getting Started

To build this full stack CRUD application, we will need to have Ruby on Rails and Angular installed on our local machine.

First, let’s install Ruby on Rails. Open your terminal and run the following command:

gem install rails

Next, let’s install Angular. Run the following command in your terminal:

npm install -g @angular/cli

Setting up the Rails API

Now that we have Ruby on Rails and Angular installed, let’s start by setting up the Rails API.

Create a new Rails API application using the following command:

rails new myapp --api

This command will create a new Rails application with the –api flag, which creates a more lightweight application suitable for building an API.

Change into the newly created Rails application directory:

cd myapp

We will need to generate a scaffold for our CRUD application. Run the following command:

rails generate scaffold Post title:string body:text

This will generate a Post model with a title and body attribute, as well as a corresponding controller, views, and migrations.

Next, run the database migrations:

rails db:migrate

Now, start the Rails server:

rails server

You should see your Rails API running on http://localhost:3000.

Setting up the Angular Frontend

Now that we have our Rails API set up, let’s move on to setting up the Angular frontend.

Open a new terminal window and navigate to the directory where you want to create the Angular project.

Create a new Angular project using the Angular CLI:

ng new myapp-frontend

Change into the newly created Angular project directory:

cd myapp-frontend

We will need to make some modifications to the Angular project to connect it to our Rails API.

Open the src/environments/environment.ts file and update the apiUrl property to point to your Rails API:

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

Next, let’s generate a service to interact with our Rails API:

ng generate service post

This will generate a PostService that we can use to make HTTP requests to our Rails API.

Now, let’s create a component to display our post data:

ng generate component post-list

This will generate a PostListComponent which we can use to display a list of posts.

Finally, let’s update the App component template to include our PostListComponent:

<app-post-list></app-post-list>

Testing the Application

Now that we have our Rails API and Angular frontend set up, let’s test our application.

Start your Rails server (if it’s not already running):

rails server

In a separate terminal window, navigate to your Angular project directory:

cd myapp-frontend

Start the Angular development server:

ng serve

You should now see your application running on http://localhost:4200. You can create, read, update, and delete posts using the interface provided by Angular.

Conclusion

In this article, we learned how to build a full stack CRUD application using Ruby on Rails 7 and Angular 15. We set up a Rails API to handle the backend logic and an Angular frontend to provide the user interface. By following this tutorial, you should now have a solid foundation to build your own full stack web applications using these technologies.