Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Payne McDowell
Payne McDowell
535 Points
Posted by Payne McDowell
Payne McDowell
535 Points

Receiving Error: Argument 'AppCtrl' is not a function, got undefined

Hello,

I am 10 minutes into the "Building with AngularJS and APIs" workshop. I have created the AppCtrl function in my controllers.js file. When I view the index.html file in my browser, I see {{ name }} and the console shows "error: Argument 'AppCtrl' is not a function, got undefined". Google searches suggest that this may be related to modules, but so far I've not created a module in this workshop.

I don't know how to resolve this error.

Here is a link to a CodePen with my HTML and JS: https://codepen.io/PayneMcDowell/pen/aNWeXg

I have also included my full HTML below, since CodePen instructed me to only add the <body> content.

Thanks for the help!

''' html <!DOCTYPE html> <html lang="en" ng-app > <head> <meta charset="utf-8"> <title>Dabbble</title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"/> </head> <body ng-controller="AppCtrl"> <div class="container"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#/">Dabbble</a> <ul class="nav"> </ul> </div> </div> <h1>Hello {{ name }}</h1> <input type="test" ng-model="name" > </div> <script src="lib/angular/angular.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script>
</body> </html> '''

Amandeep Dindral
Amandeep Dindral
8,915 Points

Same problem here. Anyone?

Amandeep Dindral
Amandeep Dindral
8,915 Points

Payne McDowell Hey. So I was having the exact same problem. I did a little research and came to find that it has to do with the version of angular used in this video I think or how the Angular library was added in the script tag. This solved the problem for me:

Delete your script tag containing the Angular library along with the angular file in your file tree

Replace with :

'''html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js" type="text/javascript"></script>

,,,

Let me know if this works for you!

2 Answers

Payne McDowell
Payne McDowell
535 Points
Payne McDowell
Payne McDowell
535 Points

thanks Amandeep, that did the trick!

Amandeep Dindral
Amandeep Dindral
8,915 Points

Payne McDowell I am glad I was able to help! Please dont forget to upvote my answer! Thanks!

Amandeep Dindral
Amandeep Dindral
8,915 Points
Amandeep Dindral
Amandeep Dindral
8,915 Points

Payne McDowell Hey. So I was having the exact same problem. I did a little research and came to find that it has to do with the version of angular used in this video I think or how the Angular library was added in the script tag. This solved the problem for me:

Delete your script tag containing the Angular library along with the angular file in your file tree

Replace with :

'''html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js" type="text/javascript"></script>

,,,

Let me know if this works for you!