CSC/ECE 517 Spring 2015 E1526

E1526. Responsive web design for Expertiza

Strategy

We analyzed the three Expertiza pages that we need to modify for this project, as well as all of their dependencies, and tried to identify all the tasks that we need to complete for this project. It became clear to us that a large majority of this project will be based on AngularJS, while the small fraction will be related to Bootstrap. Therefore, our strategy was to jumpstart this project by having all 4 team members work together on adding AngularJS to the Login page. Once the Login page was completed, we split in two groups. One group worked on implementing AngularJS on Manage-course page, while the other group worked on introducing AngularJS to Manage-User page. The reasoning behind this strategy was that all of us working together on the Login page first allowed us to obtain some basic understanding of AngularJS and feel more comfortable using this impressively useful and powerful framework. We completed AngularJS constituents first by connecting some of the Rails controllers to AngularJS controllers and then, as a final step, we add Bootstrap. Our decision was based on the fact that Bootstrap does not require much work to be completed and it can be considered to be a pretty straight-forward element of the project.

Implementation

Below are detailed explanations of essential constituents of this project.

AngularJS Implementation

1. Retrieving data from database Because it is not appropriate to let AngularJS to directly fetch data from the MySQL database, the only way we can load data is through rails controller. For example, we can do a http get/post request(GET /users/fetch_10_users) from AngularJS controller using $http injection or jQuery AJAX, which calls a new method ‘def fetch_10_users’ in the users_controller, which execute some database query via accessing methods in the user model, and returns json formatted data to the AngularJS controller. After getting the returning data, the AngularJS controller can present the data to the screen.

2. Build custom directives Instead of using the original Rails page, I think it would be better to replace some forms and components using AngularJS directives, which enable us to do some live modifications to the pages without loading.

Database

Now the problem is how to fetch parts of database records which meets the query conditions, now what comes in our mind is using SQL statements like “SELECT FROM { SELECT * FROM STUDENTS WHERE id BETWEEN 1 TO 100} WHERE STUDENT.DEPARTMENT = ‘CSC’”. Then we store the result into a hash, and presenting only maybe 10 of the qualified records to the screen. Once the hash is used up, another query to id 100-200 will be executed and fetch something more. Therefore the loading time could be greatly reduced, so that the time needed for representing the page is also reduced.

Integration of Rails and AngularJS

Guidelines:

a. ADD gem ‘bower-rails’ AND gem ‘angular-rails-templates’ and REMOVE ‘gem turbolinks’ from the Gemfile, THEN execute bundle install

b. ADD asset ‘angular’ , asset ‘bootstrap-sass-official’, asset ‘angular-route’ AND asset ‘angular-boostrap’(for ui.bootstrap injection) TO A NEWLY CREATED Bowerfile, THEN rake bower:install. Bower installs dependencies in vender/assets/bower_components.

c. ADD

 config.assets.paths << Rails.root.join("vendor","assets","bower_components")
 
config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","fonts")

config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff|woff2)$) 
to the config/application.rb

d. REMOVE //= require turbolinks AND ADD

//= require angular/angular
//= require angular-route/angular-route
//= require angular-rails-templates
//= require angular-bootstrap 

to assets/javascripts/application.js, Then rename assets/stylesheets/application.css to assets/stylesheets/application.css.scss. ADD

@import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets"; and
@import "bootstrap-sass-official/assets/stylesheets/bootstrap"; 

to application.css.scss

Now because we are not building a new website using AngularJS from the beginning. It is better to remain the routing system of Rails rather than taking charge of routing system in AngularJS.

So, we add a new tag

into the app/views/layout/application.html.erb to include all pages into the scope of our AngularJS app, naming ‘MPApp’ in this case.

Then, for the home page: app/views/content_pages/view.html.erb. We add a tag to make this page controlled by ‘testCtrl’, which is defined in app.coffee.