Welcome to Part 4 of this review of the Pluralsight course Angular JS Fundamentals by Joe Eames and Jim Cooper. This module is presented by Jim Cooper.

Jim is a software developer at Pluralsight, with more than 20 years of software development experience.

He has a passion for Agile processes, especially lean software development, and has been developing production Angular apps since before v1.0.

Jim has over 10 years of TDD and pair programming experience.

Also in this series:

Part 1: Angular JS Fundamentals
Part 2: Angular Controllers & Markup
Part 3: Creating and Using Angular JS Services

Angular JS Routing

Websites of Yore

Jim opens up the Space Jam website from 1996. This film starred Bugs Bunny and Michael Jordan.

This site reminds us of what websites were like in 1996: a generally poor quality user experience and almost no use of JavaScript.

Single Page Applications

Jim demonstrates Gmail as an example of a Single Page App, and says routing is a key part of creating these.

Adding Your First Angular Route

As part of this demonstration, Jim adds an ng-view tag. This is where all of the templates will be displayed inside of our application as we load different templates into our site.

We create a templates directory with NewEvent.html inside it.

We use URLs with the # symbol for now but later on we will see how to tidy that up for HTML5 compliant browsers.

Jim shows us what is going on behind the scenes by looking at Fiddler. If you’ve not come across Fiddler before you might want to watch  Robert Boedigheimer’s Fiddler course.

More Routing and Browser History

We add another “page” that lists all of the events with an EventList.html template and EventListController.js.

Jim shows us how to update the server functionality either in Node JS or IIS depending on what we might want to use.

We see that Angular JS is also taking care of managing our browser history for us, and the back button works well.

Creating a Default Route

We setup our default route in app.js. If someone goes to an invalid page, we can send them here instead.

Instead of $routeProvider.when we use $routeProvider.otherwise

Accessing Parameters from the Route

In this lesson we see an example of using the $routeParams service to get the eventId off of the URL.

The quiz questions are:

• Which service do you use to create routes?
• What $routeProvider function allows you to set a default route?
• What service do you use to access the parameters passed on a route?

Using Angular’s $route Service

This lesson explore some advanced things we can do with the route service, including accessing query string values and custom route properties.

Enabling HTML5 Routing

So up until now we’ve been using # symbols in the URL. If this is unsightly to your tastes, you’ll want to use HTML5 routing instead.

This can be done in Angular JS with $locationProvider.html5Mode

We then update our routes removing all of the ‘/#’ parts.

We get a 404 error returned from the server. The solution is for the server to always return index.html no matter which URL is requested.

Jim shows us how to do this in both Node JS and IIS. With IIS, we need to create a URL rewrite rule.

The next hurdle to jump is this Angular JS error:

Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present!

We put this inside our head tag in index.html.

Jim also shows us an alternative solution: passing in a special object to $locationProvider.html5Modewith requireBase set to false. However this approach has some limitations so Jim’s preference is to include the base tag.

The quiz questions are:

• How would you refresh a view without refreshing the entire app?
• How do you enable HTML5 routing?
• Does HTML5 routing require any server-side configuration?

Template and Resolve Properties

In app.js each call to $routeProvider.whenuses the templateUrl property. Jim shows us the effect of using the template property instead. He says it’s not something we commonly use, but it is good to know it is there.

Something that we might use more often is the resolve property.

In Fiddler, Jim checks the “Break response on Content-Type” checkbox, which simulates a long running AJAX request. We see the page loaded but with no data loaded and it looks pretty terrible!

Jim shows us how to use the resolve property to return a promise. What this does is prevent our page template from loading before our data has come back from the server. So the resolve property can be used to avoid partially rendered pages.

Using Angular’s $location Service

In this lesson, Jim creates MainMenuController.js and uses $location.url

We see that this navigates back to our newEvent page. We also see many different methods of $location invoked and logged into the console:

• absUrl
• protocol
• port
• host
• path
• search
• hash
• url

The final demonstration calls $location.replace() and this lets us switch to a new page without adding anything to the history.

The quiz questions are:

• What route property allows you to delay loading a view until you have finished a task such as loading data?
• How do you navigate a new view from code?
• How would you get access to the query string parameters on the URL?

Suggested Exercises

Four exercises are presented here.

The first suggested exercise is to convert EditProfile.html from a stand-alone page to a template, adding a route and link to the new route.

The last suggested exercise is to match all the Space Jam monsters.