Issue encountered with ngRoute dependency injection, despite successful loading of angular-route.js.min file

I'm struggling to understand why the module isn't loading properly with ngRoute. Even though I have included angular and angular-route scripts from a CDN, I keep encountering the error

Error: $injector:modulerr Module Error

 <!--Angular-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-route.min.js"></script>

<script src="app/index.js"></script>
<script src="app/components/blog/blogControllers.js"></script>

// index.js
'use strict';

var pdizzApp = angular.module('pdizzApp', [
    'ngRoute',
    'blogControllers'
]);

pdizzApp.config(['$routeProvider'], function ($routeProvider) {
    $routeProvider
        .when('/blog', {
            templateUrl: 'blog/view/blog-list.html',
            controller: 'BlogListController'
        })
        .otherwise({
            redirectTo: '/blog'
        })
});

//blogControllers.js
'use strict';

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

blogControllers.controller('BlogListController', ['$scope', '$http',
    function ($scope, $http) {
        $http.get('/api/blog/post').success(function (data) {
            $scope.posts = data._embedded.post;
        });

        $scope.toDate = function(date) {
            return new Date(Date.parse(date));
        }
    }]);

Answer №1

To ensure your code functions properly, make sure to declare the method inside the array passed to the config method within your config block:

pdizzApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/blog', {
            templateUrl: 'blog/view/blog-list.html',
            controller: 'BlogListController'
        })
        .otherwise({
            redirectTo: '/blog'
        });
}]);

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

Change the div attribute when clicking on a corresponding link

For the full code, please visit: https://plnkr.co/edit/6TTLVcsXLV7C1qXSMQV0?p=preview Here is an angular ui bootstrap accordion with nested panels: <uib-accordion close-others="oneAtATime"> <div ng-repeat="sub in subdivisions"> < ...

Creating fluid motion with a bezier curve in ThreeJS

I am looking to animate a bezier curve in ThreeJS with updating start, end, and control points. Eventually, I will have multiple curves animating simultaneously. What is the most efficient approach to achieve this? When running the code snippet below, you ...

When I remove a user as admin, I am unable to retrieve all users to update the data table

I am currently working on an Admin Dashboard that includes a section for users. This section features a simple table displaying all the users in the MongoDB database along with some information. Additionally, there are functionalities to add a new user and ...

Sending data to various databases using a consolidated form in AngularJS, NodeJS, MongoDB, Mongoose, and ExpressJS

Is it possible to have a single form that can post data to two different collections in MongoDB? Here is an example of how the HTML code might look: <form> ...Field1 ...Field2 ...Field3 ...Field4 </form> And here is an example of ...

Can Vue allow for the inclusion of HTML elements to store data seamlessly?

One example involves displaying array elements in an <ul>, with each element starting with <li> and ending with </li>. Here is the attempted code: clearedtaskslist: function(){ this.template='<ul>' for(let i=0;i<t ...

What is the best way to retrieve JSON values based on a key using JavaScript, jQuery, or AngularJS?

Here is some JSON data that I need help with: var jsonData = { "title": "Testing", "settings": { "mySettings": false }, "jsonList": ["TestingList"], "testJsonVals": { "Test1": { "name": "name1", ...

Finding a workaround for the absence of a leftToggle feature in ListItem component of Material-UI

Is there a way to move the toggle element to the other side in Material-UI's listItem without using the leftToggle option? The documentation does not specify a leftToggle attribute, so I am looking for alternative solutions. I would like to align the ...

Minimize the amount of external asynchronous calls made by the client

In my application, the client initiates multiple asynchronous JavaScript requests to third party servers. The issue I'm encountering is that when the client responds to these requests, the site becomes inactive for a brief period of time. This inactiv ...

Guide to refreshing a localStorage variable before transferring it to an Ajax request

I have a scenario where I need to update the localStorage value when an option is clicked from a list. The data-id value of the clicked option should be stored in localStorage and then sent through an Ajax call. However, the issue I am facing is that the l ...

Error: When attempting to access the 'name' property of an undefined object, a TypeError is thrown. However, accessing another property on the same object does

Retrieving information from API. The fetched data looks like [{"_id":"someId","data":{"name":"someName", ...}}, ...] My state and fetching process are as follows: class Table extends React.Component { constructor() { super(); this.state = { ...

Export JSON data to a CSV file using Java programming

I'm having trouble figuring out how to send files back to the client using Java. Specifically, I want to create a CSV file that can be opened in Excel. After discovering this tool for server-side creation of CSV files, I'm unsure of the process ...

What is the best way to insert fresh input values into a different element?

click here to view image description I am working with an input element where I take input values and store them in an element. However, I would like to know how to input new values into the next element. Any assistance would be greatly appreciated. Thank ...

Preserve callback function for your office.js extension

During the creation of an Office.js Word add-in, our team was looking to apply specific processing on the Document when the user actively triggers a "Ctrl +S" key combination or clicks the "Save / Save As" option. Does the Save function offer a callback ...

Are we utilizing this JavaScript function properly for recycling it?

Two functions have been implemented successfully. One function adds the autoplay attribute to a video DOM element if the user is at a specific section on the page. The other function smoothly slides in elements with a transition effect. The only limitatio ...

Identify all elements that possess a specific attribute with a precise value in jQuery, and return either true or false

I'm having a slight issue with jQuery. Below is the code in question: if ($("select[rendelo='" + rendelo + "'][nap='" + nap + "'][napszak='" + napszak + "']").val() == 0) { alert('sth'); ...

problem with the visibility of elements in my HTML CSS project

How do I prevent background images from showing when hovering over squares to reveal visible images using CSS? h1 { text-align: center; } .floating-box { float: left; border: 1px solid black; width: 300px; height: 300px; margin: 0px; } div ...

Leveraging a handful of $guardians to $transmit

Here is the markup I am working with: <div class="grandparent"> <div class="parent" ng-repeat="parent in parents"> <div class="child" ng-repeat="child in parent.children"> <div class="grandchild" ng-repeat="gra ...

Unable to process form submission using Ajax in ASP.NET MVC

I'm having trouble with submitting a form using ajax and opening a modal dialog after the ajax function is successful. Whenever I click the submit button, the process doesn't complete. Where could the issue be, in the ajax method or somewhere el ...

Collect all wallet objects and store them in an array of objects within BitGO for Bitcoin

My Setup: Using the Mongoose module to handle all MongoDB operations, we generate and store a wallet inside a Mongo collection for each new user. METHOD: By using User.find({}, function(err, docs) {, we can retrieve each user object. User.find({}, functi ...

Ways to widen the header to fit the entire page?

I'm having trouble stretching my header to fill the entire page. I've tried using margin-left and right, but it's not working as expected. My Header CSS: background: green; height: 70px; width: 100%; display: flex; just ...