I can't get datas from json file with angula.js

StackOverflow https://stackoverflow.com//questions/25085408

Question

I have theses codes:

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="pizzasApp">
    <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap-theme.min.css">
         <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
         <script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
         <script type="text/javascript" src="angular.min.js"></script>
         <script type="text/javascript" src="angular-route.min.js"></script>
         <script type="text/javascript" src="app.js"></script>
         <script type="text/javascript" src="configure.js"></script>
         <title>New Web Project</title>
    </head>
    <body>
         <div ng-view></div>
    </body>
</html>

pizza-list.html:

<div ng-repeat="pizza in pizzas">
    <a href="#/pizzas/{{pizza._id}}">{{pizza.name}}</a>
</div>

app.js:

(function(){    
    var pizzasApp = angular.module('pizzasApp',['ngRoute','app']);

    pizzasApp.config(['$routeProvider', function($routeProvider){

        $routeProvider.
        when('/pizzas',{
            templateUrl: 'pizza-list.html',
            controller: 'PizzasController'
        }).
        otherwise({
            redirecTo: '/pizzas'
        });
    }]);

})();

configure.js:

(function(){

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

     app.controller('PizzasController',['$scope','$http',function($scope,$http){
         $http.get('http://162.250.78.47/api/pizzas').success(function(data){
              $scope.pizzas = data;
         });
     }]);

})();

The problem is that I can't get the datas from json file. I know that the problem isn't the json file because I can get the datas with other way but without angular-route. But I'm interested in that.

Was it helpful?

Solution

This works: http://plnkr.co/edit/AsAPhINnDmBToTRFmgZf?p=preview

It looks like .otherwise is not doing its job when there is just a '/'. I hacked around it with:

$routeProvider.when('/pizzas',{
    templateUrl: 'pizza-list.html',
    controller: 'PizzasController'
}).when('/',{
  redirectTo: '/pizzas'
}).otherwise({
  redirecTo: '/pizzas'
});

Edit: I found the actual error, there were a typo in redirectTo. It was spelled redirecTo.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top