Just dipping my toes into the world of Angular today. Found a tutorial at Angular JS in 30 mins
This little project involves setting up basic databinding in Angular. The code features an input box that updates with whatever is typed next to it. As someone coming from Java and Spring MVC, it all seems straightforward when the code looks like this:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test Angular</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="maincontroller.js"></script>
</head>
<body>
<div id="content" ng-app="SampleAngular" ng-controller="MainController">
<input type="text" ng-model="inputVal">{{ inputVal }}
</div>
</body>
</html>
app.js
var app = angular.module('SampleAngular', []);
maincontroller.js
app.controller("MainController", function($scope){
$scope.inputVal = "";
}
);
Surprisingly, even with an empty body for the controller:
maincontroller.js
app.controller("MainController", function($scope){
}
);
The same functionality still works in the view.
a) How does it work without a defined model in the controller? b) No errors or warnings indicate any issue - is this normal behavior for Angular?
Thanks in advance for any insights.