"Uncaught object" when adding AngularJS to Brunch app

Question

Preface: As I am new to both AngularJS and Brunch, I want to learn the basics and build and app from scratch (i.e. from the dead-simple Brunch skeleton). I am well aware that there exist skeletons that specifically deal with bootstrapping an AngularJS/Brunch app and I have been studying their code in order to find out what "makes them work". But being the newbie I am, I don't see the solution to my problem...

The Problem: As long as I add ng-app (without any value) to the html element, AngularJS works just fine. But as soon as I add a value (i.e. ng-app="MyApp") to this attribute, AngularJS stops working. The console in Chrome tells me that it encountered an "Uncaught object" in line 1695 of angular.js.

It seems that the javascript added by Brunch is causing this: If I remove the code at the very top generated by Brunch in the app.js file of the public folder, again it works. But clearly that can't be the solution to my problem.

Here is the code of my app/assets/index.html:

<html ng-app="myApp">
    <head>
        <title>Test</title>
    </head>
    <body>
        <script src="app.js"></script>
    </body>
</html>

That's the code in my app/app.coffee (which is concatenated with Brunch and AngularJS code in the resulting public/app.js):

angular.module("myApp", [])

The question: What am I missing? I see that in the specific skeletons the index.html file contains a <script>require('MyApp')</script>, but adding it doesn't solve the problem.

Any hint for a Brunch-rookie like me is very appreciated. Thanks!

Thanks for the hint. Actually, that was a typo in my snippets and it is ng-app="myApp" (the same both in the html and coffee files). I have corrected it in my question. — Michael Schmidle

Michael Schmidle Michael Schmidle · Accepted Answer · 2014-06-30T11:18:36

Okay, I finally figured it out. Indeed there needs to be the additional <script>require('app');</script> snippet. However, make sure the parameter for this require() call matches the file name in which your Angular application is created.

Example:

Your HTML tag uses ng-app="myAwesomeApp". The corresponding Javascript code needs to reference that with angular.module("myAwesomeApp", []).
If your Javascript file (in which the Angular module is created) is simply called app.js, then the corresponding <script>require('app');</script> should reflect that. If you also choose to name your Javascript file myAwesomeApp.js, then match it with <script>require('myAwesomeApp');</script>.

"Uncaught object" when adding AngularJS to Brunch app

1 Answers