lsquach/angular-api-dashboard

$http and promise chaining in angular

API Dashboard Angular

In this lab we will explore promise patterns in Angular, using $q and $http requests.

Your goal is build a user-friendly dashboard that can fetch and display the raw JSON any given API endpoint.

A random delay of up to 9 seconds is in place on all $http request!

Setup Instructions

Clone this repo.

Install the budo development server:

npm install budo -g

To run the server, make sure you're inside the application directory, then run:

budo --open

The homepage is broken. Your goal is to get the dasboard API interface working!

You may code in:

• js/api_dashboard_controller.js
• index.html

Randomized Request Failures

In js/api_dashboard_controller.js you can modify the global variable FAIL_RATE to be 50, for a 50% chance that your http requests will fail / be rejected.

FAIL_RATE = 50 // 50% percent chance requests will fail

Api Dashboard Goals

User Interface Improvements:

• Can you clear the input field
• Can you submit on enter?
• Don't make me wait for API calls!
  • Display a load spinner so that I know the app still works:
  • See styles/main.css for a custom glyphicon-spin style.
  • Add this line to see the spinner: <span class="glyphicon glyphicon-refresh glyphicon-spin"></span>
• Make sure the user never sees {{ ... }} rendered anywhere in the html.

Promise Reference

• Promises in Javascript
• Promises in jQuery
  • jQuery.Deferred
  • deferred object
• Promises in Angular
  • $q
• Angular $http module reference

Screen Shot