Rails - Include different assets for mobile and desktop for an AngularJS app?

Question

How can I include a different set of assets (CSS and JavaScript) for AngularJS views designed for phones and AngularJS views designed for desktop from a Rails API? The default template (application.html.erb or index.html) would typically only be loaded once, with the initial request, because it's an AngularJS application, so I do not think the usual desktop vs. mobile solutions for Rails apps will work.

Specifically, I am trying to combine a desktop app that uses AngularJS, Bootstrap, and jQuery with a mobile app that uses AngularJS and Ionic. The two apps will mostly have shared code, except for the views. The views will be very different, so a responsive approach will not be enough. I have not been able to find much guidance on this at all. Any help will be greatly appreciated.

Answer 1

Rails 4.1 offers variants so that you can have different view templates depending on the display type. Here's a more thorough example. It's really recent so there's not a lot out there about them yet.

If you're not on 4.1, you can look at using the Mobylette gem to achieve the same thing. You can then also have a completely different application.mobile.erb that includes different assets.

For flipping between which assets you're including, you can also take a look at this (the helper method part), but this won't address the issue with different sets of views across the board:

Mobile style switching in Rails 3, helper method vs media queries