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

Here 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=”//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script>

Updated : <script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-min.js“></script>

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

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

Another tab