Learning ui-router can be challenging. These lessons are here to help!

In his debut egghead.io lesson, Joel will show you how to get setup and running with ui-router, an alternative to AngularJS's default routing module.

Introduction to ui-router 

We will look at ui-router and learn how we can use it to define unique states with Eggly. This will allow us to leverage the power of a state machine in our AngularJS application, which goes beyond code management and into managing the states that exist within the code.

> **note** the route doesn't actually fire unless you navigate to index.html#/ instead of index.html (see comments)

AngularJS Architecture: Basic State with ui-router

The ui-router library for AngularJS provides several options for navigating between states in your application. You can navigate via the browser's URL bar, programatically with `$state.go`, and with the ui-sref directive on your HTML elements.

ui-router: Activating States

ui-router has the powerful ability to define abstract states, or states that can't be navigated to, but are useful for defining a set of states with shared properties.

ui-router: Abstract States

Let's learn how to pass information from one state to another within Eggly. We learn how to define a state so that it has parameters in its definition and then read those parameters using the $stateParams service.

AngularJS Architecture: ui-router state params for sharing information

ui-router's states and AngularJS directives have much in common. Let's explores the similarities between the two and how these patterns have emerged in Angular. Keeping your states and directives consistent can also help with refactoring as your app grows larger over time.

Consistency between ui-router states and Angular directives

We've [looked at lazy loading with ocLazyLoad](https://egghead.io/lessons/angularjs-lazy-loading-angular-modules-with-oclazyload) previously, but what if we are using ui-router and want to lazy load modules when we change states?

Lazy Loading modules with ui-router and ocLazyLoad

The ui-router library for AngularJS provides the ability to name views within your application. This is useful for dividing up your application into sections, and changing the content of a section based on the current state.

ui-router Named Views

We'll take a deeper look at ui-router as we introduce named views into Eggly. We will take the basic state that we defined in the previous video and refactor it so that it consists of two unique views within the application.

Learn ui-router

Instructor

Course content (9 lessons)

Instructor