CODEWITHSUNDEEP
angularjsngrouteangularjs-3rd-party
PouncingPoodle
PouncingPoodle

Reputation: 642

ngRoute breaks everytime I add moment-picker as a dependency

My ngRoute breaks everytime I add another dependency. I want to add the 'moment-picker' to my app to pick dates and times but once I add the dependency to the module, I get the following error:

Uncaught Error: [$injector:modulerr]

On the error page under 'Discription' it shows 'Using ngRoute'.

This is my code:

var app = angular.module('weather', ['ngRoute', 'moment-picker']);

If I remove the 'moment-picker' the ngRoute works perfectly without any errors.

I have tried switching my links to my scripts around, but no luck.

Upvotes: 0

Views: 209

Answers (2)

PouncingPoodle
PouncingPoodle

Reputation: 642

It seems like my problem was the order of scripts added, as well as that at a point I removed the 'moment-withh-locales.js' script.

My order now is:

<script src="scripts/angular.min.js" type="text/javascript"></script>
<script src="scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.min.js" type="text/javascript"></script>
<script src="scripts/angular-route.js"></script>

<script src="scripts/moment-with-locales.js" type="text/javascript"></script>
<script src="scripts/moment.min.js" type="text/javascript"></script>
<script src="scripts/angular-moment-picker.min.js" type="text/javascript"></script>
<link href="css/angular-moment-picker.min.css" rel="stylesheet" type="text/css"/>

<script src="scripts/app.js" type="text/javascript"></script>

In app.js my code is as follows:

var app = angular.module('weather', ['ngRoute', 'moment-picker']);

app.config(function($routeProvider) 
{
    $routeProvider
    .when("/", {
      templateUrl : "home.php"
    })
    .when("/page1", {
      templateUrl : "page1.php"
    });
});

app.config(['momentPickerProvider', function (momentPickerProvider) {momentPickerProvider.options(
{
    /* Picker properties */
    locale:        'en',
    format:        'L LTS',
    minView:       'decade',
    maxView:       'minute',
    startView:     'year',
    autoclose:     true,
    today:         false,
    keyboard:      false,

    /* Extra: Views properties */
    leftArrow:     '&larr;',
    rightArrow:    '&rarr;',
    yearsFormat:   'YYYY',
    monthsFormat:  'MMM',
    daysFormat:    'D',
    hoursFormat:   'HH:[00]',
    minutesFormat: moment.localeData().longDateFormat('LT').replace(/[aA]/, ''),
    secondsFormat: 'ss',
    minutesStep:   5,
    secondsStep:   1
    });
}]);

Thank you all for helping.

Upvotes: 0

Basti&#225;n D&#237;az Olave
Basti&#225;n D&#237;az Olave

Reputation: 52

If you are using Angular Moment Picker, make sure you have added the corresponding tags to your index.html file (depending on the version that you use):

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.js"></script>
<link href="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.css" rel="stylesheet">

<link> tags usually go inside your <head> tag at the beggining, while <script> tags usually take place inside your <body> tag, at the end of that.

Upvotes: 0

Related Questions