AngularJS Route loading error

Question

I wondered if you could help.

I am learning AngularJS and have decided to make use of the Angular Route lib. I keep getting an error when trying to load it.

 angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=jargonBuster&p1=Err…loudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.0%2Fangular.min.js%3A18%3A3)

Here is my code, I have changed up the links to the see what works with no enjoy.

HTML

<!DOCTYPE html>
<html ng-app = "jargonBuster">
<head>
  <meta charset="utf-8">
  <title>Angular.js Example</title>
  <link type="text/css" rel="stylesheet" href="style.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>

</head>
<body>
  <section ng-controller="MainCtrl"></section><!-- VIEW -->
</body>
</html>
<script src="script.js"></script>

JS

var app = angular.module('jargonBuster', ['ngRoute']); 

//router
app.config(function($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl:'keyword-list.html',
        controller: 'MainCtrl'
    }).
    otherwise({
        redirectTo: '/'
    });
});


// The Controller
app.controller('MainCtrl', function($scope, $http) {
    $http.get("getdecks.php").success(function(data) { //Gets data from The Decks Table
        $scope.deckData = data;});
    $http.get("getcards.php").success(function(data) { //Gets data from The Cards Table
        $scope.cardsData = data;});

    $scope.sortField = 'keyword';   
    $scope.reverse = true;

});// End of the controller

Thanks, any ideas?

Also another observation. Your script that loads angular-route is 1.3.14 but your main angular script is 1.3.0. Try changing the script for angular.js to 1.3.14 — Lexi
– Lexi, Commented Jun 17, 2016 at 12:08

tokkov · Accepted Answer · 2016-06-17 12:16:17Z

3

The issue is actually your html markup. If you change it from

<section ng-controller="MainCtrl"></section>

to

<section ng-view></section>

You should see the template loading (provided other errors don't crop up down stream in your keyword-list.html file which you didn't provide.

I set up your code with a simple keyword-list.html file of my own and it works fine.

answered Jun 17, 2016 at 12:16

tokkov

2,9691 gold badge15 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

abdoutelb · Accepted Answer · 2016-06-17 12:16:05Z

0

you putting you script that holds definition outside the html

you may try this order

    <!DOCTYPE html>
<html ng-app = "jargonBuster">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<link type="text/css" rel="stylesheet" href="style.css"/>


</head>
<body>
<section ng-controller="MainCtrl"></section><!-- VIEW -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>
<script src="script.js"></script>
</body>
</html>

answered Jun 17, 2016 at 12:16

abdoutelb

1,0631 gold badge15 silver badges34 bronze badges

5 Comments

Chris Newman Over a year ago

You actually don't need to do this. It's way more common to have your js scripts in the head tag, unless the scripts are for fancy animations.

abdoutelb Over a year ago

the related issue through there is the script that holds module is define outside html

Chris Newman Over a year ago

Now I see what you mean when you said his script was outside the html, I didn't notice he put it all the way at the bottom of the file. He should put his own js scripts after the angular js scripts in the head tag

abdoutelb Over a year ago

but why should i put my scripts in head tag, iam always try to load Html elements first and let the js do its thing after page render ?

Chris Newman Over a year ago

I guess it depends on what kind of code you write. I usually interpolate at least a few things on any given page. Even when using ng-cloak to try and prevent that weird split second flash where {{interpolate_me}} is visible on the page, the flash will still happen if your js script tag is in the body. Granted, this isn't a page breaking situation, just seems better from a user experience perspective to not have that happen.

Lexi · Accepted Answer · 2016-06-17 12:09:52Z

-1

You are loading 2 different versions of angular and I believe they are conflicting. Your angular-route.jsscript is a newer version than your angular.js script. Try updating it to below.

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

answered Jun 17, 2016 at 12:09

Lexi

3242 gold badges10 silver badges18 bronze badges

Collectives™ on Stack Overflow

AngularJS Route loading error

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related