Question

似乎无法将test.json数据输出到我的本地。

不确定是否与我在本地运行它的事实有关。

谢谢：）

的index.html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body ng-app="testApp">

    <div class="main" ng-controller="MainController">
        <div class="container">
            <div ng-repeat="info in test">
                <p>{{ info.nm }}</p>
                <p>{{ info.cty }}</p>
                <p>{{ info.hse }}</p>
                <img ng-src="{{ info.cty }}">
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

    <!-- Include the AngularJS library -->
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>

    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>

    <!-- Services -->
    <script src="js/services/servicetest.js"></script>

  </body>
</html>

app.js

var app = angular.module('testApp', ['']);

MainController.js

app.controller('MainController', ['$scope', 'test', function($scope, test) {
  test.success(function(data) {
    $scope.test = data;
  });
}]);

servicetest.js

app.factory('test', ['$http', function($http) {
  return $http.get('test.json')
            .success(function(data) {
              return data;
            })
            .error(function(err) {
              return err;
            });
}]);

test.json与servicetest.js位于同一文件夹中。

Answer 1

您的代码中存在多个错误。

您不应该将模块依赖项指定为空白（''），这会将探测器请求''并抛出$injector error
```
 var app = angular.module('testApp', []);
```

工厂应返回类似

的方法对象

app.factory('test', ['$http', function($http) {
  var getData = function(){
     return $http.get('test.json')
  }
  return {
    getData: getData
  }
}]);

利用控制器中新创建的工厂方法。

 test.getData().then(function(response) {
    $scope.test = response.data;
 });

Answer 2

你可以试试吗

var app = angular.module('testApp', []);

而不是

var app = angular.module('testApp', ['']);

该数组的意思是，你可以简单地说注入各种依赖。

简单的角度项目不起作用

2 个答案: