如何用ng-include加载json到我的angular页面

如果我运行app.html我的json加载ok，但如果我运行projects.html谁是在其他目录我不能运行我的json。我希望你能说清楚。

网站结构:

**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 }]

如果我运行app.html

这将运行良好并加载json

但如果我运行projects.html我无法得到json，有人知道我做错了什么?

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>

1)您没有使用函数注释，因此ng-strict-di失败。试着删除这个

2)当你调用app.js时，文件路由改变。尝试放置一个相对路径。

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

相关内容

最新更新

热门标签：