This project will give you an opportunity to put everything you've learned about Angular to practice. Your task will be to create a front-end address book application for use by you and your WDI classmates. It's important to keep in touch and expand your network as you each advance your careers!
- Fork and clone this repo. Change into the appropriate directory.
- Update dependencies.
npm install
bower install
- Start your API server. This will create an in-memory database with example data and standard CRUD routes.
npm run api
- Start your web server.
npm run app
Your API server will be accessible at http://localhost:3000
. Your web server will be accessible at http://localhost:8080
. Try both of these locations. You should not receive any errors.
This project has the following file structure:
.
├── api/ # your fake backend
│ └── db.js
├── bower_components/ # where bower installs packages
├── css/
│ └── index.css # edit this file to style your app
├── js/ # angular app files
│ ├── controllers/
│ ├── services/
│ ├── views/
│ └── app.js # your initialization file
├── node_modules/ # where npm installs packages
├── LICENSE
├── README.md
├── bower.json # bower dependencies
├── index.html # edit this file to complete your app
└── package.json # npm dependencies
You should only need to edit index.html
and js/app.js
. You will need to create new JavaScript files in the appropriate directories and link to them in the appropriate order in index.html
. You should not edit api/db.js
.
You will implement an address book for WDI students. You will interact with a fake back-end that provides full RESTful routes for accessing and changing resources. An example request and response are provided below for your reference.
- The address book should have a minimum of two views and should provide access to all five CRUD operations through the front-end.
- There should be a list view to show all contacts. This view should:
- Display all data in an attractive, usable format.
- Provide a way to create a new contact.
- There should be a detail view to show one contact. This view should:
- Display all data in an attractive, usable format.
- Provide a way to update the contact.
- Provide a way to delete the contact.
- Provide a way to return to the list view.
- You must use Angular to complete these front-end features.
- The front-end should be styled attractively.
curl -X "GET" "http://localhost:3000/people/0"
HTTP/1.1 200 OK
X-Powered-By: Express
Vary: Origin
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
X-Content-Type-Options: nosniff
Content-Type: application/json; charset=utf-8
Content-Length: 479
ETag: W/"1df-x0dRMZhcsEL7NSGO4egFPw"
Date: Thu, 03 Sep 2015 18:11:17 GMT
Connection: close
{
"id": 0,
"name": "Emma Becker",
"address": {
"street": "1745 Suhrif View",
"city": "Niociwi",
"state": "Nevada",
"zip": "87652-0479"
},
"email": [
{
"type": "home",
"address": "owejemuh@example.com"
},
{
"type": "work",
"address": "cef@example.com"
}
],
"phone": [
{
"type": "work",
"number": "(655) 624-9548"
},
{
"type": "mobile",
"number": "(915) 627-7063"
}
]
}