My AngularJS/HTML <script src> tag syntax isn't correct

Question

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.

What error do you observe in the browser's development tools? What is the full URL of the page being viewed? What is the full URL of the request for app.js? What is the server's response to that request? — David, Commented Apr 8 at 16:14
Hey, David, Thanks for responding. For your questions: 1. Uncaught TypeError: [].controller is not a function at app.js:1:26, 1a. Uncaught Error: [$injector:modulerr] errors.angularjs.org/1.4.7/$injector/modulerr?... (too many characters for editor) 2. File:///C:/Users/erica/Documents/Online%20Courses/Udemy/JavaScript%20Bootcamp/section10%20angularJS%20abstracting%20the%20controller.html — skipper0802, Commented Apr 8 at 16:25
Then it would appear that the problem descripion in the question is inaccurate. The file clearly is resolving and being downloaded and used by the browser. But a specific error is being produced. What research have you done on that error? As an aside, you're running HTML files directly from the file system. This can be artificially limiting and can produce otherwise difficult bugs. If you can, using a web server (even just a development server in your IDE) would likely be easier in the long run. — David, Commented Apr 8 at 16:34
Then I've chosen the wrong words for my (initial) question. The two specific errors in the console are a new reveal for me. Checking on those now. Thank you. — skipper0802, Commented Apr 8 at 16:37

skipper0802 · Accepted Answer · 2025-04-10 15:11:06Z

0

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;  
});

answered Apr 10 at 15:11

skipper0802

495 bronze badges

Add a comment |

Collectives™ on Stack Overflow

My AngularJS/HTML <script src> tag syntax isn't correct

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related