AngularJS new router could not instantiate controller

Question

I am trying to create a service to use throughout my Angular app that pulls in data from a .json file using $http. This is what the factory looks like:

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

trooNewsServices.factory('Articles', ['$http',
  function($http){
    $http.get('resources/articles.json').success(function(data) {
          return data;
    });
  }]);

I passed in the trooNewsServices dependency into my module declaration. Any controller that I try to pass in my new Articles service, I get a

"Could not instantiate controller HomeController"

error in the console. Not sure what I am missing/what is wrong with this code. Should I be using $resource instead of $http?

Here is how I am passing the 'trooNewsServices' into my main module:

var TrooNews = angular
    .module('TrooNews', ['ngMaterial', 'ngNewRouter', 'trooNewsServices'])
    .config(function($mdThemingProvider) {
        $mdThemingProvider
            .theme('default')
            .primaryPalette('indigo')
            .accentPalette('pink');
    })
    .config(function($locationProvider) {
        $locationProvider.html5Mode({
            enabled: false,
            requireBase: false
        });
    });

Here is how I try to inject 'Articles' into one of my controllers:

TrooNews.controller('HomeController', ['Articles', 
    function(Articles) {
        this.name = 'Troo News';
        this.articles = Articles.query();
    }]);

And here is how I set up routing in my 'AppController':

TrooNews.controller('AppController', function($router, $mdSidenav, $mdToast, $parse, $http) {
    $router.config([{
        path: '/',
        component: 'home'
    }, {
        path: '/home',
        component: 'home'
    }, {
        path: '/about',
        component: 'about'
    }, {
        path: '/settings',
        component: 'settings'
    }, {
        path: '/article/:id',
        component: 'article'
    }]);

    this.toggleSidenav = function(menuId) {
        $mdSidenav(menuId).toggle();
    };

    this.navigateTo = function(link) {
        var parts = link.match(/^(.+?)(?:\((.*)\))?$/);
        var url;
        if (parts[2]) {
            url = '.' + $router.generate(parts[1], $parse(parts[2])());
        } else {
            url = '.' + $router.generate(parts[1]);
        }

        $mdToast.show($mdToast.simple().content('Navigate To: ' + url).position('bottom right'));
        $router.navigate(url);
        this.toggleSidenav('left');
    };
});

Can you show how you're passing the service to a controller? — tymeJV, Feb 12 '16 at 19:05
@FuzzyTree I changed .success to .then and got the same exact error — Jess Anastasio, Feb 12 '16 at 19:16

score 0 · Answer 1 · edited Feb 12 '16 at 19:41

0

Inside your HomeController, you are executing this.articles = Articles.query();, but your Articles service doesn't define any query function.

Instead, your service is just immediately executing an HTTP GET request upon creation. Not sure why this would lead to your error, but it is a red flag.

Try changing your Articles service to the following:

trooNewsServices.factory('Articles', ['$http',
  function Articles($http){
    this.query = function() {
      return $http.get('resources/articles.json')
        .then(function(response) { return response.data; });
    };
}]);

edited Feb 12 '16 at 19:41

Pankaj Parkar

134,766
23
234
299

answered Feb 12 '16 at 19:32

Seth Flowers

8,990
2
29
42

This makes sense. But, after changing my Articles service to this I still get the "Could not instantiate controller HomeController", (this also gets thrown in a different controller that uses Articles but doesn't use query) and the error is associated with the router.es5.js file - so maybe there is something wrong with the routing that is messing with the service injection? – Jess Anastasio Feb 13 '16 at 01:07

score 0 · Answer 2 · edited May 23 '17 at 12:15

I was experiencing the same error message under different conditions. In my case, it was because I was referencing $scope in my dependencies (old habit that I'm trying to break). In my case, I wasn't using $scope and could easily remove the reference. That cleared up my error. Check your code for $scope references and see if that fixes it.

https://github.com/angular/router/issues/313

and

How can we watch expressions inside a controller in angular 1.4 using angular-new-router

AngularJS new router could not instantiate controller

2 Answers2