all the mistakes

ATM: Angular Module - Definition vs Loading

Angular uses a very similar statement to define a new module and to load an existing module. For example, the initial definition for my stage-hand app was:

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

While the statement to load my stage-hand module (e.g., at the beginning of the controller and service files) was:

1
var shApp = angular.module('shApp')

Note that the only differences are , [] and ;, so it’s easy to make a mistake.

To make matters worse, the symptoms were really cryptic.

Symptoms

Firefox

  • My html showed up, but my controller variables weren’t being displayed.
  • My Firefox console showed…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. index.html
   "Error: [$injector:unpr] http://errors.angularjs.org/1.2.26/$injector/unpr?p0=eventFactoryProvider%20%3C-%20eventFactory
   C/<@file:///Users/metasean/projects/stage-hand/js/angular.min.js:6:443
   gc/l.$injector<@file:///Users/metasean/projects/stage-hand/js/angular.min.js:36:196
   c@file:///Users/metasean/projects/stage-hand/js/angular.min.js:34:300
   gc/p.$injector<@file:///Users/metasean/projects/stage-hand/js/angular.min.js:36:266
   c@file:///Users/metasean/projects/stage-hand/js/angular.min.js:34:300
   d@file:///Users/metasean/projects/stage-hand/js/angular.min.js:35:1
   f/<.instantiate@file:///Users/metasean/projects/stage-hand/js/angular.min.js:35:163
   Pd/this.$get</<@file:///Users/metasean/projects/stage-hand/js/angular.min.js:67:415
   N/<@file:///Users/metasean/projects/stage-hand/js/angular.min.js:54:23
   r@file:///Users/metasean/projects/stage-hand/js/angular.min.js:7:369
   N@file:///Users/metasean/projects/stage-hand/js/angular.min.js:53:393
   g@file:///Users/metasean/projects/stage-hand/js/angular.min.js:47:256
   z/<@file:///Users/metasean/projects/stage-hand/js/angular.min.js:46:374
   fc/c/</<@file:///Users/metasean/projects/stage-hand/js/angular.min.js:18:310
   Zd/this.$get</k.prototype.$eval@file:///Users/metasean/projects/stage-hand/js/angular.min.js:112:57
   Zd/this.$get</k.prototype.$apply@file:///Users/metasean/projects/stage-hand/js/angular.min.js:112:341
   fc/c/<@file:///Users/metasean/projects/stage-hand/js/angular.min.js:18:268
   d@file:///Users/metasean/projects/stage-hand/js/angular.min.js:35:27
   fc/c@file:///Users/metasean/projects/stage-hand/js/angular.min.js:18:248
   fc@file:///Users/metasean/projects/stage-hand/js/angular.min.js:18:380
   Xc@file:///Users/metasean/projects/stage-hand/js/angular.min.js:17:422
   @file:///Users/metasean/projects/stage-hand/js/angular.min.js:215:30
   a@file:///Users/metasean/projects/stage-hand/js/angular.min.js:145:67
   oe/c/<@file:///Users/metasean/projects/stage-hand/js/angular.min.js:31:223
   r@file:///Users/metasean/projects/stage-hand/js/angular.min.js:7:288
   oe/c@file:///Users/metasean/projects/stage-hand/js/angular.min.js:31:207
   " 
   angular.min.js:92
   e/<() angular.min.js:92
   Rd/this.$get</<() angular.min.js:68
   Zd/this.$get</k.prototype.$apply() angular.min.js:112
   fc/c/<() angular.min.js:18
   d() angular.min.js:35
   fc/c() angular.min.js:18
   fc() angular.min.js:18
   Xc() angular.min.js:17
   <anonymous> angular.min.js:215
   a() angular.min.js:145
   oe/c/<() angular.min.js:31
   r() angular.min.js:7
   oe/c() angular.min.js:31

Canary Chrome

  • My html showed up, but my controller variables weren’t being displayed.
  • My Chrome console showed…
1
2
3
4
5
6
7
8
9
10
11
Error: [$injector:unpr] errors.angularjs.org/1.2.26/$injector/unpr?p0=eventFactoryProvider%20%3C-%20eventFactory
   at Error (native)
   at angular.min.js:6:450
   at angular.min.js:36:202
   at Object.c [as get] (angular.min.js:34:305)
   at angular.min.js:36:270
   at c (angular.min.js:34:305)
   at d (angular.min.js:35:6)
   at Object.instantiate (angular.min.js:35:165)
   at angular.min.js:67:419
   at angular.min.js:54:25

Mistake

I had started my controller file off with …

1
var app = angular.module('shApp', [])

instead of

1
var app = angular.module('shApp')