Angular js binding expression does not show value

Question

The index.html page looks like this.

<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="/js/script.js"/>
<script data-require="angular.js@*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
    {{person.firstName}}
</div>
</div>
</body>
</html>

The script.js file looks like this:

var MainController = function($scope) {
var person = {
    firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};

But when I boot up the application my page shows :

{{message}}

{{person.firstName}}

and not the values that it should. Am I missing something here? I am using spring boot. I have debugged the chrome and have seen the js file loading properly, it even hits the debugger point in the js file,hence the file loading is not the problem i suppose.

UPDATE- THIS WORKED

var MainController = function($scope) {
var person = {
    firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};


angular.module('mainApp', [])
.controller('MainController', MainController);

index.html

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
    {{person.firstName}}
</div>
</div>
</body>
</html>

score 0 · Answer 1 · answered Nov 26 '16 at 16:32

0

You need to define the module and the controller,

HTML:

<body ng-app="DemoApp" ng-controller="DemoController">
  {{message}} {{person.firstName}}
</body>

Controller:

var app = angular.module('DemoApp', ['angular.filter'])
app.controller('DemoController', function($scope) {
var person = {
    firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";

});

DEMO

answered Nov 26 '16 at 16:32

Sajeetharan

216,225
63
350
396

Just saw, why did you add angular.filter. – Nagendra555 Nov 26 '16 at 16:54
@Nagendra555 that is not needed – Sajeetharan Nov 26 '16 at 16:55

score 0 · Accepted Answer · edited May 23 '17 at 12:33

0

Since angular 1.3+ global function declaration of controller haven't been supported. So you have first create an angular module and then bind all of its angular component to it.

Also move /js/script.js right after angular.js reference with closing </script> tag.

Code

angular.module('mainApp', [])
.controller('MainController', MainController)
function MainController($scope) {
    var person = {
        firstName: "Nagendra"
    };
    $scope.person = person;
    $scope.message = "Hello Angular!";
};

Then do add mainApp module inside ng-app directive like ng-app="mainApp" on html tag.

Demo Here

edited May 23 '17 at 12:33

Community

1
1

answered Nov 26 '16 at 16:33

Pankaj Parkar

134,766
23
234
299

Thanks, I changed my angular server to. `` and it worked. – Nagendra555 Nov 26 '16 at 16:37
That's what I said in my answer, that doesn't mean you should downgrade your application to make it work.. upgrade it to latest 1.5.8 and just enjoy the coolest angular.. – Pankaj Parkar Nov 26 '16 at 16:38
its saying module mail app is not available when i see in the console. – Nagendra555 Nov 26 '16 at 16:46
Ok, so script file for angular needed to be moved up, but still I am not able to see the value. – Nagendra555 Nov 26 '16 at 16:50
@Nagendra555 you should move `` right after angular js – Pankaj Parkar Nov 26 '16 at 16:59
@Nagendra555 check updated answer, it has the same thing what you had in question, all things are corrected in plunk version. – Pankaj Parkar Nov 26 '16 at 17:03

Angular js binding expression does not show value

2 Answers2