In Angular.js I am getting unknown service provider when trying to add the animation module. Is it because I am defining modules without "var ="?

Question

The angular tutorial switches back and forth between defining modules like this:

angular.module('appname', ['phonecatFilters','phonecatAnimations']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
   ...
      };*/

and like this:

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',

  'phonecatAnimations',
  'phonecatControllers',
  'phonecatFilters',
  'phonecatServices'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      etc...
      });
  }]);

I am not able to get the animation module loaded in my already working app that defines them the first way. I get a "missing provider" error. Is this because I am mixing the methods of defining modules? It is not clear from their documentation and they also switch the entire app between one method and the next during the tutorial, which is frustrating. Thanks anyone!

Answer 1

The answer turned out to be that my version of Angular was 1.0. I was using the angular from the tutorial. I downloaded the working tutorial from the Git repository here: https://github.com/angular/angular-phonecat

and compared all of my files to that side by side. As soon as I upgraded my version to Angular 1.2 used in that demo it worked. There were some other changes I needed to make for the new version (like putting controller names in quotes), but now everything is working. Hope this helps someone else.

Answer 2

Are you defining your app module twice?

angular.module('appname', ['phonecatFilters','phonecatAnimations'], ...

The injection should only happen once. Other calls should not use the [], as that will create a new module, replacing your previous.

Answer 3

Either approach is valid and it's unlikely to be the source of your problem. The first possibility that jumps to mind- make sure you've included animate as well. So something like the following (or linking from the CDN) should be in your index.html header.

  <script src="angular-animate.js">

Or if that's not it, including your code here and ideally including a version that exhibits the problem on http://plnkr.co so we can all try it out is a big help.

The two different styles stem from javascript which supports each. There's the second approach you show of assigning your module to a variable and then extending it.

And it supports what's called chaining calls as in your first version (firstFunction().secondFunction().lastFunction(). This is especially popular with functional programmers as it fits that mindset/approach nicely.