Routing Overview in AngularJS

Dan Wahlin
A free video tutorial from Dan Wahlin
Developer, Google GDE and Microsoft MVP
4.3 instructor rating • 2 courses • 23,264 students

Learn more from the full course

AngularJS JumpStart with Dan Wahlin

Building Web applications? Learn to build robust Single Page Applications (SPAs) with the popular AngularJS framework!

05:32:50 of on-demand video • Updated June 2019

  • Learn the benefits of Single Page Applications
  • Learn and be able to explain the key components in Angular
  • Stay up-to-date on Angular with Google Developer Expert (GDE) Dan Wahlin
  • Teach HTML New Tricks with Directives
  • Build Controllers and Bind Data to Views
  • Use $scope for Data Binding
  • Understand the importance of two-way data binding
  • Understand the Role of Modules
  • Learn what routing is and why it's so important in Angular apps
  • Understand how to use Factories and Services
  • Learn how to "Jazz" up your SPAs with Animations
English Routes play an important part in AngularJS and single page applications in general. So in this session we're gonna talk about what routes are and the different pieces that are used to compose routes, as well as some of the different components that are built into AngularJS that you'll use to define routes. Now, when it comes to single page applications, really the whole point of them is we want to be able to load different views, and navigate around, and we only have one shell page, though. Thus the name, single page application, of course. So we might load, for instance, View1 as the default view,. But then, as a user interacts with that, we might navigate to a view2 path, which might load a view called View2. And then when they click on that, maybe a link or a button. We go to View3, and you can see it kinda goes around here. Now of course the user can go backwards, they can hit the back button. And one of the powerful features of SPAs in AngularJS. Is if they're on View4, and they went this route here, then if they hit the back button, they should go to View3. If they hit it again, back to View2, and you get the idea. Now that's not normal, because normally in a browser, whatever previous website you were at, when you hit the back button, you'd go back to that. History is actually managed for us by AngularJS, so once we've defined routes, all the history management and the navigation is taken care of behind the scenes. So we don't really have to worry about that. Now, AngularJS routes associate a view with a controller. So if we had a route such as /customers, then we might want to load a customersController. And then the view that would load might be customers.html. So a route really kind of marries or associates a controller with a view. Now up to this point in the course, you've learned about the ngController directive. And that's one way we can hook a controller into a view. But another way we can do it is using routes. Now we do need to load a specific module that's not part of the regular AngularJS script that we've seen up to this point. And that module's called ngRoute, and it lives in a separate script. This is something you can get from AngularJS. Very easy to work with and can configure to help get you started. Once we've done that, we can actually use a module to configure routes. And we configure those routes, using using something called a $routeProvider. And a routeProvider's something that's just built-in to AngularJS, out of the box. And it's very simple to get started with, as you'll see. Now when it comes to getting started with configuring routes, we're gonna be using an AngularJS module. So we're gonna do the standard angular.module. Get to the module that we want, and then we can call a special function called config(). Now, into this function you're gonna have a routeProvider, which will be injected automatically. And this routeprovider is gonna be used to determine what happens as you navigate to a given path. So for instance, when we go to /customers, that might load customers.html view and customersController. Whereas when we go to /orders for the path, that might load orders.html and ordersController. So it's actually very simple to get started with, and that's what we're gonna be looking at in the sections that follow in this module.