AngularJS Controller Fails to Initialize

I have encountered an issue with my Angular app where nothing inside my controller seems to be running. This app is hosted on a single webpage of my site and has a main application that relies on another module I created as a dependency.

Despite the fact that my route successfully brings in the view, the controller fails to execute. Why is my controller not running?

I have ruled out my data service as the culprit after removing it from the equation for testing purposes. The console.log statement before the function is called does output, however, none of the code within the function executes. Additionally, there are no console errors present.

Here is a snippet of my app.js:

(function(){

    'use strict'; 

    var dependencies = [
        'ghpg', 
        'ngRoute'

    ];  

    angular.module('blogger', dependencies)
    .config(Config);  

    Config.$inject = ['$locationProvider'] 

    function Config($locationProvider){

        $locationProvider.hashPrefix('!'); 
    } 

    if (window.location.hash === '#_=_'){
        window.location.hash = '#!'; 
    } 

    //bootstrap angular

    angular.element(document).ready(function(){
        angular.bootstrap(document, ['ghpg']); 
    });
})();

module:

(function(){

    'use strict'; 

    var dependencies = [ 'ngRoute' ];   

    angular.module('ghpg', dependencies)
    .run(init)
    init.$inject = ['$rootScope','$location' ];

    function init($rootScope, $location){
        var vm  = this;         
    } 
})();

View:

<div class="container-fluid" data-ngController="blogController as vm"> 
    <h2> Articles </h2>     
    <div class="post-listing" data-ng-repeat=" post in vm.data">
        <p> {{ post  }} </p> 
    </div>  

</div> 

Controller: (function(){ 'use strict';

        angular
        .module('ghpg')
        .controller('blogController', blogController);

        blogController.$inject = ['$scope'];
        ////
        console.log("In controller file");
        function blogController($scope){
                console.log('running controller');
                var vm = this;

                vm.data = blogContent.getContent();
                console.log(vm.data);
        }
})();

I suspect the issue could possibly be related to the way my application is being bootstrapped. However, everything still functions even without explicitly defining ng-app, leading me to believe that the bootstrap process is functioning correctly.

Another consideration is that my controller setup in the HTML might be incorrect. Despite experimenting with different configurations, the result remains unchanged or results in a console error, and the problem persists.

Answer №1

controller.$inject = ['$scope','controller']

Instead of injecting your controller into itself, update it to controller.$inject = ['$scope'] and function controller($scope).

Did you intend to write?

controller.$inject = ['$scope','contentController']

You are calling a method on contentController without injecting it anywhere.

Update

data-ngController should actually be data-ng-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

The compatibility between cross-fetch and React Native is currently not supported

I have developed an API wrapper that utilizes fetch to carry out the API requests. To ensure compatibility with Browsers, Node, and React Native, I incorporate cross-fetch. When testing the wrapper in Node, everything works fine. However, when using it in ...

Comparing Dates in Node.js using JavaScript and Sorting Arrays based on Date Values

Is JavaScript lacking a basic Date comparison feature similar to Python? Within my Node.js script, these lines are present: console.log(Date(2012,11,10) < Date(2012, 11, 9)) console.log(Date(2012,11,10) > Date(2012, 11, 9)) Surprisingly, both of t ...

Leverage AJAX for real-time Django Model updates

Seeking insights on how to effortlessly update a Django model through AJAX without reloading the page or requiring user input for saving. Various tutorials address fetching data from Django models using AJAX, yet resources on updating models remain scarce. ...

I can spot the JavaScript dynamic dropdown feature displayed in the button as well

I am in the process of dynamically creating start and end time drop-down fields within my application. I have also incorporated a remove link for these fields. However, when navigating using the 'tab' key, I notice that the drop-down is appearing ...

Enhance Your Vue.js 2.0 Experience: Implementing Vue Components Generated with v-html and Compiling the Markup

