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
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.
Deep Learning with Python by François Chollet(11823)
Hello! Python by Anthony Briggs(9351)
OCA Java SE 8 Programmer I Certification Guide by Mala Gupta(9322)
The Mikado Method by Ola Ellnestam Daniel Brolund(9288)
Dependency Injection in .NET by Mark Seemann(8836)
Algorithms of the Intelligent Web by Haralambos Marmanis;Dmitry Babenko(7836)
Grails in Action by Glen Smith Peter Ledbrook(7286)
Test-Driven iOS Development with Swift 4 by Dominik Hauser(7265)
The Well-Grounded Java Developer by Benjamin J. Evans Martijn Verburg(7097)
Secrets of the JavaScript Ninja by John Resig Bear Bibeault(5933)
Kotlin in Action by Dmitry Jemerov(4617)
Practical Vim (for Kathryn Amaral) by Drew Neil(3718)
Cracking the GRE Premium Edition with 6 Practice Tests, 2015 (Graduate School Test Preparation) by Princeton Review(3582)
Linux Device Driver Development Cookbook by Rodolfo Giometti(3335)
Learn Windows PowerShell in a Month of Lunches by Don Jones(3224)
Learning Java by Patrick Niemeyer & Daniel Leuck(2861)
Learning React: Functional Web Development with React and Redux by Banks Alex & Porcello Eve(2822)
Mastering Java 9 by Dr. Edward Lavieri(2565)
Learning Concurrency in Python by Elliot Forbes(2540)