CODEWITHSUNDEEP
javascriptangularjs
Kyle Calica-St
Kyle Calica-St

Reputation: 2963

Angular JS Controller Not Being Instantiated

I have this angular app that I am running off only one webpage of my site. I have a main application that uses another module I made as a dependency.

The problem I am having is that nothing inside my controller is being ran. Why won't my controller run?

My route does bring in the view however so I know that the module is working. I got rid of my data service to be certain that it was not it. The console.log before the function outputs, but nothing in the function runs. I also have no console errors.

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 am wondering if it has something to do with bootstrapping my application? (But it all still works even without the explicit ng-app, so I am thinking that my bootstrapping does work)

My next best guess is that my controller in my html is not being set correctly, but every time I mess with it I either get the same result or an error in the console, and it still doesn't work.

Upvotes: 0

Views: 507

Answers (1)

Yatrix
Yatrix

Reputation: 13805

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

you're trying to inject your controller into your controller. Change it to blogController.$inject = ['$scope'] and function blogController($scope).

Did you mean to write? blogController.$inject = ['$scope','blogContent']

I see you're calling a method on blogContent and I don't see it injected anywhere.

Edit

data-ngController should be data-ng-controller.

Upvotes: 1

Related Questions