Angular JS Routing

Welcome to final part of this review of the Pluralsight course
Angular JS: Get Started by Scott Allen.scott-allen

Scott has over 25 years of commercial software development experience across a wide range of technologies. He has successfully delivered software products for embedded, Windows, and web platforms.

To learn more about him, see my career strategies interview with him and other successful developers on Outlier Developer.

Angular JS: Get Started is the first course in the Angular JS Learning Path.

Also in this series:

Part 1: Introduction
Part 2: Controllers
Part 3: Views and Directives
Part 4: Services

Angular JS Routing

What is Routing?

Scott explains all routing is based on a URL, and we can use it for locating resources not just on the server, but on the client.

The routing engine captures the URL request, processes it, and renders a response.

Now that we understand the basic idea, Scott asks some important questions:

  • How do we put this routing engine in place?
  • How do we configure the rules that the routing engine will use?

We look at the answers to these next.

Routing With Angular

When routing with Angular, we have a dependency on angular-route.js

We configure rules using the component $routeProvider.

Scott explains that we setup a layout view, which is used on every page in our application.

The Angular router works with the browser’s back and forward buttons so that they behave as the user expects them to.

The Setup

Routing makes some aspects of web development easier, for example dividing responsibilities.

The plan here is to have three routes, or sections, in addition to our index.html shell:

  • main.html for search user
  • user.html for user details
  • repo.html for repository details

We learn the syntatic details we need to know to setup our new routes in Plunker.

We add angular-route.js, add ngRoute as a dependency of our module and cut and paste the relevant HTML sections into new files.

We no longer specify the controller in our views because that is now specified by the routing rules.

We create a new controller called UserController, based on our original controller but with some features removed.

It’s partly working, but we need to get the userDetails display back again.

The Fixup

The basic steps demonstrated here are:

  1. Create route
  2. Create template for the URL
  3. Create controller for the URL
  4. Have search navigate to new route

We start with the $routeProvider, and we register a new route with the when method.

Later on in the demonstration, we register the UserController and can simplify the code, removing four of its service dependencies and only being depended on $scope, our custom github service, and $routeParams.

At the end of this lesson, Scott shows the app working correctly, and the back and forward buttons and shortcut keys are working as we want.

Your Challenge

To implement the ability to click on the name of a GitHub repository and drill into details about that repository and see images of all of the collaborators.

My Solution

Scott gives his own solution to this problem. No spoilers here: try the challenge yourself and then watch this lesson afterwards.

You’ve successfully gotten started

Congratulations, you’ve made it through the whole course.

We’ve covered Controllers, Models, Views, Services, and Routing!

To continue learning Angular JS, there are many more courses available on Pluralsight.

Angular JS: Get Started is the first course in the Angular JS learning path.

The second course is Angular JS Fundamentals and I have reviewed that as well.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s