Question

我刚开始学习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;

}]);

我什至不知道我做错了什么。

我附上以下屏幕截图：

Answer 1

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

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

编辑：

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

这是工作中的 DEMO

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

1 个答案: