CODEWITHSUNDEEP
javascriptangularjsjson
Carson
Carson

Reputation: 194

Can't seem to get this GET method to work properly in AngularJS

So I am building a portfolio page which uses a json file to store the project information. For some reason, I can't get the anything to show on ng-view, any ideas would be helpful!

Link to the Plunkr

Main Page:

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

Main View 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>

Application 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 file (just an example):

[{
  "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": "#"
}]

I suspect there may be an issue with the json file, or how I am trying to access it. Anything will help at this point. (All dependencies are already added).

Upvotes: 0

Views: 47

Answers (2)

Pritam Banerjee
Pritam Banerjee

Reputation: 18933

It is not templateUlr: instead it is : templateUrl:

You will need to inject $http and it will work.

Here is a working solution.

Upvotes: 1

Flak
Flak

Reputation: 2670

Add $http to controller

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

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

})

Upvotes: 0

Related Questions