Raduken Raduken - 3 months ago 13
AngularJS Question

How to load json into my angular page with ng-include?

If I run app.html my json loads ok, but if I run projects.html who is in other directory I cannot run my json.
I hope be clear.

SITE STRUCTURE:

**SITE**
app/
app.html
todos.json
app.js
content-projects.html
projects.html


app.html

<!doctype html>
<html ng-app="App" >
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos">
{{todo.text}} - <em>{{todo.done}}</em>
</li>
</ul>
</body>
</html>


app.js

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

App.controller('TodoCtrl', function($scope, $http) {
$http.get('todos.json')
.then(function(res){
$scope.todos = res.data;
});
});


todos.json

[{ "text":"learn angular", "done":true },
{ "text":"build an angular app", "done":false},
{ "text":"something", "done":false },
{ "text":"another todo", "done":true }]


this will run well and load the json if I run app.html

but if I run projects.html I cannot get the json, someone know what I am doing wrong?

projects.html

<!DOCTYPE html>
<html lang="en" ng-app="App" ng-strict-di xmlns:ng="http://angularjs.org">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<style>
body {
padding-top: 100px;
padding-bottom: 20px;
}
</style>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Angular 1.5.7-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>

</head>

<body>

<div ng-include="'app/content-projects.html'"></div>

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="public/js/vendor/bootstrap.min.js"></script>

<script src="app/app.js"></script>

</body>

</html>


content-projects.html

<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos">
{{todo.text}} - <em>{{todo.done}}</em>
</li>
</ul>
</div>

Answer

1)You're not using function annotation so ng-strict-di fails. Try to delete this.

2)When you call app.js the file route change. Try to put a relative path.

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

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('[approot]/app/todos.json')
       .then(function(res){
          $scope.todos = res.data;
        });
});