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 trialBrandon Ly
5,416 PointsI 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
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
Treehouse Guest TeacherThe 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
5,416 PointsMy 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
18,101 PointsI 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
14,307 PointsHe 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
4,342 PointsPerfect! That fixed it. Thanks Jasmin.
foxyrev91
3,912 PointsHi, 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
11,541 PointsCheck 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
4,342 PointsHi, 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
11,541 PointsCheck 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');
Tyrel Kessinger
8,414 PointsNone 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.
Ken Howard
Treehouse Guest TeacherKen Howard
Treehouse Guest TeacherAngular 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?