Authenticated User Flow - danmee10/rhyme-ninja GitHub Wiki
Now that authorization is set up, I think it makes sense to build something that actually lets users do something with their accounts. I designed the User#show page so that they can view and add Authorizations. I also added a (currently blank) profile section. While these could definitely use some beefing up, I think I’ll get started on the heart of the application, 'the ninja’.
My first go at this was only a few months after writing my first line of code, and it was essentially just a lot of unorganized jQuery. Since that time I’ve done a considerable amount of work with AngularJS, and I think that could make the app a lot cleaner.
At this time I already have the rough structure for my front-end Angular app set up, and Users have the ability to create, edit and view rhymes. I think that whole bit warrants an explanation, so I’ll dig into that before going through the next steps.
Dependencies
To get started I added the 3 gems that I knew I’d need:
I installed that third one through rails-assets, which makes components with bower files accessible through a gem file. There are other ways of doing this, going through bower directly for example, but I’ve used rails-assets in the past and can’t think of a good enough reason not to for this project.
File Structure
The next thing I did was create the core Angular module and declare its dependencies. I should mention here that I’m trying something new by nesting all of my Angular code in a sub-directory of javascripts to keep everything together. Within this directory there will be subdirectories organized by feature, not by the type of files it contains (an idea I got from reading a post from Mark Meyer).
Routing
Once I had access to the core module, I got into routing. I’m trying something new here as well…ui-router has some advantages over the $route service in that it allows for the nesting of views. I honestly didn’t have a solid reason for choosing this over $route, since I didn’t have any specific need for nesting views, but it sounded cool…and since this is just a personal project, I thought I’d check it out. To start out though, all I need is a simple single-level route structure with 3 views.
- initial create page
- edit page
- view page
Basic App
The initial create page will be a form with fields for a title and rhyme body. The edit page will be the heart of the application. This page will expose all the tools that will allow a User to transform their initial text into a rhyme. For the moment, however, it will just display the initial text on the left of the page, and form on the right with the rhymed text (initially the same as the initial text) and allow them to change it manually. Clicking save on this form will make an ajax request to the rhymes controller, updating the rhyme. The view page simply displays a list of the titles of all their rhymes.
Gotchas
Because authentication is handled server-side, I couldn’t simply replace the yield call in my layout with <ui-view>. Instead, I created an AngularController.rb file, and a front_end action and set that as the root of my application in the routes.rb file. Another little issue with having all this outside of rails is persisting the session through page reloads. My first thought was to make Angular services for both the session and the rhyme. This allowed the user_id, authorization_token, and rhyme to be shared between the create page controller and the edit page controller, but did nothing about the page reloads. The solution that I landed on was to simply declare those variables directly on the angular#front_end view. This way every angular page will have access to the current_user and the authorization_token. I left the rhyme service as sort of a caching mechanism, so that an additional request wouldn’t be necessary when moving from the create page to the edit page if there hadn’t been a reload.