Using UI-Router in an Angular Application

misc2Angular uses routes to show different content on the site.  It is one application but part of the URL defines what HTML template will be used on the page.  Angular uses ngRoute to accomplish this.

UI-router is a much more powerful replacement for ngRoute.  UI-Router allows you to have nested views within your page rather than just one view at a time using ngRoute.  I found a great walkthrough on how to get this set up here.  With UI-Router you don’t have to have your states and routes linked  to the url so you can change different parts of the page without changing the URL.

When setting it up one thing I kept forgetting to do was put ‘ui.router in the angular.module.  It needs to be done like this:

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

Using ui-router saves you the trouble of using a lot of ngInclude, ngShow, ngHide, and ngIf in your html page and makes everything easier to layout and much cleaner.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s