angular ui router

Watch User Created Playlist (12)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Introduction to ui-router

Convert a UI Route into an Angular Directive

P

ui-router Named Views

P

ui-router: Activating States

ui-router: Abstract States

P

Lazy Loading modules with ui-router and ocLazyLoad

P

AngularJS Architecture: Basic State with ui-router

P

AngularJS Architecture: Using ui-router's named views

P

AngularJS Architecture: ui-router state params for sharing information

P

AngularJS Architecture: navigating between states with ui-router

P

Consistency between ui-router states and Angular directives

P

AngularJS Architecture: Animate state transitions with ui-router

P

Introduction to ui-router

4:35 angularjs

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.

angularjs tutorial about Convert a UI Route into an Angular Directive

Convert a UI Route into an Angular Directive

2:49 angularjs PRO

In this lesson, we are going to turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.

ui-router Named Views

6:38 angularjs PRO

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.

angularjs tutorial about ui-router: Activating States

ui-router: Activating States

4:04 angularjs

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.

angularjs tutorial about ui-router: Abstract States

ui-router: Abstract States

3:17 angularjs PRO

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.

angularjs tutorial about Lazy Loading modules with ui-router and ocLazyLoad

Lazy Loading modules with ui-router and ocLazyLoad

2:40 angularjs PRO

We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want to lazy load modules when we change states?

angularjs tutorial about AngularJS Architecture: Basic State with ui-router

AngularJS Architecture: Basic State with ui-router

5:20 angularjs PRO

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 tutorial about AngularJS Architecture: Using ui-router's named views

AngularJS Architecture: Using ui-router's named views

8:03 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: ui-router state params for sharing information

AngularJS Architecture: ui-router state params for sharing information

4:53 angularjs PRO

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 tutorial about AngularJS Architecture: navigating between states with ui-router

AngularJS Architecture: navigating between states with ui-router

5:00 angularjs PRO

Now that we have ui-router states in our Angular application, we can discuss the three ways to activate a state within ui-router. We will programmatically activate a state using $state.go and capture user interactions with the ui-sref directive.

angularjs tutorial about Consistency between ui-router states and Angular directives

Consistency between ui-router states and Angular directives

4:40 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Animate state transitions with ui-router

AngularJS Architecture: Animate state transitions with ui-router

3:46 angularjs PRO

In this lesson, we are going to learn how easy it is to animate ui-router state changes using ngAnimate and about 10 lines of CSS.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?