Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building a MEAN Application Creating and Editing Data in a MEAN App Create and Update Data in Angular

Brandon Ly
Brandon Ly
5,416 Points

I can't get the todos to show up when I load the page

The server starts just fine and I ran webpack --watch. After making the changes in the video I tried to load the page and I didn't see any todos. This error appears in the console

vendor.bundle.js:13351 Error: [$injector:unpr] Unknown provider: dataServiceProvider <- dataService <- mainCtrl
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=dataServiceProvider%20%3C-%20dataService%20%3C-%20mainCtrl
Ken Howard
Ken Howard
Treehouse Guest Teacher

Angular is reporting that you tried to inject dataService but the service wasn't registered.

Can you post the contents of your app/scripts/services/index.js file?

Brandon Ly
Brandon Ly
5,416 Points
'use strict';

angular.module('todoListApp')
.service('dataService', function($http, $q) {
  this.getTodos = function(cb) {
    $http.get('/api/todos').then(cb);
  };

  this.deleteTodo = function(todo) {
    console.log("I deleted the " + todo.name + " todo!");
  };

  this.saveTodos = function(todos) {
    var queue = [];
    todos.forEach(function(todo) {
      var request;
      if(!todo._id) {
        request = $http.post('/api/todos', todo);
      } else {
        request = $http.put('/api/todos' + todo._id, todo).then(function(result) {
          todo = result.data.todo;
          return todo;
        });
      }
      queue.push(request);
    });
    return $q.all(queue).then(function(results) {
      console.log("I saved " + todos.length + " todos!");
    });
  };

});

Here's my index.js file

Ken Howard
Ken Howard
Treehouse Guest Teacher

The index.js file should be very thin at this point in the course. Here's what it should look like:

'use strict';

var angular = require('angular');

angular.module('todoListApp').service('dataService', require('./data'));

Essentially you are using webpack to import the angular library with the require statement, then you are registering dataService on the last line. dataService is located in another file called data.js.

The way you have it should work once you import angular with the require statement. I'm not sure if this file is being imported in app/app.js. Be sure to check that file out to see if there's a reference like this require('./scripts/services');.

Brandon Ly
Brandon Ly
5,416 Points

My mistake. The file I had originally posted was the data.js file in the app/scripts/services/ directory. I didn't have an index.js file there. I've obviously missed something crucial. I think at this point the best thing I can do is go back and rewatch some videos and fix this.

Jonathan Haro
Jonathan Haro
18,101 Points

I had the same mistake. I believe you misspelled vender incorrectly. You have it spelled "vendor" with an o, but it should be vender with an e

4 Answers

Jasmine Martin
Jasmine Martin
14,307 Points

He guys I figured it out based on a piggy back of Ken's answer.

We have to go into our app/app.js file and require the other folders and files. I believe originally I only had

'use strict';

var angular = require('angular');

angular.module('todoListApp', []);

require('./scripts/controllers/main.js');

But it has to be

 'use strict';

var angular = require('angular');

angular.module('todoListApp', []);

require('./scripts/controllers/main.js');

require('./scripts/controllers/todo.js');

require('./scripts/services/data.js');

require('./scripts/directives/todo.js');

I don't think they put that in the video. I wasn't sure at the time how far I would have to go back to find out where things went wrong.

Hope this helps.

Bas van Pol
Bas van Pol
4,342 Points

Perfect! That fixed it. Thanks Jasmin.

foxyrev91
foxyrev91
3,912 Points

Hi, Brandon. This is no answer to your problem, but I seem to be having the exact same issue. Did you find a fix? I don't believe I've jumped over anything in the course, so this is strange.

Chad Danna
Chad Danna
11,541 Points

Check out Jasmine Martin 's answer in the above comment. This was retrieved from the new git repo clone which was mentioned at the beginning of this video. I had the same issue, as I didn't expect any steps were missing, but there were steps missing.

Change the app/app.js file to contain the following information:

'use strict';

var angular = require('angular');

angular.module('todoListApp', []);

require('./scripts/controllers/main.js');

require('./scripts/controllers/todo.js');

require('./scripts/services/data.js');

require('./scripts/directives/todo.js');
Bas van Pol
Bas van Pol
4,342 Points

Hi, also not an answer, but I'm having the same issue. I re-watched the videos and I don't think anything is missed. Weird indeed.

Chad Danna
Chad Danna
11,541 Points

Check out Jasmine Martin 's answer in the above comment. This was retrieved from the new git repo clone which was mentioned at the beginning of this video. I had the same issue, as I didn't expect any steps were missing, but there were steps missing.

Change the app/app.js file to contain the following information:

'use strict';

var angular = require('angular');

angular.module('todoListApp', []);

require('./scripts/controllers/main.js');

require('./scripts/controllers/todo.js');

require('./scripts/services/data.js');

require('./scripts/directives/todo.js');

None of these solutions work. Still getting error.

"Error: [$injector:unpr] Unknown provider: dataServiceProvider <- dataService <- mainCtrl http://errors.angularjs.org/1.5.8/$injector/unpr?p0=dataServiceProvider%20%3C-%20dataService%20%3C-%20mainCtrl

Anymore ideas? Thanks.