尝试运行此导入json文件应用程序

时间:2016-09-29 17:38:48

标签: javascript angularjs

我试图使用这个"导入json"代码尝试更好地理解一些东西,但是当我在本地运行它时找不到我的data.json文件。我应该在哪里放置我的data.json文件?我有我的主目录,其中index.html所在,我有一个我的js文件的应用程序目录。谢谢。

HTML

<!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.0.3/angular-resource.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app/services.js"></script>
    <script src="app/app.js"></script>

  </head>

  <body ng-controller="MainCtrl">
    <code>
      {{name}}
    </code>
    <hr />
    <code>
      {{children | json}}
    </code>
    <hr />
    <h2>children</h2>
    <div ng-repeat="child in children">
      {{child.data}}
    </div>
  </body>

</html>

app.js

var app = angular.module('angularjs-starter', ['jsonService']);

app.controller('MainCtrl', function($scope, JsonService) {
  JsonService.get(function(data){
    $scope.name = data.name;
    $scope.children = data.children;
  });
});

services.js

angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource) {
  return $resource('data.json');
});

0 个答案:

没有答案