Question

我是Angular的新手，正在玩ngRoute。出于某种原因，即使我正在加载angular-route.js模块，我仍然会列出错误。我认为这些路径可能存在一些问题，但我无法找到解决方案。代码粘贴在下面。重要的文件是student.js和student.html。 angular.html和testCtrl.js是我构建的简单计算器的文件，应该在点击student.html中的链接时加载。

student.js

angular.module('testing', ['ngRoute'])  
    .config(function($routeProvider){
        $routeProvider.when('/angular', {
            controller: "TestCtrl",
            templateUrl: 'angular.html'
        });
    })

student.html

<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
  <script src = "student.js" type="text/javascript"></script>
  <script src = "testCtrl.js" type="text/javascript"></script>
</head>
<body ng-app = "testing">
    <a href = "#/angular">Angular Calculator</a>
    <div ng-view></div> 
</body>
</html>

angular.html

<!doctype html>
<html ng-app='testing'>
<head>
<title>Angular Calculator</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js">       </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="testCtrl.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href = "angular.css" rel = "stylesheet">
</head>
<body id = "myBody">
<div ng-controller = "TestCtrl">
<h1>{{title}}</h1>
<input class = "calculation-input" ng-model = "number1" placeholder = "Enter first number" id = "first" type = "text">
<br>
<input class = "calculation-input" ng-model = "number2" placeholder = "Enter second number" id = "second" type = "text">
<br>
<input ng-keypress = "calculate()" class = "calculation-input" ng-model = "operation" placeholder = "Enter an arithmetic operation here" id = "op" type = "text">
<br>
<input ng-click = "calculate()" type = "submit" value = "Submit" id = "calc">
<br>
<span id = "calculation">{{number1}}{{operation}}{{number2}}</span>
</div>
</body>
</html>

testCtrl.js

angular.module('testing', ['ui.bootstrap'])
.controller("TestCtrl", function($scope){
$scope.title = "Angular Calculator";

$scope.calculate = function(){
  var firstNumber = parseInt($('#first').val());
  var secondNumber = parseInt($('#second').val());
  var operation = $('#op').val();
  $('#calculation').html($scope.operate(operation, firstNumber, secondNumber));
}

$scope.operate = function(operation, firstNum, secondNum){
switch(operation){
  case '*':
    return firstNum * secondNum;
    break;

  case '+':
    return firstNum + secondNum;
    break;

  case '-':
    return firstNum - secondNum;
    break;

  case '/':
    return firstNum / secondNum;
    break;
  }
}
});

感谢您的帮助！

Answer 1

您正在创建模块两次：

<强> student.js

angular.module('testing', ['ngRoute'])

<强> testCtrl.js

angular.module('testing', ['ui.bootstrap'])

第二个覆盖第一个。要解决此问题，请在student.js：

中声明模块的所有依赖项

angular.module('testing', ['ngRoute', 'ui.bootstrap'])

然后，要稍后在testCtrl.js中访问该模块，请在没有第二个参数的情况下调用它：

angular.module('testing')
.controller("TestCtrl", function($scope){
...

<强>更新：

此外，Angular是专为单页面应用程序设计的，因此您的模板应该只是部分内容，而不是代码示例中angular.html的完整HTML文档。

因此，您应该在students.html中加载所有脚本，并且应该删除包含要在ng-view中显示的内容的所有内容。

<强> student.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src = "student.js" type="text/javascript"></script>
    <script src = "testCtrl.js" type="text/javascript"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href = "angular.css" rel = "stylesheet">
</head>
<body ng-app = "testing">
    <a href = "#/angular">Angular Calculator</a>
    <div ng-view></div> 
</body>
</html>

<强> angular.html

<div ng-controller = "TestCtrl">
    <h1>{{title}}</h1>
    <input class = "calculation-input" ng-model = "number1" placeholder = "Enter first number" id = "first" type = "text">
    <br>
    <input class = "calculation-input" ng-model = "number2" placeholder = "Enter second number" id = "second" type = "text">
    <br>
    <input ng-keypress = "calculate()" class = "calculation-input" ng-model = "operation" placeholder = "Enter an arithmetic operation here" id = "op" type = "text">
    <br>
    <input ng-click = "calculate()" type = "submit" value = "Submit" id = "calc">
    <br>
    <span id = "calculation">{{number1}}{{operation}}{{number2}}</span>
</div>

Angularjs - 未捕获错误angular.js：78

1 个答案: