Building Rails 5 application with Angular 5

This article shows the very basic application set up required to host a rails application with Angular 5 framework

Angular - Is a modern javascript framework for building web application in javascript,html and type script(super script of javascript)

Such kind of working will have two separate servers. One server will be hosting rails part and the second server will be hosting the angular part. The HTTP request raised will have a different origin header, than that of the server hosted, and hence the request will fail.
A cross-origin HTTP request (CORS) is used when the request is raised for a resource from a different domain, protocol, or port than the one from which the current document originated.

The first step is to download node packet manager. You can download it here

The next step is to install angular cli. Angular cli is a tool to design, develop, scaffold and maintain angular applications

    $ npm install -g @angular/cli

Create a new angular application in your preferred directory

    $ ng new home-library

This will create the directory home-library, inside which the required files will be present. Start the angular server by running the following commands

    $ cd home-library
    $ ng-serve

You can see in your terminal that the server is running at port 4200. Bring up the chrome and hit http://localhost:4200 and you should be able to see the screen

Setting up the rails side:

The Rails will act only as an API. All the MVC functionalities will be taken care by the angular part.

    $ rails new home-library-app --api

The --api suggests that it is an API only application

Let the rails app add few books

    $ rails generate scaffold book name:string
    $ rails db:migrate

Adding few seeds in the db/seeds.rb file

    Books.create!([
       {name: "Copying and Pasting from Stack Overflow"},
       {name: "Trying Stuff Until it Works" } 
    ])

In the console

    $ rails db:seed

Connecting rails with Angular:

Rails and Angular should communicate with each other. Start the rails server with rails server command. This makes up the rails.

On visiting the link http://localhost:3000/books.json, we should be able to see the books which we seeded.

Remember that I was blabbering something about CORS on the top. Now we need to implement that. In simple terms we need to say to rails server that "Relax buddy, whatever is coming in, there is no harm in it" To do that add the gem in your gem file.

    gem 'rack-cors'

And run

    $ bundle install

A cors.rb file will be generated in config/initializers/ Make the content of the cors.rb as below

    # Be sure to restart your server when you modify this file.  
    # Avoid CORS issues when API is called from the frontend app.
    # Handle Cross-Origin Resource Sharing (CORS) in order to accept
    # cross-origin AJAX requests.
    # Read more: https://github.com/cyu/rack-cors
    Rails.application.config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
 
        resource '*',
          headers: :any,
          expose:  ['access-token', 'expiry', 'token-type', 'uid', 'client'],
          methods: [:get, :post, :put, :patch, :delete, :options, :head]
      end
    end

Making HTTP request from Angular:

Open up the component.ts file present in src/app/ and make it look like this

    import { Component } from '@angular/core';
    import { Http } from '@angular/http';
 
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
     title = 'app works!';
     books;
 
      constructor(private http: Http) {
        http.get('http://localhost:3000/books.json').subscribe(res => this.books = res.json());
      }
    }

The last step is to make the view present in Angular to display the book.
Modify the /src/app/app.component.html as

    <h1>
      {{title}}
    </h1>
 
    <ul>
      <li *ngFor="let book of books">{{ book.name }}</li>
    </ul>

Now the app would appear as

Advantages:

• Angular is a very modern framework providing lot of functionalities.
• Ease of use
• Excellent MVC framework.
• Provides a 2 way data binding
• Implementing AJAX is very straight forward
• Angular is very much fast in performance, since it modifies the DOM rather than adding inner HTML code
• Extended features such as dependency injection, routing, animations, view orchestration, and more.
• No need to use observable functions; Angular analyses the page DOM and builds the bindings based on the Angular-specific
  element attributes. That requires less writing, the code is cleaner, easier to understand and less error prone.