CODEWITHSUNDEEP
javascriptangularjsdata-binding
Rivas
Rivas

Reputation: 85

AngularJS Data Binding is not happening

I am just playing around with AngularJS and I wrote a small piece of code which I have shared here. But for some reason, the binding of data doesnt happen. Here is the HTML and JS code for those who do not want to go to the plucker site.

first.html

<!doctype html>
<html ng-app="firstApp">
<head>
    <title>First Angular JS</title>
    <script src="/lib/angular.min.js"></script>
    <script src="/js/first.js"></script>
</head>
<body>
    <div ng-controller="FirstController">
        <span>Name:</span>
        <input type="text" ng-model="first">    
        <input type="text" ng-model="last">
        <button ng-click='updateMessage()'>Message</button>
        <hr>{{heading + message}}
    </div>

</body>
</html>

first.js

var firstApp = angular.module('firstApp',[]);
firstApp.controller = ('FirstController',function($scope)
{
  $scope.first = "Some";
  $scope.last = "one";
  $scope.heading = "Message: ";
  $scope.updateMessage = function()
    {
      $scope.message = 'Hello' + $scope.first + ' ' + $scope.last + '!';
    };
  });

In the HTML, I am using express to redirect calls to its appropriate places

node_server.js

var express = require('express');
var app = express();
app.use('/', express.static('./static')).
    use('/images',express.static('./images')).
    use('/lib',express.static('./lib/angular-1.2.22'));
app.listen(8080);

The output is showing {{message + heading}}. Does anyone have any ideas why this wouldnt work?

Upvotes: 1

Views: 135

Answers (2)

betomoretti
betomoretti

Reputation: 2196

Try this:

firstApp.controller('FirstController', ['$scope', function($scope) { ...

Doc's for controller in Angular

Upvotes: 1

gconsidine
gconsidine

Reputation: 155

The issue is in the way you're declaring your controller.

You have:

firstApp.controller = ('FirstController',function($scope) ...

It should be:

firstApp.controller('FirstController', function($scope) ...

Upvotes: 2

Related Questions