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
Mars Epaecap
5,110 PointsI started this 3 hour course 8 hours ago. Transferring to mock/todos.json isn't working on a live website or on mamp SOS
todo/index.html
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href='styles/main.css' rel='stylesheet' type="text/css">
</head>
<body ng-app="todoListApp">
<h1 ng-click="helloWorld()"> My TODOs</h1>
<div ng-controller="mainCtrl" class="list">
<div class="item" ng-class="{'editing-item': editing, 'edited': todo.edited}" ng-repeat="todo in todos">
<input ng-model="todo.completed" type ="checkbox"/>
<label ng-hide="editing" ng-click="helloWorld()">{{todo.name}}</label>
<input ng-change ="todo.edited = true" ng-blur="editing = false;" ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
<div class="actions">
<a href="" ng-click=" editing = !editing">Edit</a>
<a href="" ng-click="helloWorld()">save</a>
<a href="" class="Delete">delete</a>
</div>
</div>
{{todos}}
</div>
<script src="vendor/angular.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>
</body>
</html>
todo/mock/todos.json
[
{"name": "fix my todo app"},
{"name": "fix my todo app"},
{"name": "fix my todo app"},
{"name": "fix my todo app"}
];
todo/scripts/app.js
angular.module("todoListApp", [])
.controller('mainCtrl', function($scope, dataService) {
$scope.learningNgChange = function() {
console.log("An input changed!");
};
$scope.helloWorld = dataService.helloWorld;
dataService.getTodos(function(response)
{
console.log(response.data);
$scope.todos = response.data;
});
})
.service('dataService', function($http) {
this.helloWorld = function() {
console.log("This is the data service's method!!");
};
this.getTodos = function(callback){
$http.get('mock/todos.json')
.then(callback);
};
});
help? ):
Mars Epaecap
5,110 PointsThomas Nilsen do you mean in the app.js file file? I just tried with
$http.get('../mock/todos.json')
But it didn't work
9 Answers
Thomas Nilsen
14,957 PointsAlso - The project you shared with me hadn't angular installed, so had to download it myself. Maybe you have the same issue.
Make a folder called 'vendor' and make a file inside it. Call it angular.js and past in everything from this link
Thomas Nilsen
14,957 PointsAlright - I got you project up and running.
The mistake was really(!) small.
Remove the semicolon in your .json file.
Mars Epaecap
5,110 PointsWow that was very small, but I'm still getting the same results in the index.html I still see it like this https://i.imgur.com/xKxdQ0z.png
Thomas Nilsen
14,957 PointsOkay - I'm not sure I understand your issue. Would you mind doing a little bit more explaining so I can help you? :)
Mars Epaecap
5,110 PointsSure sorry about that,
In the video: https://teamtreehouse.com/library/angular-basics/services-in-angular/using-services-to-get-data at 0:23 he moves
[
{"name": "clean the house"},
{"name": "water the dog"},
{"name": "feed the lawn"},
{"name": "pay dem bills"},
{"name": "run"},
{"name": "swim"}
];
into a new file todos.json and places it inside the directory mock.
but afterwards he changes some syntax and at 6:50 the app runs just like it did before but when I do it exactly as he does my todos do not show up instead all i see is {{todos}}
Note my list shows up when I go to the link at /mock/todos.json like he does at 1:13
(also note I'm hosting this on a website)
this is what it looks like
Thomas Nilsen
14,957 PointsIf all you see is a lot of {{todos}} (not the actual value) there is a decent change you have one or more syntax errors. Do you get any errors in your console?
Also if you could share the project (how is up to you), I'd be happy to have a look.
Mars Epaecap
5,110 PointsIt's here:
http://expirebox.com/download/8db72fa50ac46377afe042247a3c9779.html
console says
ReferenceError: angular is not defined and The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.index.html
Thomas Nilsen
14,957 Pointsopen up your console and do another screenshot
Mars Epaecap
5,110 PointsScreen shot: http://i.imgur.com/69EEaIf.png
Thomas Nilsen
14,957 Pointsyeah - the mistake is angular is not installed
The other error can you avoid by putting
<meta charset="UTF-8">
In you <head></head> tag
Mars Epaecap
5,110 Pointsok! so I made a folder called 'vendor' and made a file inside it and called it angular.js and past in everything from the link you sent and added html <meta charset="UTF-8"> in the <head> </head tag>
This is what I see now http://imgur.com/2YMwHFn
):
Thomas Nilsen
14,957 Pointsthe errors are gone. Great!
Do you mind sharing your project again with the latest changes? It's probably something minor
Thomas Nilsen
14,957 PointsYou had written
$http.get('.../mock/todos.json')
.then(callback);
change it to
$http.get('../mock/todos.json')
.then(callback);
Or you could remove the two dots.
Mars Epaecap
5,110 PointsThomas Nilsen You're a Godsend!
I just changed it back to
$http.get('mock/todos.json')
and now it works!
so the problem was
1) angular was not downloaded 2)
<meta charset="UTF-8">
was missing from the <head> </head> 3) semi colon in the todos.json file
Thomas Nilsen
14,957 Points3 / 3
Glad I could help!
(the UTF-8 in the head was not critical though - the app would have run without it)
Mars Epaecap
5,110 PointsThank you so much. May the force be with you
Thomas Nilsen
14,957 PointsThomas Nilsen
14,957 Pointshave you tried something like this?
$http.get('../mock/todos.json')Unless I misunderstand the question..