AngularJS Routing In-depth

Introduction and Overview
Hello, my name is Brice Wilson. Welcome to Angular Routing In-Depth. In this course, you'll learn how to build better Angular applications by fully harnessing the power and features of popular Angular routing frameworks. If you've tinkered with Angular at all, you probably have at least some exposure to the ngRoute module built by the Angular team. It's easy to quickly set up a very minimal routing configuration and move on to the seemingly more important parts of your app like the controllers, directives, and services. However, not taking full advantage of client-side routing may lead you to build clunky navigation schemes with bloated views and duplicated code. Routing is an important and powerful tool that, when used correctly, can help you build better structured Angular applications that are easier to maintain. In this very short introductory module, we're going to briefly discuss the difference between server-side and client-side routing. I'll also give you an overview of the demo app I'll be using in the course and show you how it works and how the code is structured.

URL-based Routing with ngRoute
Hi, this is Brice Wilson. Welcome back to Angular routing in-depth. In this module, we're going to focus on URL based routing with the ngRoute module that comes with the Angular framework. ngRoute is its own Angular module, and stored in its own JavaScript file, but it's part of the Angular framework and developed by the team at Google. As we'll see, it takes a very URL-centric approach to routing, which makes it simple and effective. I have most of the controller, services, and views for the demo app already in place so that we can just focus on wiring it all together using the ngRoute module. We'll begin by seeing how to configure routes with the route provider. This is really the starting point for working with ngRoute, and it's how you define all of the routes you intend to use in your application. We'll see how to match URLs to controllers and views, and even how to make network calls and resolve promises before transitioning to a particular route. Once the basic routes are in place, we'll use the route param service to access URL parameters being passed as part of the routes. This service provides a clean and simple way to access and use those parameters in your controllers. With every transition from one route to another, events are begin fired in the framework. We'll take a look at those events and see how you can handle them in your code to perform custom actions related to route transitions. The final topic we'll cover in this module is configuring the location service to operate in HTML5 mode. This allows you to get rid of the hash sign you've probably seen in your address bar when using Angular apps. Let's get started by seeing how to add the ngRoute module to our application.

State-based Routing with UI-Router
Hi, this is Brice Wilson. Welcome back to Angular routing in depth. In this module, we're going to take a close look at a very capable third party alternative to the ngRoute module included with Angular. UI-Router delivers all of the most beneficial features of ngRoute, but also adds some additional features that make it very powerful and a much more flexible tool for larger applications. In this module, we'll see how it takes a more state-based approach to routing, but that it's not a fundamental change from ngRoute. They are similar enough that moving from ngRoute to UI-Router doesn't require you to think about Angular routing in some completely new way. It primarily builds on what works great and adds useful new features. I'll begin by discussing what a state is, and then we'll see how to configure states with the $stateProvider service. We'll obviously need to move from one state to another in our applications, so we'll look at several ways to do that, both in code and in our markup. The ability to pass parameters to states is also very important, so we'll see how to configure states to accept parameters, as well as how to pass in those parameters with the $stateParams service. After that, we'll look at some additional, useful properties you can set on state configuration objects. They include a few useful settings that you don't get when configuring routes with ngRoute. Let's get started by talking about states.

Advanced Routing with UI-Router
Hi, this is Brice Wilson. In this module of angular routing in depth, we're going to continue our look at the third-party routing framework, named UI-Router. In the last module, we covered how to install, configure, and use the basic features included with UI-Router. Many of those features were similar to features included with the built-in angular router. In this module we're going to go beyond those basic features and look at the truly new and powerful features UI-Router provides, that you don't get with ngRoute. I'll begin by discussing nested states and views, and how you can use them to create a state hierarchy in your apps. We can't discuss nested states without also talking about abstract states, and the role they play in any state hierarchy you may define. They last topic we'll cover is also a powerful routing feature that gives you the ability to compose the pages of your app in new ways. Multiple named views give you the ability to easily lay out a large page by building it from smaller pieces. This provides you with enormous flexibility. We'll get started with nested states and views.