Setting Up an Angular SPA on Rails with Devise and Bootstrap

This guide provides a streamlined approach to building an Angular single-page application (SPA) integrated with a Rails backend using Devise for authentication and Bootstrap for styling. It's designed for developers with foundational knowledge of these technologies.

Key Features & Benefits:

• Secure Authentication: Leverages the devise gem for robust user authentication, simplifying signup and login processes.
• Responsive Design: Integrates Bootstrap for a visually appealing and user-friendly interface adaptable to various devices.
• Seamless User Experience: Employs Angular's dynamic content loading, eliminating traditional page reloads for a smoother, app-like experience.
• Efficient Development: Provides a clear, step-by-step process for setting up the application from scratch.
• Client-Side Routing: Uses Angular routing for managing state transitions, ensuring smooth navigation between different application views.

Getting Started: Setting Up the Rails Backend

1. Project Initialization: Create a new Rails application using the command rails new YOUR-APP.
2. Gem Management: Modify the Gemfile to include the necessary gems: bower-rails, devise, angular-rails-templates, active_model_serializers, and bootstrap-sass. Remove turbolinks.
3. Gem Installation: Run bundle install to install the updated gems.
4. Database Setup: Create the database using rake db:create.
5. Bower Initialization: Initialize Bower using rails g bower_rails:initialize json.
6. Devise Installation: Install Devise with rails g devise:install and rails g devise User.
7. User Migration: Add a username field to the users table using rails g migration AddUsernametoUsers username:string:uniq and rake db:migrate.
8. Bower Dependencies: Add Angular, Angular UI Router, and Angular Devise to bower.json. Run rake bower:install to install them.
9. Serializer Generation: Generate a user serializer using rails g serializer user. Modify app/serializers/user_serializer.rb to include the username attribute.
10. Controller Configuration: In config/application.rb, add config.to_prepare do; DeviseController.respond_to :html, :json; end to allow Devise to respond to JSON requests.
11. Routes Configuration: Add root 'application#index' to config/routes.rb and modify app/controllers/application_controller.rb and app/controllers/users_controller.rb as detailed in the original guide.
12. Asset Pipeline Configuration: Update app/assets/javascripts/application.js and app/assets/stylesheets/application.scss to include the necessary JavaScript and CSS files.

Building the Angular Frontend

The frontend structure will include controllers, views, and routing configuration. The detailed code for app.js, routes.js, controllers (AuthCtrl, HomeCtrl, NavCtrl), views (home.html, login.html, register.html, nav.html), and a NavDirective is provided in the original article. Key aspects include:

• Angular Module Definition: Define the Angular module and its dependencies.
• Routing Configuration: Define routes using $stateProvider and $urlRouterProvider in routes.js.
• Controller Logic: Implement controller logic for handling user authentication, data display, and navigation.
• View Templates: Create HTML templates for different views.
• Directive Creation: Create a custom directive for the navigation bar.

Integrating Devise and Bootstrap

The guide details how to use the Auth service provided by angular-devise to interact with the Devise authentication system. Bootstrap's CSS classes are used for styling the application.

(This article was originally published at jessenovotny.com.)

The complete code examples and detailed instructions are available in the original article. This summary provides a high-level overview of the process. Remember to consult the original article for the complete code and detailed explanations.

The above is the detailed content of Setting Up an Angular SPA on Rails with Devise and Bootstrap. For more information, please follow other related articles on the PHP Chinese website!