AngularJS 路由加载错误

Question

我想知道你是否可以帮忙。

我正在学习 AngularJS 并决定使用 Angular 路由库。我在尝试加载它时总是出错。

 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)

这是我的代码，我已经更改了链接以查看有什么效果但没有享受。

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

谢谢，有什么想法吗？

Answer 1

您正在加载 angular 的 2 个不同版本，我认为它们存在冲突。您的 angular-route.js 脚本版本比 angular.js 脚本更新。尝试将其更新为以下内容。

<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>

Answer 2

您将包含定义的脚本放在 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"/>


</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>

Answer 3

问题实际上是您的 html 标记。如果您将其从

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

至

<section ng-view></section>

您应该会看到模板正在加载（前提是其他错误不会出现在您未提供的关键字 list.html 文件中。

我用我自己的一个简单关键字-list.html文件设置了你的代码，它工作正常。

AngularJS 路由加载错误

AngularJS Route loading error

javascript

angularjs

ngroute