I've tried these tags separately in my AngularJS/HTML course. The first and second are the instructor's script tags from his presentation setup. The third and fourth tags refer to my computer. His app.js file is unchanged and resides in the same (local) directory folder as my .html file. In this use-case, I'm using the most recent versions on a Windows 10 OS machine, Notepad++ as my IDE, and Chrome as the browser.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<!--<script src="app.js"></script>-->
<!--<script src="C:/Users/erica/Documents/Online Courses/Udemy/JavaScript Bootcamp/app.js"></script>-->
<script src="./app.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div>
<label>First number:</label>
<input type="number" ng-model="main.num1" /><br />
<label>Second number:</label>
<input type="number" ng-model="main.num2" />
<hr>
<h1>Sum: {{main.num1 + main.num2}}</h1>
<h1>Product: {{main.num1 * main.num2}}</h1>
</div>
</body>
</html>
The instructor's app.js code:
angular.module('app', [].controller('MainController', function() {
this.num1 = 0;
this.num2 = 0;
}));
After due research diligence, I thought this would be straight-forward but I think I'm missing something obvious. Please advise.
This change in the app.js file works as desired:
/*angular.module('app', [].controller('MainController', function() {
this.num1 = 0;
this.num2 = 0;
}));*/
var app = angular.module('app', []);
app.controller('MainController', function() {
this.num1 = 0;
this.num2 = 0;
});