Error when starting a basic AngularJS app and controller

Question

I'm having trouble getting a basic app and controller working, although I've used this pattern many times before without issues.

Here's the relevant part of my front-end template (I'm using jinja2 with a Python webapp2 backend):

{% block js %}
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
    <script src="/static/js/widget-controller.js"></script>
{% endblock %}

{% block widgetbody %}
  <body class="partner_widget" ng-app="PartnerWidgetApp">
    <div id="header">Recommended Wired Expert</div>
    <div class="body">
      <div id="expert_content">
        <figure class="headshot">
          <img src="{{ expert_user_profile_image }}" />
        </figure>
        <div class="description" ng-controller="PartnerWidgetController">
          <div ng-include="'/static/angular-partials/widget/partner_widget_description.html'">
          </div>
        </div>
      </div>
      <div id="action_content">
        <a href="#" id="cta">Here's the CTA</a>
      </div>
    </div>
{% endblock %}

Here's my AngularJS file:

var PartnerWidgetApp = angular.module('PartnerWidgetApp');

PartnerWidgetApp.controller('PartnerWidgetController', ['$scope',
    function($scope) {
        $scope.description_text = "this is test text that you should see";
    }
]);

Here are the contents of the included "/static/angular-partials/widget/partner_widget_description.html" file:

{{ description_text }}

And here are my errors in the console:

Uncaught Error: No module: PartnerWidgetApp angular.min.js:17
Error: Argument 'PartnerWidgetController' is not a function, got undefined
at Error (native)
at eb (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:16:466)
at va (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:17:33)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:53:60
at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:44:43
at o (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:7:43)
at l (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:43:408)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:39:419)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:39:436)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:39:436)

To my knowledge, the Angular library and my files are being loaded correctly, and the names of the app and controller are consistent with their assignments in the template. Can anyone help diagnose this issue? Thanks for any help.

Could this be a jQuery compatibility issue? Does Angular use the jQuery library? Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite. Due to a change to use on()/off() rather than bind()/unbind(), Angular 1.2 only operates with jQuery 1.7.1 or above. However, Angular does not currently support jQuery 2.x or above. docs.angularjs.org/misc/faq — celerno
– celerno, Commented Jul 30, 2014 at 17:47
does var PartnerWidgetApp = angular.module('PartnerWidgetApp', []); fix the problem? I've always included the empty array in the module line, even if no plugins are being loaded. — Ronnie
– Ronnie, Commented Jul 30, 2014 at 17:51

Fourth · Accepted Answer · 2014-07-30 17:54:42Z

2

var PartnerWidgetApp = angular.module('PartnerWidgetApp');

This is the wrong way to initialize a module, try:

var PartnerWidgetApp = angular.module('PartnerWidgetApp', []);

answered Jul 30, 2014 at 17:54

Fourth

9,3811 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error when starting a basic AngularJS app and controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related