Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript AngularJS Basics (1.x) Services in Angular Using Services To Get Data

Mars Epaecap
Mars Epaecap
5,110 Points

I 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? ):

Thomas Nilsen
Thomas Nilsen
14,957 Points

have you tried something like this?

 $http.get('../mock/todos.json')

Unless I misunderstand the question..

Mars Epaecap
Mars Epaecap
5,110 Points

Thomas 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
Thomas Nilsen
14,957 Points

Also - 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
Thomas Nilsen
14,957 Points

Alright - I got you project up and running.

The mistake was really(!) small.

Remove the semicolon in your .json file.

Mars Epaecap
Mars Epaecap
5,110 Points

Wow 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
Thomas Nilsen
14,957 Points

Okay - I'm not sure I understand your issue. Would you mind doing a little bit more explaining so I can help you? :)

Mars Epaecap
Mars Epaecap
5,110 Points

Sure 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

https://i.imgur.com/xKxdQ0z.png

Thomas Nilsen
Thomas Nilsen
14,957 Points

If 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
Mars Epaecap
5,110 Points

It'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
Thomas Nilsen
14,957 Points

open up your console and do another screenshot

Thomas Nilsen
Thomas Nilsen
14,957 Points

yeah - 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
Mars Epaecap
5,110 Points

ok! 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
Thomas Nilsen
14,957 Points

the errors are gone. Great!

Do you mind sharing your project again with the latest changes? It's probably something minor

Thomas Nilsen
Thomas Nilsen
14,957 Points

You 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
Mars Epaecap
5,110 Points

Thomas 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
Thomas Nilsen
14,957 Points

3 / 3

Glad I could help!

(the UTF-8 in the head was not critical though - the app would have run without it)

Mars Epaecap
Mars Epaecap
5,110 Points

Thank you so much. May the force be with you