Using AngularJS in Ruby on Rails app - ruby-on-rails

I have a existing project in Ruby on Rails.
What is the best way to use AngularJS in Ruby on Rails app?
I want to use AngularJs for only specified modules, not for create SPA. This is good way?

What I have seen colleagues do in order to achieve this sort of integration with an existing rails app is:
Include angular.js and relevant dependencies in the specific app pages that are to be 'angularized'
Interpolate whatever data is needed to bootstrap the angular controller into the html template which contains the angular app. This might include data about the resource being operated on. I've seen this done by rendering a RABL template inside of a haml/erb template.
Using that interpolated data, call whatever API methods you need to get additional data on the fly. This is usually just a matter of implementing json handlers for routes you've already created.
I can't say whether this is best practice, but its an easy way to get started fast.
Best of luck, angular is a very enjoyable tool to work with once you get used to it.

Related

Combine Ruby on Rails and AngularJS

Maybe this is a dumb question or even a common asked question (or just a lousy searcher). I want to start a new web application project using Ruby on Rails. On the other hand, I really like Angular JS with Angular Material for the form design. The have everything already implemented like an autocomplete, different types of buttons, etc.
Now the question is, how to combine those two? I want to use Ruby on Rails's routing, controller, models, resource etc. but Angular Material more for the Frontend Design and catch user's actions in events.
You could place all of the AngularJS files in /app/assets.
Another good way is to create a repos with only the front-end part.

What would be the best way to use AngularJS with Ruby on Rails?

I'm about to start a new project and I am unsure if using AngularJS for my front end would be a good idea not. I've read about people saying this isn't the smartest way of doing a project. And even if I did, Is there a way to get AngularJS to interact with the controllers? This question may be redundant but I am actually curious of how to effectively do this without it being a waste of time.
I've never completely done it, but I believe the way to go is to build a Rails api and then have a separate Angular project use said api. The api could also be used to build a mobile app. I think the Angular project would still need to be served from a Node.js server in production, but I don't think that would be a big deal.
This is what I used to learn how to build a Rails api: http://apionrails.icalialabs.com/book/chapter_one
You can do it within an existing project and share the models from it.
There are several different approaches to accomplish that. I tried about 5 different guides out there, the best I found (and I finally sticked to) was https://thinkster.io/angular-rails - This guide should help you build a basic CRUD app with angular connected to rails.
You use Rails as an JSON RESTful API which responds to Ajax-Requests (Get, Post, Put, Delete). Angular will handle the frontend stuff - sending those Ajax requests to the routes/methods defined in your rails controllers. So yes, of course your AngularJS app can interact with your rails controllers.
This also helped me to understand the setup in the beginning: Instead of the Rails View, you will be using AngularJS as your view:
I really love using angular with rails, because setting up the JSON responses (especially with Active Model Serializer Gem) is very easy and quickly done. i deffinitely can recommend it, and I have not encountered any unsolvable problems - so far.
Just go trough this guide I linked and you will see if this setup fits your needs.
The short answer is that your Rails application will have to present some kind of a public API for your AngularJS application to consume. Angular (and it's brethren, like React and Ember) runs client-side, on the browser, and it needs "something" to make AJAX calls against. That "something", i.e. your backend, can be Firebase, Parse, AWS Lambdas, Rails API, etc. Since you already have a Rails application, it probably makes the most sense to add some RESTful API endpoints that use the existing models (and possibly controllers) to consume/produce JSON payloads from/for the client.

What is the difference between a regular Rails app and a Rails API?

In the process of learning Rails, I read about how we could combine it with some front-end MV* JavaScript frameworks — such as Backbone.js, Angular.js, or Ember.js — to improve the UX.
This introduced (to me) the concept of using Rails as an API, instead of a web app.
So, now, I am pretty confused: what is the difference between a regular Rails app and a Rails API?
According to the official rails website, there are three main differences between a rails web application and a rails api:
1 - The api app is configured to start with a more limited set of middlewares than normal. Specifically, it will not include any middleware primarily useful for browser applications (like cookies support) by default
2 - In the api app, ApplicationController inherits from ActionController::API instead of ActionController::Base. As with middlewares, this will leave out any Action Controller modules that provide functionalities primarily used by browser applications.
3 - The api app is configures the generators to skip generating views, helpers and assets when you generate a new resource.
You can always convert your rails app from either one of these to the other one. To do so, follow the steps in the reference I mentioned above.
A regular Rails app will use the rails views (erb or haml) to render pages directly. That is to say, it will process the data AND render this data in views, answering directly the client request with a HTML page.
A Rails API will just process your action, and assume someone else is doing the job of rendering the view for the client. Therefore, a Rails API is expected to return data in an appropriate format, like JSON, XML, or just a JS piece of code to execute. It is then the job of frontend frameworks like AngularJS to receive, parse, and do something with the data (like update some HTML, etc.)
In a nutshell,
Classic Rails application are all-in-one applications, where the processing and rendering are both handled by Rails. The apps may lack or responsiveness however, as full pages are rendered, but it's usually much faster to code this way.
Rails API are just serving intermediate results. It will focus on just delivering the data. This can be better if you have strong requirements for the design/responsiveness, as you are more flexible with the frontend libraries you can use. Usually only the data is transferred, so in addition it can be faster. There are some problems with APIs. For example with one-page apps + full AJAX, it may be harder to set up a forward/back behavior on the user browser. Also, using APIs will require more work, but if you have many devs, you can agree on the interfaces, and parallelize the work server/frontend.
Now, it's not a black or white answer I'm giving. You can totally have a Rails app mainly built as a Web app, but with some API actions that give more responsiveness to some pages. An exemple of this, is to have an autocomplete form, that is pulling the data via AJAX calls.
I found a pretty clear answer in Yoni Weisbrod's Rails API Mini Guide:
The fundamental difference between an API and a regular Rails app is
that an API returns data for further processing, rather than data that
is meant to be viewed directly. Therefore, rather than producing an
HTML document (with CSS and/or Javascript) that looks pretty, APIs
produce simple information structures that can be further processed by
whatever will be consuming our API.

Best practice for multi-page application using Rails and Angular?

There are tons of tutorials out there for creating single page applications using Rails and Angular. They usually pass all the routing to Angular and leave Rails for the activerecord stuff. I find this frustrating because there are times when I just want a plain HTML page with minimal client side bells and whistles.
What is the best practice for a multi-page application, where I can use both Rails routes and Angular UI-router?
I would use the Angular router so all of your routes are in one place. The best part about angular is you can add as much or as little as you want. So you can have static pages handled by the angular router.

AngularJS & Rails - Seperated apps/deployments or one app?

Most of the resources/example about rails and angular on the internet just put them together. AngularJS goes inside of rails under app/assets. This feels reeeaaaly dirty to me. Is it a good idea? What if we decide at some time we won't be using rails and we move to, I don't know, sinatra? How hard would it be to port?
What would be pros/cons of everthing in a single rails app and what would be pros/cons for two seperated apps?
Thank you!
Even when placing Angular (or any other client-side MV* framework) inside your Rails app, you are pretty much keeping the separation of concerns intact. That is, you have a Rails API serving JSON (or similar) data, and a separate Javascript framework using that data to render appropriate views. If you ever wanted to use a different server-side API, you can do so, and still utilize your entire Javascript directory as is.
Placing the client side framework in Rails is simply a matter of convenience. It comes with an organized directory structure and the ability to serve your HTML, which is essentially all you're using it for when it comes to your views. But again, these views aren't really tied to Rails, as they're just HTML and Javascript, so you can easily move them to a different platform when necessary.

Resources