Search code examples
angularjsangularjs-routing

Does the version in AngularJS matters?



I've just started working on AngularJS and stuck with a problem which as follows

I've created a code as app.js

var myApp = angular.module("myApp",[]);

myApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.when("/getAnimals",{
        templateUrl: "templates/showAnimals.html",
        controller:"animalController"
    });
    $routeProvider.when("/getBirds",{
        templateUrl: "templates/showBirds.html",
        controller: "birdController"
    });     
}]);
myApp.controller("animalController",function($scope){
    $scope.message = "Hello Animal World";
});
myApp.controller("birdController",function($scope){
    $scope.message = "Hello Bird World";
});

And an index.html

<!DOCTYPE html>
<html ng-app = "myApp">
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script src = "app.js"></script>
</head>
<body>
    <div>
        <a href = "#getAnimals">Click Here to get Animals</a><br>
        <a href = "#getBirds">Click Here to get Birds</a><br>
    </div>
    <p ng-view></p>
</body>

But I found that this page is not loading and showing a huge error when I inspect. I didn't actually understand what has happened there. But after several hours of cracking my head, instead of given CDN I've added another CDN i.e

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

It worked !!! With that I've got to know that I've made some mistake. But since I'm new to AngularJS I'm pretty much confused on what happened there. Does this version with CDN really matters in AngularJS? Did I write any bad code in my module which doesn't support newer version of AngularJS?


Solution

  • One possible reason for the mysterious huge error (not in the question) could be because angular has moved on since 1.0.7 in terms of separating out the modules instead of putting everything inside the core module.

    In the older version routing used to be built in to the core module and library. But later it got separated out to ngRoute module (and to different file) so that you can just opt in only if required. The $routeProvider you are using belongs to ngRoute module and you need to list that dependency in your app module declaration.

      var myApp = angular.module("myApp",['ngRoute']);
    

    and also include the script:

    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"></script>
    

    Using ngRoute : In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x or later, be sure that you've installed ngRoute.

    Additional Note:- Most of the times when you click on the link in the huge error you get it will navigate to the error description page in angular documentation website and it will have clue on what may have cause the issue.