Sep 23, 2017 - Content Overview [hide]. 1 Laravel 5.5 Angular 4 Tutorial; 2 Step 1: Setup an Angular 4 Environment. 3 Step 2: Create one form to enter the data. 4 Step 3: Handle the input data. 5 Step 4: Send the data to the Laravel server. 6 Step 5:
Happiness doesn't result from what we get, but from what we give. Ben Carson
Idea Transcript
Get Started with Angular 4 and Rails 5 This guide will walk you through creating just about the simplest Angular + Rails application possible. We’re going to create an Angular app, then create a Rails app, then get the two to talk to each other. It should only take a few minutes. Here are the steps:
Get set up Get an Angular app initialized and running Initialize a Rails app Prepare some data Create a resource in the Rails app Add some data to the Rails app Connect Angular with Rails Run the Rails server Enable CORS so the Angular app can talk to the Rails app Get Angular to talk to Rails Show the data from Rails inside the Angular app
Get set up Get an Angular app initialized and running The app we’re going to create is a pretend app called Home Library that exists for the purpose of organizing one’s private book collection. We’ll be using the Angular CLI (command-line interface) to create the Angular app. Before we can do anything else, we need to install Angular CLI. (If you don’t have NPM installed, you need to install that before installing Angular CLI.)
The Angular app and the Rails app will sit side-by-side in a directory. We’ll call this getting_started although you could call it anything you’d like.
This is the command to initialize the Angular app:
Once this command finishes, cd into home-library and run ng serve.
You should be able to visit http://localhost:4200 and see a screen that looks like this:
Initialize a Rails app Now, in a separate terminal, create the Rails app and then create its database. (The –api flag means this will be an API-only Rails app.)
Prepare some data Create a resource in the Rails app Since our “Home Library” app is oriented around books, let’s create a resource called Book.
Add some data to the Rails app Let’s put a couple books in a seed file so we have some data to work with.
Connect Angular with Rails Run the Rails server In order for Angular to talk to Rails, the Rails server of course has to be running. Let’s start the Rails server.
You should see the good old “Yay! You’re on Rails” screen.
And if you visit http://localhost:3000/books.json, you should see the list of books we just created.
Enable CORS so the Angular app can talk to the Rails app There is a small amount of plumbing work involved to get our Angular and Rails app working. We need to enable CORS (cross-origin resource sharing). Don’t worry if you’re not familiar with that term. In plain English, we have to tell Rails that it’s okay to let outside apps talk to it. The first step is to uncomment rack-cors in the Gemfile.
Then make config/initializers/cors.rb look like this:
And remember to restart the Rails server after you do that.
Get Angular to talk to Rails We’re almost done. One of the last steps is to add an HTTP request from the Angular app to the Rails app. Modify src/app/app.component.ts to look like this:
This will handle getting the data from the Rails server. Now we need to show it on the page.
Show the data from Rails inside the Angular app Modify src/app/app.component.html to look like this:
Now, if you refresh the page at http://localhost:4200, you should see our two books on the page:
Congratulations. You’re now in possession of an Angular app that talks to a Rails app. Did you find this tutorial useful? You can get a more comprehensive guide to building an Angular/Rails app with my book, Angular for Rails Developers.
This entry was posted in Programming and tagged Angular, Ruby on Rails on January 11, 2018 [https://www.codewithjason.com/getting-started-with-angular-and-rails/] by sfcoding.