AngularJS Routing with Web API 2

In the first part of this tutorial series I took you through how to start using AngularJS with WEB API. We will continue this series by having a look at AngularJS Routing with Web API 2. In fairness, this is really just a tutorial for AngularJS routing as it doesn’t really affect the Web API component but we will be adding more methods to our Wen API control to return product detail information. For ASP.NET MVC this would be a bit of a different story and I will write an article on that next. But for now, let’s see what we need to do to implement AngularJS routing in our project.

We will continue with the project we built in the first part of this tutorial series so if you haven’t followed that go and have a go, otherwise just create an empty Web application and make sure you tick Web API.

In the last tutorial we ended up with a small list of products. In this part we will use AngularJS routing so that we can have more than one view and start making this a useful application. So as we have a view for our product list, it would probably make sense to have a view that allows us to display a detailed view of one of our products.

AngularJS Routing

The first thing to note is that Routing functionality is not provided as part of the core AngularJS framework, it is distributed separately. Let’s go to the NuGet Package Manager and have a look for it.

nuget package manager

Search for angularjs route.

angularjs route package

click on install.

Reorganize the files

Inline with the Angular Tutorials and Googles own style guide, we should reorganize our files a little. Currently we have a controllers.js file which not only defines our controller but also our main app module. It would make much more sense to split these out so that controllers are in their own module.

In the root of the scripts folder create a new file called app.js. In that file add the following:

This declares our main module and says that is has a dependency on the ngRoute and productControllers modules. This will become clear later. In fact, part of it will become clear now. Open our controllers.js file and chnage it so that it now looks like this:

Previously our main app (productsApp) module was defined here, but as that has now moved to it’s own file we are now defining it as our controllers module. Which, you will no doubt of realized, is one of the dependencies of our main app module. But before we move on, notice that we have also defined two controllers. The first is the controller we had previously that gets our product list, but now we also have on that will eventually get our product detail. In a bigger project it may be that you would have more than one controllers module but for a project of this size doing it like this is fine.

There is one other thing to notice here. We have changed the parameters of our controllers; why? Previously we just had a simple:

Now we have, and array in there with our function? Well this is due to dependency injection and minification. Angular identifies the controllers dependencies from the argument names in the controllers function, but if you minify the javascript they will be minified too and the dependency injector won’t recognize them. by naming the parameters with string (which won’t get minified) we are able to overcome this problem. There are also otherways to accomplish this using

HTML Files

At the moment we have one html file: index.html. We could wedge everything into that but it would be much easier to manage if we have separate templates for each type of view. I doubt this will be a new concept to anybody. It is how asp.net MVC works and also WordPress and about a million other technologies. But with AngularJS you can have it with html and with the benefit of no unnecessary trips to the server. So how do we do this then?

First open up the index.html file and delete everything between the body tags. An simply add this:

Erm… Delete may have been a bit hasty… We will still use what was there, so if you did delete it, ctrl+z a few times to get it back and leave it there for a bit as will use it somewhere else. But still add the above though.

ng-view

more to follow…

1 thought on “AngularJS Routing with Web API 2

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.