Front End - kristinedomingo/cs373-idb GitHub Wiki

We chose to forgo Flask's routing system for the AngularJS Client-Side routing system. We did this because AngularJS provided more flexibility and utility, but most importantly it allowed us to better utilize the MVVM architecture that AngularJS supplies.

AngularJS's routing system appends a /#/ symbol to the url and that hash is the root of the routing system. All routes derive from this base. Below is an example configuration of routing with angular.

After defining your app in app.js you must set up the config property of the app with the $routeProvider dependency.

var sweetMusicApp = angular.module('sweetMusicApp', []);
...
sweetMusicApp
.config(['$routeProvider',
    function($routeProvider){
       //config routes}]);

When the user navigates to someDomain.com/#/artists the angular framework renders the artist.html in the ng-view element that was specified in the index.html and invokes the designated controller.

 when('/artists', {
        templateUrl : '/partials/artists.html',
        controller : 'ArtistTableCtrl',
     }).

One of the nice features of angular is that you can specify parameterized items in the url by using the :<name> syntax. On routing to that URL the designated controller can make use of this parameter to make ajax calls based on the artistID in this example to grab data.

Example URL: someDomain.com/#/artists/2Q0MyH5YMI5HPQjFjlq5g3

 when('/artists/:artistID', {
        templateUrl : '/partials/artist-details.html',
        controller : 'ArtistDetailsCtrl',
     }).

In the controller inside controller.js, after adding the $routeParams dependency within the controller you can pull the parameter specified in /:artistID by invoking $routeParams.artistID (in this example), which returns what was specified in the URL (in this example 2Q0MyH5YMI5HPQjFjlq5g3).

AngularJS is used in almost every page of the website to display information dynamically. For example, on the "About" page of the website, there exists an a <div> with the ng-repeat tag that iterates over an array of JSON information in controller.js. A <div> is created for each element in the array, which contains information about each team member.

This feature is used extensively in both the table pages and the details pages of the website. The information displayed in those pages come from an API request made on the back-end. AngularJS takes that information and inserts it into the code of the static HTML pages when they are loaded.

With dynamic content comes the need for dynamic styling. We utilized a 3rd party library called AngularCSS which selectively injects CSS styles based on the invoked route. Initially, we only utilized the dynamic css which led to an initially unstyled presentation that was unappealing. In order to rectify this issue, we created a base css file that would apply a certain amount of style to all pages thus creating a less jarring experience for the user. Below is some sample code that utilizes this dynamic styling when routing.

myTestApp.config(function($routeProvider){

    $routeProvider
        .when('/test_page', {
            templateUrl: 'index.html',
            controller: 'testCtrl',
            css: 'index.css'
        })
        .when(...)

Please note that this code works only with Angular not Angular 2!

Bootstrap is an HTML, CSS, and Javascript framework that is used in all HTML pages of this project. The grid system is utilized heavily in order to not only organize the pages, but also make the website mobile-responsive.

Other components of the framework were used as well, particularly the tables component, used to style the model table pages.

UI Bootstrap is an AngularJS directive written by the AngularUI team. It is based on Bootstrap's markup and CSS. For this project, it's purpose was to make pagination on the tables pages uncomplicated and easy to write. The code is very simple: in the html, the uib-pagination tag was added:

<uib-pagination
    ng-model="pageNumber"
    total-items="totalAlbums"
    max-size="maxSize"
    boundary-links="true"
    ng-change="changePage()">
</uib-pagination>

pageNumber is the current page number, total-items is the number of rows in the table, max-size is the number of pagination items to display, boundary-links is a toggle to display the "First" and "Last" buttons on the pagination list, and ng-change is the function to call when the page is changed.