title: I can't get AngularJS to load my services
body: <p>I'm writing this to get help with an issue that I am having with AngularJS. This is a reoccuring issue in my coding education since no matter what, my biggest problems in coding were always how to link the files together. In AngularJS it has been unnerving for me because I have been trying for months to get my code to work and I cannot even link it on a basic level, so writing further code is useless.</p>
  
  <p>I will post my HTML and all my AngularJS files for you to see and please tell me what it is I am doing wrong, and how to prevent this for the future. I'm doing a codecademy fullstack course and I will be needing to add ReactJS and Jquery as well. I go the Jquery transitions to work on all other parts of my site, but I fear it will be a problem once I try to put it here.</p>
  
  <p>P.s. I don't know how to make multiple Javascript files in JSfiddle, but I hope it'll do.</p>
  
  <p>The code:</p>
  
  <pre><code>var app = angular.module("SugesstionBox", []);
  
  // my HomeController.js file
  
  app.controller("HomeController", ['$scope', 'suggestions' function($scope, suggestions){
      $scope.posts = suggestions.posts;
     $scope.message = "AngularJS Tutorial";
  }]);
  
  // My suggestions.js service file
  
  app.factory('suggestions', [function(){
      var demosuggestions = {
          posts: [
              {
              title: 'free pizza is amazing!',
              upvotes: 1,
              comments: [],
              },
              {
  
              title: 'free pizza is still amazing!',
              upvotes: 5,
              comments: [],
              }
  
          ]
  
      };
      return demosuggestions;
  }]);
  </code></pre>
  
  <p><a href="https://jsfiddle.net/salimfarhat/9znr99ku/" rel="nofollow noreferrer">Complete example on JSFiddle.</a></p>