AngularJS應用程序未顯示要查看的數據

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

這是工作中的演示

AngularJS應用程序未顯示要查看的數據

問題描述

1 個解決方案

解決方案1
2 已采納 2019-05-01 12:33:25

AngularJS應用程序未顯示要查看的數據

問題描述

1 個解決方案

解決方案1 2 已采納 2019-05-01 12:33:25

解決方案1
2 已采納 2019-05-01 12:33:25