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?
3 answers
solution1
3 ACCPTED 2016-06-17 12:16:17
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.
solution2
0 2016-06-17 12:16:05
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>
solution3
-1 2016-06-17 12:09:52
You are loading 2 different versions of angular and I believe they are conflicting. Your angular-route.js script 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.