Routing not working when upgrading Angular library to 1.4 : Solution

I wrote a lot about AngularJS (18 articles till date) but recently I was working on a project where we upgraded the AngularJS library from 1.0 to 1.4 and found that many functionalities stopped working. Routing was one major part and one of my team member rushed me for a solution and then I realized the amount of changes.

One of the major changes, Routing is not part of the main Angular library and it needs to be added as external module. And we need to inject ngRoute if we want to use it. This changes took place in v1.2. In this post, I am considering that we are upgrading from 1.0.* to 1.4.* . I am taking example of one of my previous posts and upgrade that here. Both old and updated solution is attached. Let’s have a look again on the example screen

TalksHere we have two tabs Talks and Speakers. On clicking each tab a particular View was getting loaded. Now lets update the solution one by one.

1- Update the Angular Library. (File name – _Layout.cshtml)

Current : <script src=”//”></script>

Updated : <script src=”//“></script>

2- Include angular-route.js plugin. I added the URL .(File name – _Layout.cshtml)

<script src=””></script&gt;

3- Add the ngRoute module as (File name – eventModule.js)

Current : var eventModule = angular.module(“eventModule”, [])

Updated : var eventModule = angular.module(“eventModule”, [‘ngRoute’])

4- There are some more changes are required like the way we define the route. Let’s change it as (File name – eventModule.js)

Current :
$routeProvider.when(‘/Events/Talks’, { templateUrl: ‘/Templates/Talk.html’, controller: ‘eventController’ });
$routeProvider.when(‘/Events/Speakers’, { templateUrl: ‘/Templates/Speaker.html’, controller: ‘speakerController’ });

Updated :

//Path – it should be same as href link
$routeProvider.when(‘/Talks’, { templateUrl: ‘/Templates/Talk.html’, controller: ‘eventController’ });
$routeProvider.when(‘/Speakers’, { templateUrl: ‘/Templates/Speaker.html’, controller: ‘speakerController’ });

Here we changed only path.

5- Also we don’t need the location provider so we can comment it out or remove it. (File name – eventModule.js)

6- Now the URL that can be used to access each view, would be as (File name – Index.cshtml)

So we need to change the links in tab as

Current :

<li class=”navbar-brand”><a href=”/Events/Talks”>Talks</a></li>
<li class=”navbar-brand”><a href=”/Events/Speakers”>Speakers</a></li>

Updated :

<li class=”navbar-brand”><a href=”#Talks”>Talks</a></li>
<li class=”navbar-brand”><a href=”#Speakers”>Speakers</a></li>

Now we are ready to run the solution. Let’s see

FirstNewAnother tab

secondnewHere the urls are different as well from previous version . New urls saves from conflicting with other routes like MVC routing.


Leave a Reply

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

You are commenting using your 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