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 AngularJS Basics (1.x) Improving Our Todo App Finalizing Our Application

Posted by Allison Walker
Allison Walker
17,137 Points

Broken app: todos not showing up.

What is happening is that I do not see my list of todos after the "+Add a new todo" link. Actually, what happens is that some empty fields show up, then disappear after a few seconds.

Here is a snapshot of my workspace. I'm not entirely sure that I got everything from the videos. https://w.trhou.se/ezxiee89uw

Thanks

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

First off, I have to admit I have not taken this course yet myself, but I have had a little exposure to angular.js elsewhere. Second, I don't have a complete solution for you. But I have a few observations that might help some:

  • That little delay and then something changes is typical angular behavior. It takes a moment for it to get going.
  • The fact that everything vanishes tells me that your todos.json data is not getting loaded.
  • There's a success callback but no error callback in dataService.getTodos(). Adding one might provide a clue.
  • I saw that a todos directive was created, but couldn't find where it was being used.
  • I was expecting to see ng-controller="mainCtrl" somewhere in the index.html, but did not.
  • I didn't see the kind of dependency injection I was expecting, for example instead of this:
         .controller('mainCtrl', function($scope, dataService) {
             // ...controller stuff...
         });

I was expecting to see this (unless the course teaches a different way to use angular?):

         .controller('mainCtrl', [ '$scope', 'dataService', function($scope, dataService) {
             // ...controller stuff...
         }]);

Perhaps someone who's done this course already can provide a more definitive answer, but until then I hope this might be of some help.

Allison Walker
Allison Walker
17,137 Points

Thanks for trying to help. I went through all the videos again and I don't know why it's not working. I tried a different workspace, and I've come to the conclusion that it's something with the way the course has us pull the controller out of the html template and include it via the directive. The html is just not getting read; I don't know if it's because we don't have a 'restrict: E' or not.

Anyway, todos.js is where the controller is located. It was in the index.html file, but it got moved to the todos.html template file. Then, we put it into the directive, todos.js. If you look at todos.js, you can see there is a line for 'controller: mainCtrl'.

All I can say about the dependency injection example is that, yes, the class is taught differently. I went through the one on Code School first and I understood that so well. To me, this course is too "programmy" - it's a little too fancy at the expense of keeping the information clear. It's odd that we don't review element directives vs attribute directives, and when I check the Angular reference docs, this method of using the directive to call the controller is not given as an example.

Anyway, maybe I'll try again. For now I'm moving on to something else. Thanks