CODEWITHSUNDEEP
javascriptangularjs
Abhrajyoti Kanrar
Abhrajyoti Kanrar

Reputation: 45

AngularJS application not showing data to view

I have newly started learning AngularJS. When I am running the application it is not showing the data to the view.

Here is my html page. 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;

}]);

I could not even understand what could be the wrong thing i have done.

I am attaching the screenshot below:

enter image description here

Upvotes: 1

Views: 43

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222522

You need to change the order of controller as tutorialAppp is dependent on tutorialCtrlModule

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

EDIT:

You have made another typo mistake in the html, controller name as "TutorialCtrl" whereas it should be ToturialCtrl

Here is the working DEMO

Upvotes: 2

Related Questions