AngularJS: How to correctly pass in moment.js dependency?

Question

I have an app.js, where I've declared my app variable/module:

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

Then I'm got my controller passing in the reference along with others and trying to make a moment() call:

myApp.controller('myComtroller', ['$scope', 'moment', function ($scope, $http, $timeout, moment) {
    var now = moment();
    console.log(now);
}]);

I get an error in my console spitting this out:

TypeError: moment is not a function

I don't understand why it's doing this.

Towards the end of my body, I have this as my references:

<script src="~/lib/angular/angular.min.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/angular-moment/angular-moment.min.js"></script>
<script src="~/js/app.js"></script>

In that order. (the controller gets executed later, part of the section scripts for that view)

I installed moment.js through downloading it from here: http://momentjs.com/docs/

But I installed the angular-moment dependency through bower.

Any suggestions?

Answer 1

You're missing some dependencies in your dependency annotation.

Try:

myApp.controller('myComtroller', [
         '$scope','$http', '$timeout', 'moment', 
function ($scope , $http ,  $timeout,   moment) {
    var now = moment();
    console.log(now);
}]);

Also, I would recommend to use ng-annotate to automatically handle DI annotations.