Thom Page
10 years ago
parent
691d024dd5
commit
7576ff82fc
@ -0,0 +1,268 @@
|
||||
|
||||
|
||||
# WDI-PANTHALASSA
|
||||
|
||||
---
|
||||
Title: World Bank Loan Records Finder <br>
|
||||
Type: Homework<br>
|
||||
Duration: Two days <br>
|
||||
Creator: Thom Page <br>
|
||||
Course: WDIr-Panthalassa<br>
|
||||
Competencies: Angular.js with $http module<br>
|
||||
|
||||
---
|
||||
|
||||
## 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:
|
||||
1. The number of records in the database.
|
||||
2. A clickable list of each unique `region` name in the database.
|
||||
3. When the `region` name is clicked, a list of all the records associated with that region should appear.
|
||||
4. A search bar / filter box to narrow down the list of regions.
|
||||
5. 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. </br></br>
|
||||
|
||||
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
|
||||
**Right:** A form to submit a new record.</br></br>
|
||||
|
||||
|
||||
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
|
||||
**Right:** Putting input into the search/filter box changes the region list
|
||||
|
||||
|
||||
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
|
||||
Number of records and search/filter box
|
||||
|
||||
|
||||
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
|
||||
## DIRECTIONS AND COMMITS
|
||||
|
||||
#### Set up and seed db
|
||||
* `npm install` your dependencies.
|
||||
* 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**.
|
||||
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 1: set up and seeded db".
|
||||
<hr>
|
||||
|
||||
#### 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
|
||||
}]);
|
||||
```
|
||||
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 2: Angular is good to go".
|
||||
<hr>
|
||||
|
||||
#### 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.
|
||||
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 3: Count of database records appears on the page".
|
||||
<hr>
|
||||
|
||||
#### 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.
|
||||
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 4: All region names appear on the page".
|
||||
<hr>
|
||||
|
||||
#### 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`
|
||||
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 5: All records associated with a region appear on the page".
|
||||
<hr>
|
||||
|
||||
#### Make a search box that will filter the region names
|
||||
|
||||
* 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.
|
||||
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 6: Implemented search box".
|
||||
<hr>
|
||||
|
||||
#### 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-model`s 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.
|
||||
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 7: Can create new record".
|
||||
<hr>
|
||||
|
||||
### EXTRAS
|
||||
- List the region names alphabetically in the region list
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 8: Region names are in alphabetical order".
|
||||
<hr>
|
||||
|
||||
- Include `delete` functionality (means adding a server route)
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 9: Record can be deleted".
|
||||
<hr>
|
||||
|
||||
- Include `put` functionality (means adding a server route)
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 10: Record can be updated".
|
||||
<hr>
|
||||
|
||||
|
||||
- Clear the form after submit
|
||||
<hr>
|
||||
** Commit your work.** <br>
|
||||
The commit message should read: <br>
|
||||
"Commit 11: Form is cleared after submit".
|
||||
<hr>
|
||||
|
||||
|
||||
#### 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`
|
||||
|
||||
</br>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 56 KiB |
@ -1,153 +0,0 @@
|
||||
# WORLD BANK LOAN RECORDS FINDER
|
||||
|
||||
### Angular.js with $http
|
||||
|
||||
|
||||
##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 an Angular front-end that makes use of the data.
|
||||
|
||||
######The app should display:
|
||||
- A clickable list of all values associated with the `region` key in the database records. It's a list of all the region names with duplicates excluded.
|
||||
- A dynamic list of all the records associated with a region when the region name is clicked
|
||||
- The number of records in the database
|
||||
- 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. Search bar / filter box. **LEFT:** All the records for a given region once the region name is clicked. </br></br>
|
||||
|
||||
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
|
||||
Image below-- **RIGHT:** A form to submit a new record.</br></br>
|
||||
|
||||
|
||||
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
|
||||
|
||||
Image below-- **RIGHT:** Putting input into the search/filter box changes the region list
|
||||
|
||||
|
||||
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
|
||||
Image below-- number of records and search/filter box
|
||||
|
||||
|
||||
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
|
||||
## STARTER CODE
|
||||
|
||||
#### SEED
|
||||
You have a seed route within a seed controller. You can seed your database with all the World Bank records by going to `/seed` in your browser **once**.
|
||||
|
||||
#### WBINFO
|
||||
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.
|
||||
|
||||
## ANGULAR
|
||||
|
||||
#### DIRECTIVES
|
||||
- `ng-app`
|
||||
- `ng-controller` you probably only need one
|
||||
- `ng-repeat`
|
||||
- `ng-model`
|
||||
- `ng-click`
|
||||
- `ng-submit` within a form element
|
||||
- `| filter:`
|
||||
|
||||
#### DEPENDENCIES
|
||||
- `$http`
|
||||
|
||||
</br>
|
||||
|
||||
|
||||
## BONUSES
|
||||
- List the region names alphabetically in the region list
|
||||
- Include `delete` functionality (means adding a server route)
|
||||
- Include `put` functionality (means adding a server route)
|
||||
- Clear the form after submit
|
||||
|
||||
</br>
|
||||
|
||||
# NOTES
|
||||
|
||||
|
||||
#### SUGGESTED STEPS
|
||||
1. Get the number of records and display it on the page
|
||||
2. Get the region names showing
|
||||
3. Get click functionality on the region names working
|
||||
- Display records associated with a region
|
||||
4. Get the search box working for fun
|
||||
5. Add in the form for a new record and make sure data is flowing
|
||||
- Get the form to add a new record and immediately display it on the page
|
||||
|
||||
#### MODEL REFERENCE
|
||||
######A `wbinfo` record has five strings
|
||||
- `region`
|
||||
- `projectabstract`
|
||||
- `projectname`
|
||||
- `year`
|
||||
- `loanamnt`
|
||||
|
||||
</br>
|
||||
|
||||
#### VIDEO FOR IMPLEMENTING A SEARCHBOX (don't look if you don't want spoilers)
|
||||
|
||||
Final code around `3:32 - 3:40`
|
||||
https://www.youtube.com/watch?v=YFsduR7mBfY
|
||||
|
||||
</br>
|
||||
|
||||
#### NOTES ON FORM DATA IF YOU GET STUCK (don't look if you don't want spoilers)
|
||||
|
||||
Refer to Matt's Tuesday notes for a form that has its own controller. This is for making a form that belongs to the parent controller:
|
||||
|
||||
You can have an empty object in your controller like `formdata = {}` that can accept data from an `ng-model`, and process that object in a function bound to `ng-submit`.
|
||||
|
||||
```
|
||||
<form ng-submit="ctrl.processForm()">
|
||||
<input type="text" placeholder="region name" ng-model="ctrl.formdata.region"></br>
|
||||
<input type="text" placeholder="project name" ng-model="ctrl.formdata.projectname"></br>
|
||||
<textarea type="text" placeholder="project abstract" ng-model="ctrl.formdata.projectabstract"></textarea></br>
|
||||
<input type="text" placeholder="year approved" ng-model="ctrl.formdata.year"></br>
|
||||
<input type="text" placeholder="loan amount" ng-model="ctrl.formdata.loanamnt"></br>
|
||||
<button type="submit">SUBMIT</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 159 KiB |
|
Before Width: | Height: | Size: 133 KiB |
Loading…
Reference in new issue