Encountering an error when trying to inject the dependency for angularMoment

I've been attempting to integrate the moment.js API by adding angularMoment as a dependency to my module, but I'm encountering this error:

Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=momentProvider%20%3C-%20moment%20%3C-%20transCtrl

Even though I am following the guidelines outlined in the documentation at https://github.com/urish/angular-moment , I still keep receiving this error message. Any insights on what might be causing this?


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>
<script src="scripts/app.js"></script>

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

app.controller('transCtrl', ['moment', function(moment){

    $scope.date = new moment();  

}]);

Answer №1

If you want to learn how to implement angular-moment functionality, here's a breakdown for you

https://github.com/urish/angular-moment

Remember to add both moment.js and angular-moment.js to your project setup in order to utilize their features effectively.

Answer №2

So, now that you followed my advice to include the moment.js script before angular-moment.min.js in your code - there is one more simple fix needed in your controller:

app.controller('transCtrl', ['$scope', 'moment', function($scope, moment){

All you have to do is inject $scope into your controller.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered during Yarn installation process: The tunneling socket was unable to be established due to a connection refusal on localhost at port 80

I have a Next.js app that needs to be built on our company servers before deployment. We use a proxy, and I've configured yarn to use the proxy as well. yarn config set proxy http://xx.xxx.xx:xxxx yarn config set httpsProxy http://xx.xxx.xx:xxxx yarn ...

Setting the y-axis range in d3.js and nvd3.js: A complete guide

I'm attempting to define the y-axis range of the chart to be between 1 and 100. After reviewing the API documentation, I came across a potential solution involving axis.tickValues which can be found here: https://github.com/mbostock/d3/wiki/SVG-Axes# ...

Having trouble notifying a json object following an ajax request

My project involves using a PHP file that contains an array with multiple values. Additionally, I have an HTML page that features a single input field. A listener is set up to detect changes in the input field. Once a change occurs, an AJAX call is trigge ...

I'm having issues with my pop method - it doesn't seem

Hello everyone, I am new to core JavaScript and currently learning how to create an array. I have written the following code but for some reason, the pop method is not working as expected. var players=['david','micky','Ryan' ...

Conceal the choice if its value matches that of another option

My goal is to create a code that will hide an <option> if its value matches the value of the first option (which is retrieved dynamically with PHP). Here's the initial code snippet: <select onChange="this.form.submit()" name="cart[<?php e ...

iOS iframe remains unscrollable only when switching from portrait to landscape orientation

I have a scrollable iframe set up on iOS like this: <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ..."> <iframe style="height: 600px, ..."> </iframe> </d ...

Invoking Java methods from JavaScript

Looking for a way to dynamically update a webpage without requiring an external request. I have a JavaScript method that updates the page, and a Java UDP server receiving parameters from clients. Is it possible to call this JavaScript method from Java sour ...

Transition smoothly between sections using fullPage.js with clipping path effects

I am looking to create a unique clipping animation utilizing SVG clipping path. The animation should hide the first section while revealing the second section in a smooth transition using fullPage.js. This idea is somewhat similar to the question discusse ...

Angular8 Chart.js customizes the Y axis tick labels

Is there a way to dynamically adjust the Y-axis ticks in a chart.js graph? I attempted to modify them using the following commands: this.chartOptions.scales.yAxes[0].ticks.min = 10; this.chartOptions.scales.yAxes[0].ticks.max = 18; ...

Tips for displaying the message "{"POWER":"ON"}" within the else if statement (this.responseText == ({"POWER":"ON"})) {

Hey everyone, I'm trying to adjust the color of a button on my webpage based on the response I receive from this.responseText. I understand the JSON response, but for some reason, I can't seem to incorporate it into my code. If anyone could lend ...

AngularJS sending unsupported media type to SpringMVC controller

Encountering an error while attempting to post JSON data from an AngularJS controller to a SpringMVC controller. Despite trying various solutions found online and ensuring that the jackson library is in the classpath, the issue persists. It's worth no ...

ExpressJS: How to resolve the undefined error in Express session

After using express-generator to create my project, I installed the express-session package. Below is how express-session is ordered in my app: app.js var expressSession = require('express-session'); app.use(logger('dev')); app.use( ...

What is the best way to display the identical HTML page for both online and offline applications?

I am facing a challenge with my application, as I need to ensure that it can also be accessed offline. While I can easily create dynamic content on the client side using Javascript and JQuery instead of relying on server-side processing, I am struggling wi ...

Need to specify the file type at the end of the URL for HTML input

How can I create a URL input form that requires the input to be a valid URL and end in a specific file type? Here is an example of my input: <input name="bg" placeholder="https://website.com/image" type="url"> Currently, the input field only restr ...

Uncertainty surrounding the extent of a button's scope within an Angular application

(click) event in one instance of a component is causing the function in another instance to be triggered unexpectedly. I am having trouble describing this issue. For reference, I have included a working example on stackblitz. When clicking on both buttons ...

Problem encountered with @HostListener

In an Angular component, I have the following code snippet that is functioning as intended: @HostListener('document:click', ['$event']) onClick(event) { if(!this.eRef.nativeElement.contains(event.target)) { console.log("clicked out ...

Steps to activate JavaScript upon selecting a dropdown menu item

My webpage has two dropdown boxes for car makes and models. I want all the models of a selected make to display in the next box. Currently, the models only show up when the dropdown is clicked using the code below. window.onmousedown = function(e){ th ...

What strategies can be utilized to raise the max-height from the bottom to the top?

I am facing the following coding challenge: <div id = "parent"> <div id = "button"></div> </div> There is also a dynamically generated <div id="list"></div> I have successfully implem ...

Guide on utilizing map function in JavaScript and Vue to generate a fresh array

I am working on implementing a map method in JavaScript and Vue to generate a new array of objects while only including specific items in each object. I have designed a user interface with 2 checkboxes corresponding to 2 distinct objects: <div v-for ...

Is there an XML File Wrapper to Generate PDF Output?

Greetings Forum Members, I have been given the responsibility of creating a PDF file from multiple XML files. Has anyone come across an XML wrapper file before? This type of file would essentially contain a list of all the source XML file names in a spec ...