title: use AngularJs NgResource to load JSON file from localhost
body: <h1>Overview</h1>
  
  <p>I am building an app (running on MAMP) that holds contact information that will expand to hold more data such as project name &amp; deadline, once this part is functional.</p>
  
  <h2>Questions</h2>
  
  <p>When the user visits <code>/projects.php#/project/</code> I would like them to see a list of all the project names with a link to their detail page.</p>
  
  <ol>
  <li>How should I write the following to access all of my data? </li>
  </ol>
  
  <p>Do I need the .json at the end?</p>
  
  <p>What does the @id do?</p>
  
  <p><code>return $resource('data/project.json/:id', {id: '@id'});</code></p>
  
  <p>When the user visits <code>/projects.php#/project/a-gran-goodn</code> I would like them to see the details about this project(for now, just the name &amp; address).</p>
  
  <ol start="2">
  <li>How should I write the following to return my data by Id?
  <code>$scope.project = $routeParams.id ? Project.get({id: $routeParams.id}): new Project();</code></li>
  </ol>
  
  <h2>plunkr file</h2>
  
  <p><a href="http://plnkr.co/edit/7YPBog" rel="nofollow">http://plnkr.co/edit/7YPBog</a></p>
  
  <h2>project.json</h2>
  
  <p>This file lives on <code>http://localhost:8888/angularjs/ProjectsManager/data/project.json</code></p>
  
  <pre><code>[
  { "address" : [ " 3156 Dusty Highway",
          " Teaneck New Jersey 07009-6370 US"
  ],
          "id" : "a-gran-goodn",
          "name" : "Grania Goodner",
          "phone" : " (862) 531-9163"
  },
  { "address" : [ " 62 Red Fawn Moor",
          " Rodney Village West Virginia 25911-8091 US"
  ],
          "id" : "b-aime-defranc",
          "name" : "Aimery Defranco",
          "phone" : " (681) 324-9946"
  }
  ]
  </code></pre>
  
  <h2>app.js</h2>
  
  <pre><code>var projectsApp = angular.module('projects', ['ngResource']);
  
  projectsApp.config(function($routeProvider) {
    $routeProvider
            .when('/', {
      controller: 'ProjectListCtrl',
      templateUrl: 'partials/projectlist.html'})
            .when('project/:id', {
      controller: 'ProjectDetailCtrl',
      templateUrl: 'partials/projectdetail.html'
    })
            .otherwise('/');
  });
  
  projectsApp.factory('Project', function($resource) {
    return $resource('data/project.json/:id', {id: '@id'});
  });
  
  projectsApp.controller('ProjectListCtrl', function(Project, $scope) {
    $scope.projects = Project.query();
    console.log($scope.projects);
  });
  
  projectsApp.controller('ProjectDetailCtrl', function(Project, $routeParams, $scope) {
    $scope.project = $routeParams.id
            ? Project.get({id: $routeParams.id})
            : new Project();
  });
  </code></pre>
  
  <h2>partials/projectlist.html</h2>
  
  <pre><code>&lt;a href="#/project/" class="btn"&gt;Add new item&lt;/a&gt;
  &lt;ul class="unstyled"&gt;
      &lt;li ng-repeat="project in projects"&gt;
      &lt;div class="well"&gt;    
        &lt;h2&gt;&lt;small&gt;{{project.id}}&lt;/small&gt; {{project.name}}&lt;/h2&gt;
        &lt;a href="#/project/{{project.id}}" class="btn btn-link"&gt;View Info for {{project.name}}&lt;/a&gt;
          &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h2>partials/projectdetails.html</h2>
  
  <pre><code>&lt;h3&gt;Information&lt;/h3&gt;
  &lt;p&gt;Name: {{project.name}}&lt;/p&gt;
  &lt;p&gt;Phone Number: {{project.phone}}&lt;/p&gt;
  &lt;p ng-repeat="line in project.address"&gt;{{line}}&lt;/p&gt;
  </code></pre>
  
  <h2>index.php</h2>
  
  <pre><code>&lt;?php
  header('Access-Control-Allow-Origin: *');
  ?&gt;
  &lt;!doctype html&gt;
  &lt;html ng-app="projects"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title ng-bind="title" ng-cloak&gt;Restaurant &amp;mdash;&lt;/title&gt;
  
      &lt;link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="ProjectListCtrl"&gt;
      &lt;a class="brand" href="#"&gt;Projects Manager&lt;/a&gt;
  
      &lt;div id="app-container" class="container-fluid"&gt;
        &lt;div class="row-fluid"&gt;
          &lt;div class="span12" id="main" ng-view&gt;
          &lt;/div&gt;&lt;!--/.span12--&gt;
        &lt;/div&gt;&lt;!--/.row-fluid--&gt;
        &lt;footer&gt;Copyright Projects &amp;copy; 2013&lt;/footer&gt;
      &lt;/div&gt;&lt;!--/.container--&gt;
  
  
      &lt;script src="http://code.jquery.com/jquery-1.10.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Don't forget to load angularjs AND angular-resource.js --&gt; 
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.js&gt;&lt;/script&gt;
      &lt;!--Controllers--&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>