CODEWITHSUNDEEP
angularjsangularjs-routing
Kishore Kumar Korada
Kishore Kumar Korada

Reputation: 1264

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?

Upvotes: 2

Views: 1025

Answers (2)

Rick
Rick

Reputation: 325

This is the Google API link to AngularJS (minified):

 https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js

Note the httpS

Your original angular reference pointed to version 1.2.28, which is an unknown file on Google's servers. For what you'll need to get started, the version doesn't need to be the most current. Often times only a stable version will make it to the CDN unless otherwise noted.

As for your code, it works just fine as long as you have the files in your app directory:

  1. templates/getAnimals.html
  2. templates/getBirds.html

--------- angularjs v.1.0.7 functional --------- index.html (identical to the original post, just using the script reference:

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

app.js (identical to the original)

templates/getAnimals.html

<h1>Animals</h1>

templates/getBirdss.html

<h1>Birds</h1>

Output :: on load:

Click Here to get Animals
Click Here to get Birds

after clicking animals:

Click Here to get Animals
Click Here to get Birds

Animals

Upvotes: 0

PSL
PSL

Reputation: 123739

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.

Upvotes: 5

Related Questions