javascript - AngularJS应用程序未显示要查看的数据

我刚开始学习AngularJS。当我运行应用程序时，它没有在视图中显示数据。

这是我的html页面。
index.html：

<!DOCTYPE html>
<html ng-app="tutorialApp">
<head>
    <meta charset="utf-8">
    <title>Angular Tutorial</title>
    <script src="lib/angular.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/tutorialCtrl.js"></script>
</head>
<body ng-controller="TutorialCtrl">
        <h1>{{tutorialObject.title}}</h1>
        <h2>{{tutorialObject.subTitle}}</h2>
        <hr/>Number: {{2+2}}
        <p>{{tutorialObject.bindOutput}}</p>
</body>
</html>

app.js：

var app = angular.module('tutorialApp', ['tutorialCtrlModule']);

tutorialCtrl.js：

angular.module('tutorialCtrlModule', [])

.controller('ToturialCtrl', ['$scope', function($scope){
    //Code

    $scope.tutorialObject = {};
    $scope.tutorialObject.title = "Angular Tutorial";
    $scope.tutorialObject.subTitle = "Basic";
    $scope.tutorialObject.bindOutput = 2;

}]);

我什至不明白我做错了什么。

我附上以下屏幕截图：

javascript - AngularJS应用程序未显示要查看的数据-LMLPHP

最佳答案

您需要更改控制器的顺序，因为tutorialAppp取决于tutorialCtrlModule

 <script src="js/controllers/tutorialCtrl.js"></script>
 <script src="js/app.js"></script>

编辑：

您在html中犯了另一个拼写错误，控制器名称为“ TutorialCtrl”，而应为ToturialCtrl

这是工作中的DEMO

关于javascript - AngularJS应用程序未显示要查看的数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55936340/