Kyle Calica-St Kyle Calica-St - 7 months ago 10
Javascript Question

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.

Answer

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.

Comments