Routing is a fundamental component of Angular applications. Taking full advantage of client-side routing in your Angular apps will lead to better structured code and a better experience for your users, since you will only have to update the portions of the web page that change as they interact with your app. This course will teach you how to implement routing in an Angular app with the most popular frameworks available. You will learn how to work with URLs, parameters, states, view hierarchies, and lots more.
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.
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.