Experimenting with AngularJS, I created a small code snippet that doesn't seem to bind data properly. Here is the HTML and JS code for those who prefer not to visit the provided link:
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 + '!';
};
});
The HTML file uses express to redirect calls as needed.
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 currently displays {{message + heading}}. Any suggestions on how to fix this issue?