Build A TodoList Fast with Ruby on Rails and Ionic / Angular

Install the latest version of ruby with the dev kit on Windows 11, with steps for Windows 10 and 7, and verify the ruby version in the command prompt.

Verify Ruby installation and version 2.7, install Rails, and create a new Rails API todo list project with PostgreSQL. Run the development server and open it in Visual Studio Code.

Create rails models by generating a todo model with a string title and a boolean completed, run migrations, and verify database schemas before starting the rails server.

Learn to create a Rails controller for a todo app using Rails generate, wire up resourceful routes, and enable CRUD actions (post, patch, put, delete) for individual todos.

Create a Rails todo API by using a before_action set_todo and strong parameters for id, title, and completed, returning JSON results for create, update, and destroy.

Implement a Rails show action that renders a todo as json, reuse a set todo so show, update, and delete can access it by id.

Update a todo's completion status in a Rails API, render the updated todo as JSON, and verify changes by restarting the server.

Delete a todo by calling the destroy method on the todo in the Rails API, since it's already set. Restart the server and verify the list shows 1, 2, 4.

Install the ionic CLI with npm install -g ionic, then start an angular project using ionic start. Explore the structure and run ionic serve to view a to-do list.

Install capacitor HTTP to enable http requests in your Ionic app, then run Ionic build to generate www folder and use get, post, put, delete with url, headers, and data.

Create an Angular HTTP todo service by defining an injectable service, creating a todo interface, setting a base REST URL, and outlining future CRUD methods (create, read, update, delete).

Create and update to-do items by sending HTTP requests, returning a promise of the HTTP response, and configuring the URL, data, and headers for a Rails and Ionic/Angular TodoList app.

Implement http get methods to find todos, including find one and find all, returning promises and integrating with existing create and update services.

Build a delete todo request by passing the ID, handle a promise, and return an HTTP response, using the same options, as the course progresses toward the UI.

Explore the home component structure, including modules, forms, and the home router, and replace the messages service with the service for getting tattoos while scaffolding the to-do feature.

Create a todo form UI inside the home component using Ionic Angular, with reactive forms, form builder, a form group, grids, and an iron button to submit todos.

Learn to submit a todo form with angular form controls for title and completed, validate and mark dirty, call a service to create and fetch todos, and test reset.

Create a todo component and load todos on initial page load via the todo service, updating on refresh and stopping the spinner.

Create a to-do component in Angular, reusing existing cases and implementing padding, margins, a toggle, a button, and a completed class with line-through; define module imports and declarations.

Implement todolist inputs by adding update and delete methods, toggle completed immutably, and sync with the service via find all; pass these functions to the to-do component.

Finish todo list shows how to build an Ionic todo item within a list, including a dynamic label for completed and uncompleted states, a toggle, and update and delete actions.

Watch a bonus video about the todo list build with Ruby on Rails and Ionic/Angular, plus a 30% forever discount. Get monthly updates, weekly notices, and forum access.