Currently Utilizing VueJS 2.0 I am looking to transform the following into a clickable link. Is this possible? This is my vue component: <template> <div v-html="markup"></div> </template> <script> new Vue({ data() { ...

Consistent value displayed by addEventListener for each event

Hey everyone, I've been experimenting with different solutions for a few hours now but I'm still stuck on this problem. I have a function that takes JSON as input - I can create an 'a' element: CHECK I can set all the element propertie ...

Difficulty paginating jqgrid when using an array as the data source

Encountering an issue with pagination in jqgrid while working with array data containing 18 records. Even after specifying pagination:true, pager:jQuery('#pager1'), the records are not displaying in pages. Can anyone assist me in implementing pag ...

Having trouble with Rails 6 Bootstrap 4 Modal staying open after submitting?

Everything is working smoothly with Open Modal, but I am facing an issue with closing the modal. Here are the relevant files: Inside client.haml (the client layout) = link_to t('.mail to admin'), blame_path(@admin), remote: true routes.rb get ...

Events in Backbone View are failing to trigger

Currently, I am incorporating Backbone into a project and facing an issue with getting the events functionality of Backbone Views to function properly. Below is a snippet extracted from my current application: Base File: window.App = Models: {} Vie ...

When trying to implement a dark/light theme, CSS variables may not function properly on the body tag

Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below: #light{ --color-bg: #4e4f50; --color-bg-variant: #746c70; --color-primary: #e2 ...

When using AngularJS with Webpack, everything runs smoothly in development mode, but encounters hiccups in

While serving my project using webpack-dev-server in development mode, everything works smoothly. But when I try to build the project with mode: "production" in the webpack configuration, it doesn't function as expected. These are my current webpack ...

Can we not customize a nested component using the 'styled()' function in MUI?

Looking at the code snippet below, my attempt to style an MUI Stack component within an MUI Dialog component seems to be falling short. The Stack styles are not being applied as expected: const CustomDialog = styled(Dialog)(({ theme }) => ({ ' ...

Switch Picture on Active List Item

I've implemented a two-tab content slider specifically for the mobile section of my website. Users can click on the linked image within the <li> element to load the corresponding content. My goal is to have the image change color when in an "act ...

A login page designed with jquery does not require resubmission

Encountering an issue where after submitting incorrect login credentials on a webpage, the ajax request fails to go through upon subsequent attempts. After scouring StackExchange for solutions, I have explored threads such as Why won't my jQuery form ...

How can I divide AngularJS ng-grid into two separate columns?

I am trying to extend the ng-grid to display data from one column into two columns: $scope.gridOptions = { data: 'myData', columnDefs: [{ field: "name", width: 120}, { field: "age", width: 120 }] }; When ...

Creating a new database row dynamically with PHP, JavaScript, and AJAX

There is a button that triggers a popup box with a textfield when clicked. Once something is entered in the textfield and the "Add" button is clicked, it should be added to the database. Currently, upon clicking "Add", data is inserted into the DB but it ...

Ways to restrict the quantity of Firebase compound indexes required for querying with various filters

I'm in the process of developing a Firestore project that includes group chats and forums where users can filter posts based on various criteria: Number of likes Presence of attachments (photos and/or files) 4 Tags (Questions, Exams, Assignments, Not ...

Avoiding $$hashKey in ngRepeat in AngularJSLearn how to bypass

I'm currently working on creating dynamic tables from an object. Here's the structure of my Object: { categories: ["kids", "home"], home: [{ name: "home 1.1", title: " home 1.2" }, { name: "home 2.1", title: "home 2.2" }, ...

What is the best method for circumventing an express middleware?

I am currently working on an express application that utilizes several express routes, such as server.get('*' , ... ) to handle common operations like authentication, validation, and more. These routes also add extra information to the respon ...

Sending a parameter to a JavaScript function on a separate page

My current setup involves an aspx page featuring a drop down list. Once a selection is made, I am required to transmit the chosen value to a separate javascript function located within another page. This second page is dedicated to showcasing a map using ...