Question

所以我正在构建一个投资组合页面，它使用json文件来存储项目信息。出于某种原因，我无法在ng-view上显示任何内容，任何想法都会有所帮助！

主页：

<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文件可能存在问题，或者我是如何尝试访问它的。在这一点上任何事情都会有所帮助。（已添加所有依赖项）。

Answer 1

它不是templateUlr:而是：templateUrl:

您需要注入$http并且它会起作用。

这是一个有效的solution。

Answer 2

将$ http添加到控制器

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

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

})

似乎无法让这个GET方法在AngularJS中正常工作

2 个答案: