History

Thom Page 70addd3adc angular updates		10 years ago
..
controllers	angular hw	10 years ago
models	angular hw	10 years ago
package.json	angular hw	10 years ago
readme.md	angular updates	10 years ago
server.js	angular hw	10 years ago

readme.md

WDI-PANTHALASSA

Title: World Bank Loan Records Finder
Type: Homework
Duration: Two days
Creator: Thom Page
Course: WDIr-Panthalassa
Competencies: Angular.js with $http module

WORLD BANK LOAN RECORDS FINDER

Using Angular.js to make ajax calls with the $http module

###APP

You will be provided with working server code that delivers an API of World Bank Loan data in JSON format. Your mission is to build a single-page Angular front-end that makes use of the data. You will not change the server code in any way: you are making Angular to suit.

######Your Angular page should display:

The number of records in the database.
A clickable list of each unique region name in the database.
When the region name is clicked, a list of all the records associated with that region should appear.
A search bar / filter box to narrow down the list of regions.
A working form to add a new record to the database.
- When the data is submitted and processed, the page should immediately reflect the changes

IMAGE BELOW
Top: the number of records is displayed.
Right: All region names in the database, duplicates excluded. A search bar / filter box.
Left: All the records for a given region once the region name is clicked.

Right: A form to submit a new record.

Right: Putting input into the search/filter box changes the region list

Number of records and search/filter box

DIRECTIONS AND COMMITS

Set up and seed db

npm install your dependencies.
If you run nodemon and go to localhost, you should get a 'cannot GET /' in the browser. This is because there is not yet a public folder or anything attributed to the root. You can check out a JSON service routes by going to /wbinfo/count. This route gives a count of all records in the database, and should currently read 0 because the database has not been seeded.
You have a seed route within a seed controller. Seed your database with all the World Bank records by going to /seed in your browser once. The app will redirect to the wbinfo JSON index for verification purposes.

** Commit your work.**
The commit message should read:
"Commit 1: set up and seeded db".

Set up Angular

Create your static assets. Your index.html and app.js will work together with two-way data binding.

Create your Angular module (call it whatever you like).

<html ng-app="worldbank">

var app = angular.module('worldbank', []);

Create a controller (you just need one) to work with your data. You can call it whatever you like. Give your controller $http so that it can make ajax requests.
```
<body ng-controller="mainController as ctrl">
```
```
app.controller('mainController', ['$http', function($http) { 
	//stuff 
}]);
```

** Commit your work.**
The commit message should read:
"Commit 2: Angular is good to go".

Get the number of records and display it on the page

Look in the starter code: there is a controller for the World Bank info called wbinfoController.
- The first route in the controller uses the Mongoose .count() query. .count() is just like .find() but instead of returning all the records, it just returns the total number of those records. You don't need to alter this route, just know that it exists and what it does.
When the page loads, make an ajax request to /wbinfo/count.
Display a count of all records in the database.

** Commit your work.**
The commit message should read:
"Commit 3: Count of database records appears on the page".

Get the country / region names and display them on the page

Look in the starter code-- in the wbinfoController there is a route called '/uniqueRegions' that uses the Mongoose .distinct() query. This query will find all entries of a certain kind, and exclude duplicates. We can get a list of all regions and they will be unique. You don't need to alter this route, just know that it exists and what it does.
When the page loads, make an ajax request to /wbinfo/uniqueRegions.
Display all the regions on the page.

** Commit your work.**
The commit message should read:
"Commit 4: All region names appear on the page".

When you click on a region name, all the separate records for that region will appear

In the starter code, in the wbinfoController there is a route called '/byName/:name' that uses the Mongoose .find() query to retrieve all records with a particular region name only. The region name is passed in through req.params. You don't need to alter this route, just know that it exists and what it does.
When the user clicks on a region name from the list, make an ajax request to '/wbinfo/byName/' + (some variable name).
Display all records associated with the clicked region on the page.

MODEL REFERENCE

######A wbinfo record has five strings

region
projectabstract
projectname
year
loanamnt

** Commit your work.**
The commit message should read:
"Commit 5: All records associated with a region appear on the page".

Watch this video on making a search box (the final code is at around 3:32 - 3:40, skip to that if you like): https://www.youtube.com/watch?v=YFsduR7mBfY
Implement a search box that will filter the region names.

** Commit your work.**
The commit message should read:
"Commit 6: Implemented search box".

Add in a form to post new data

In your index.html, Make a form that belongs to the parent controller (the form does not have its own controller).

Example code:

<form name="newRecordForm" ng-submit="ctrl.processForm()">
	<!-- stuff -->
	<button type="submit">SUBMIT</button>
</form>

Make an empty object in your controller to store form data:

app.controller('mainController', ['$http', function($http) {

  this.formdata = {};
  
  // lots of stuff

}]);

Make this.formdata = {} accept data from all the ng-models in the form, and process that object in a function bound to ng-submit.
The function that processes the form should make an ajax POST request to '/wbinfo' to create a new record.

** Commit your work.**
The commit message should read:
"Commit 7: Can create new record".

EXTRAS

List the region names alphabetically in the region list

** Commit your work.**
The commit message should read:
"Commit 8: Region names are in alphabetical order".

Include delete functionality (means adding a server route)

** Commit your work.**
The commit message should read:
"Commit 9: Record can be deleted".

Include put functionality (means adding a server route)

** Commit your work.**
The commit message should read:
"Commit 10: Record can be updated".

Clear the form after submit

** Commit your work.**
The commit message should read:
"Commit 11: Form is cleared after submit".

LIST OF ROUTES

You have a controller for serving Wbinfo data. You don't need to change these or anything else in the server. The routes are:

/wbinfo/count. Serves up a count of all records in the database.
/wbinfo/uniqueRegions Serves up all values for the key region excluding duplicates.
/wbinfo/byName/:name Will deliver all records where the region name is the same as req.params.name
There is also an index route /wbinfo for testing to see if all the data is there.
And POST /wbinfo for creating a new record.

Use the information served by these routes in your Angular by using $http to get the information.

There is no front-end code given to you, you are building the entirety of the static component of the app in the public folder. Your front-end doesn't have to look anything like the examples given above, just as long as the information from the routes is used and the program flow works.

LIST OF ANGULAR DIRECTIVES

ng-app
ng-controller you only need one
ng-repeat
ng-model
ng-click
ng-submit within a form element
| filter:

LIST OF ANGULAR DEPENDENCIES

$http