Simer Simer - 2 years ago 182
AngularJS Question

Angular error [$injector:modulerr] - injector nomod

I have just created module and controller for my functionality and got following error:

Error: [$injector:modulerr]$injector/modulerr?p0=ContactsApp&p1=%5B%24injector%3Anomod%5D%

Following is my html code:

<div ng-app="ContactsApp" class="container">
<div class="row" ng-controller="contactsCtrl">
<div class="col-sm-12 padding-0"> <h2 class="text-center"> Contacts</h2>
<div class="panel panel-default">
<div class="panel-heading c-list">
<span class="title">Contacts</span>
<div class="pull-right">
<a data-toggle="modal" data-target="#upload-contacts" href="#upload-contacts" data-placement="top" title="Add Contact">
<span class="title "><i class="glyphicon glyphicon-plus"></i>Add</span>


<!-- My contacts page -->
{% if contributors.details or importedContacts.details%}
{% if not role %}
{% include 'mpb/mycontacts/mycontacts_contributed_team.html' %}
{% else%}
{% include 'mpb/mycontacts/mycontacts_contributors_rolewise.html' %}
{% endif %}

{% elif not contributors.details and not importedContacts.details %}
<div class="no-contacts">
<h3 class="no-contacts-text">No Contacts to show</h3>
{% endif %}

<div id="upload-contacts" class="modal fade bs-example-modal-sm" tabindex="1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content bg-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center" id="mySmallModalLabel">Import your contacts &nbsp; <i class="glyphicon glyphicon-question-sign" rel="tooltip" title="click for help."></i></h4>
<div class="modal-body">
<!--upload your contacts-->

<div id="dvImportSegments" class="fileupload ">
<div class="btn btn-primary btn-block image-preview-input">
<span class=" glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Import Contacts</span>
<input type="file" id="contactFileUpload" accept=".csv .vCard" name="File Upload"/> <!-- rename it -->
</div><!--end of upload your contacts--><br>

Below is js code:

var app = angular.module('contactsApp', ['djangular-confirm', 'djangular-alert'])
.config(function ($httpProvider, $interpolateProvider) {

$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.headers.common['X-CSRFToken'] = '{$ csrf_value $}';

app.controller('contactsCtrl', function ($scope, $http, $location, $djconfirm, $djalert) {


files I have included

<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/angular.min.js"></script>
<script src="/djangular/js/django-angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/angular-route.min.js"></script>

Answer Source

The error is showing that there is no module named ContactsApp which is what is expected as main app module due to your ng-app value.

You registered contactsApp which is not the same due to case sensitivity.

In other words: ContactsApp != contactsApp

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download