Our last programming assignment will involve Angularjs. You will have 2 choices, 6A or 6B. Pick one and only one of them.

Assume you are a college advisor assigned 20 students to keep track of.

Option 1, Program 6-A, AngularJS

Program 6A is a bit simpler than 6B. You need to take a JSON data file (linked below), and using Mongoose read the data and display it on 2 different pages. Both pages will contain the links and script tags necessary for Bootstrap and AngularJS, as well as NAV bar that allows navigating between the pages. The first page displays all of the data, the second page displays some of the data and requires a calculation.

There is an example similar to this in the second week of lecture notes on AngularJS under the heading

AngularJS Bootsrap's Nav Bar: Hint for program assignment 6A

If you have not done so, you should examine the above example carefully.

Your index.html page should look like this, more or less, but it should display all the data for all student objects in the data file.

The second page, gpa.html, should look something like this, but yours should also display this data for all students. There are 3 regular fields here and one calculated field (gpa).

You need to use Bootstrap's NAV bar, but you do not necessarily have to use the inverted NAV bar as shown above. Please check out this video to see how things should work. You don't need to have a search textbox on both pages, but it would be nice.

We've shown you what the top of each page should look like. The top of both pages will have the link and script tags necessary to load the required jQuery, Bootstrap, and Angular libraries, and the top of the page will also hold the Bootstrap NAV bar. The middle of each page will essentially be a HTML table with the ng-repeat directive used to display the data.

In each page your JavaScript code will create an AngularJS module and a controller. The controller will use the $http module to request the data from students.json. All of this is discussed in the last 2 weeks of lecture notes.

In total, for full credit, this project will require you submit 3 files in a single folder as shown in the image: gpa.html, index.html, and students.json. Do not include the mongoose.exe file in your submission.

And, I will give 85% credit if you get only the index page (the page with all the data) working. To get 100% you need to get both pages working. So, get the index page working before starting on the gpa page.

Both index.html and gpa.html will require using Bootstrap and AngularJS, and both pages will need a Bootstrap NAV bar allowing navigating between two pages which must be named: index.html, and gpa.html.

Data File. You will also need the JSON data file, students.json. Here's the zipped data: students.zip

You'll need to unzip it before use. Once decompressed, you find students.json.

Important: when you send me the zipped file with your completed assignment, do NOT include the mongoose file itself. The email server may think its a virus and fail to deliver your assignment.

The index.html page will take the data file, students.json, and read all of that data into a table created using Angular's ng-repeat directive. The second page, gpa.html, will use ng-repeat to display only the id, last name, first name, and gpa for each student. The gpa will require a calculation of the grade_points value divided by the credit_hrs value for each student. I remind you that you can have both a variable and an expression inside of a template. Such an expression should contain the gpa calculation. For example.

{{(student.gpa_points / student.credit_hrs).toFixed(1)}}

The data file itself is an array that contains 20 or so JSON-ized objects with this general structure. id, first_name, last_name, credit_hrs, gpa_points, and major.

{"id":"1","first_name":"sam","last_name":"tam","credit_hrs":"23", "gpa_points":"48","major":"CIT"}

Important: you will need to zip the folder with your solution files before submitting it.

Also Important: Let's stay you run mongoose and the page displayed needs an adjustment. You alter your code and save the changes, then click on the mongoose icon again in hopes your fix worked. Well, if you did not stop the previous version of Mongoose from running before clicking the icon then you will now have 2 instances of mongoose running, and it can become confusing as to which version of your web page you are seeing display your page--the old one or the new one. In fact I have seen students with 5 or 6 versions of mongoose all running when they look in the system tray. This will cause trouble.

Make sure you only have 1 version of mongoose running at a time. If you need to make a change in a page, always stop the old version of mongoose, make the changes and save, then restart mongoose to see what happened. Otherwise you may be looking at an old version of your page.

How To Submit Your Program

Reminder note: once more, do not include the Mongoose file in the folder you submit.

Since you are submitting several files you'll need to compress the folder and attache it to an email in order to properly submit it. Name the folder containing your files using your name and project number. For example the folder might be named AJSmith-prog6. Please put your name on the folder. I get lots of programs; putting your name on the folder help keep things organized and shortens the amount of time it takes to get things graded.

After creating the folder, Zip (compress) the folder by right-clicking on it (on Windows), and then choosing Send to from the pop-up menu, then select Compressed folder. This will crate a new zipped folder identifiable by the little zipper on the folder icon with a .zip extension.

Then, attach the zipped folder to an email and send it to me.

Let me know if you have questions.

Option 2, Program 6-B, Single-page Apps

You should read the details of program 6A first. Program option 6B is a variation on 6A, and takes the students.json file (the link for which is in the description for 6A) and creates a single page app. The index.html page will contain the links and script tags necessary for Bootstrap and AngularJS, as well as NAV bar that allows navigating between the two partial pages. Using the ng-view directive you will swap out one of two partial pages: all_students.html and gpa.html. The two pages will display like those in the images shown in 6A.

Check out this video discussion of what you need to do for this program.

In total, this project will require you submit 4 files with these names: index.html, students.json, as well as two partial pages named all_students.html and gpa.html located in a folder named partials, as shown. Do not include the mongoose.exe file.

Use Bootstrap and AngularJS for all pages. You'll find that the two partial pages are basically just HTML tables with the angular ng-repeat dirrective to display the data.

The index.html page should also contain all of the AngularJS code. Index.html will hold the code that creates the Angular module, the app config section that sets up routing, and two controllers, one for each partial page.

The all_students.html partial page will take the data file, students.json, and read all of the data into a table created using Angular's ng-repeat directive. The second partial page, gpa.html, will use ng-repeat to display only the id, last name, first name, and gpa for each student. The gpa will require a calculation of the grade_points value divided by the credit_hrs value for each student. I remind you that you can have both a variable and an expression inside of a template.

The incentive for 6B: If you get program 6B working properly I will give you 120% for this program.

As with 6A you will need to compress the folder with your files and attach it to an email. See the instructions for 6A if this is new to you.

Let me know if you have questions.