Rails, Angular, Postgres, and Bootstrap by David B. Copeland

Rails, Angular, Postgres, and Bootstrap by David B. Copeland

Author:David B. Copeland
Language: eng
Format: epub
Tags: Pragmatic Bookshelf
Publisher: Pragmatic Bookshelf


Configure Rails to Work with Angular’s Router

Angular makes no prescription about what the server side should look like—that lack of direction is one of the main reasons for writing this book. The problem with being server-agnostic is we now have to make some complex decisions about how Rails’s routing and Angular’s routing will interact. We can solve this problem by judiciously choosing what our base URL should be.

Suppose we choose the fairly obvious base URL of /customers. That’s the URL we’re using now to have Rails render the Angular app’s initial view. This means that, in our current configuration, if the user navigates to /customers/42, we’d expect that to render the CustomerDetailsComponent. Later in this chapter, we’ll add the show method to CustomersController so that our Angular app can fetch a single customer’s information. The idiomatic Rails configuration for that endpoint would be the URL /customers/:id, which clashes with our Angular configuration assuming the base URL is /customers.

It’s possible to make that URL work for both our Ajax requests and for our Angular app, but it’s pretty darn confusing. In Angular 1, the part of the path owned by Angular came after an anchor in the URL, so our Angular app’s detail view would be available via /customers#/42, which has a Rails route of /customers. New versions of Angular don’t do this by default, so we need a convention where it’s obvious what part of the URL is handled by Rails and what part is handled by Angular. In a sense, we need to re-create the delimiter that the octothorpe provided in Angular 1.

This is confusing. It has confused every developer I work with, and has confused many readers of the first edition. In an effort to make what’s going on as explicit as possible, let’s decide that our base URL is going to be /customers/ng. That means that /customers/ng will show our existing customer search feature, and /customers/ng/42 will show the new CustomerDetailsComponent. It’s slightly icky, but it has the virtue of being more explicit.

To make this happen, you’ll need to implement the ng method in CustomersController, modify index to redirect to it, and modify our application layout to set the base URL.

Let’s change config/routes.rb to account for this new setup. Note that you need two routes to make this work: one for just /customers/ng and a second that globs the remaining route. This is so any URL that starts with /customers/ng/ will be handled by our new ng method, which makes all of the URLs our Angular app will create bookmarkable.

8_angular-routes/20-angular-router/shine/config/routes.rb

​ Rails.application.routes.draw ​do​

​ devise_for ​:users​

​ root ​to: ​​"dashboard#index"​

» ​# These supercede other /customers routes, so must​

» ​# come before resource :customers​

» get ​"customers/ng"​, ​to: ​​"customers#ng"​

» get ​"customers/ng/*angular_route"​, ​to: ​​"customers#ng"​

​ resources ​:customers​, ​only: ​[ ​:index​ ]

​ ​end​

If you haven’t seen route-globbing in Rails before, the string after the asterisk can be anything, and is used to populate params in our controller. In this case, we could access params[:angular_route] to get the Angular-owned part of the route server-side. We won’t need this, but using a descriptive name makes it clear to other developers what’s going on.



Download



Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.