Front-end Routing with UI-Router

Introduction

To practice working with UI-Router, you're going to make a single-page app with multiple views. Rather than starting totally from scratch, you'll be build up our previous Infamous Criminals interface to be more like a real app. Your mission is to convert the starter code so that each section of the interface has one purpose – one page per function.

Just like earlier in the week, make sure you've got Mongo running - navigate to the API folder, and fire that up with an npm start; and just like in our UI-Router lesson, don't forget you'll need to run your front-end through a server so http-server will be your friend.

Exercise

Your app should have:

  • A list page, listing all our criminals
  • An about page, explaining what this application is for
  • A new page, to add a new criminal

####Bonus

If you'd like to use your own previous finished Infamous Criminals app as a starter, feel free.

Starter Code

In your starter folder you'll find a complete Infamous Criminals interface, but only on one page.

Deliverable

An Angular application with multiple states using UI-Router.

Additional Resources