AngularJs- Failed to instantiate module

Question

Before the problem: What we are trying to do is:

I will give a script tag and a piece of javascript to another domain. It will be kind of a widget project. When other site puts my javascript into their website, my javascript will be loaded and inject widget's html.

Widget's html is built with Angular and it's working fine when i directly call that html but it's not working when injected to another page.

Here is some code.

This is how i inject widget's html:

var widget = {
    initialize : function(containerId)
    {

        $("#" + containerId).load("widget.html");

    }
}

My widget's html

  <script src="http://localhost:8000/bower_components/angular/angular.js"></script>
<script src="../Controllers/phoneController.js"></script>


<div ng-app="phonecatApp">
      <ul ng-controller="PhoneListCtrl">
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
      {{2+2}}
    </li>
  </ul>


</div>


</div>

Aand my controller:

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

phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

The exception in the console:

Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to: Error: [$injector:nomod] Module 'phonecatApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Edit: There is {{2+2}} code in my html, just to test Angular. It's not evaluated by Angular and printed into html as it is.

Have you made sure the path to phoneController.js is correct? Since you are using a relative path it might not be pointing to where you think. — Patrick Evans
@PatrickEvans I'm sure that controller is loaded. I can see that in network section of dev panel. — erkan demir
I would also look into if the ng-app is attempting to boot the app before your phoneController.js code has been loaded. (Normally that would wait for domready, but that's likely already happened). — Hargo
@Hargobind how can i understand that? controller is loaded after angularjs but i don't know if it's booting before the controller or not. I have tried to bootstrap the angular manually at document.ready but it's still the same exception. — erkan demir
doing what you are doing you should manually bootstrap angular — charlietfl

nairys nairys · Accepted Answer · 2014-12-24T21:08:26

Try this code:

phonecatApp.controller('PhoneListCtrl', '$scope', [function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi', 'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™','snippet': 'The Next, Next Generation tablet.'}
  ];
}]);

All I did was change the dependency injection syntax. I suspect that your problem was occurring when your JS was getting minified. Using the style I've written will solve that problem.

AngularJs- Failed to instantiate module

1 Answers