javascript - 似乎无法使此GET方法在AngularJS中正常工作

因此，我正在构建一个使用json文件存储项目信息的项目页面。由于某种原因，我无法在ng-view上显示任何内容，任何想法都将有所帮助！

Link to the Plunkr

主页：

<body ng-app="myApp">
    <ng-view></ng-view>
</body>

主视图html：

<div class="container">
      <div class="row">
        <div ng-repeat="item in appList">
          <a ng-href="{{item.link}}">
            <img ng-src="{{item.image}}" />
            <h4>
              {{item.title}}
            </h4>
          </a>
        </div>
      </div>
    </div>

应用程序JS：

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

app.config(function($routeProvider){
  $routeProvider
    .when('/',{
      controller: "MainController",
      templateUlr: "main.html"
    });
})

app.controller('MainController', function($scope){
  $scope.appList = {};

  $http({
    method: "GET",
    url:"stuff.json"
  }).success(function(data){
    $scope.appList = data;
  })

})

JSON文件（仅作为示例）：

[{
  "title": "Caption 1",
  "image": "http://placehold.it/450x300?text=Image + 1",
  "link": "#"
}, {
  "title": "Caption 2",
  "image": "http://placehold.it/450x300?text=Image + 2",
  "link": "#"
}, {
  "title": "Caption 3",
  "image": "http://placehold.it/450x300?text=Image + 3",
  "link": "#"
}]

我怀疑json文件或我尝试访问它的方式可能有问题。在这一点上任何事情都会有所帮助。（所有依赖项已添加）。

最佳答案

它不是templateUlr:而是：templateUrl:

您将需要注入$http，它将起作用。

这是一个有效的solution。