Question

当我偶然发现一个奇怪的问题时，我开始学习一些AngularJS。

以下代码来自在线教程Github。

虽然它在Safari（MAC）上完美运行，但它不会在Chrome上加载。当我尝试在Windows上的Chrome中打开它时，会发生同样的事情。

任何有关Chrome无法工作的想法？ Chrome也不会加载AngularJS管理模板（例如Metronics）。

请注意，当我从文件夹启动这些代码时，这些代码无论如何都不起作用，但它们确实可以正常工作（例如，在教程或在线预览中使用有节奏的角度）

干杯！

错误消息

XMLHttpRequest无法加载file：///Users/aavelyn/Desktop/untitled%20folder/articles.json。交叉源请求仅支持协议方案：http，data，chrome，chrome-extension，https，chrome-extension-resource。（匿名函数）@ angular.js：10413

json文件是

[
  {"id": "1", "name": "Pizza Vegetaria", "price": 5 },
  {"id": "2", "name": "Pizza Salami",    "price": 5.5 },
  {"id": "3", "name": "Pizza Thunfisch", "price": 6 },
  {"id": "4", "name": "Aktueller Flyer", "price": 0 }
]

＆＃13;

'use strict';

angular.module('tutorialApp', [])
  .controller('ArticlesCtrl', function($scope, $http) {
    $http.get('articles.json').then(function(articlesResponse) {
      $scope.articles = articlesResponse.data;
    });
  });

＆＃13;

<html ng-app="tutorialApp">

<head>
  <meta charset="utf8" />
  <title>AngularJS Tutorial</title>
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
  <div class="container">

    <form>
      <input type="text" ng-model="search">
      <p ng-show="search">Du suchst gerade nach: {{search}}</p>
    </form>

    <table class="table" ng-controller="ArticlesCtrl">
      <tr ng-repeat="article in articles | filter:search">
        <td>{{article.id}}</td>
        <td>{{article.name}}</td>
        <td>{{article.price}}</td>
      </tr>
    </table>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="app.js"></script>
</body>

</html>

＆＃13;

Answer 1

浏览器已采取安全措施，以防止通过ajax从文件系统加载文件。如果要在本地运行，则需要在本地运行某种服务器。您可以在本地安装和运行许多非常简单的服务器。例如，如果安装了nodejs，则可以使用命令行中的以下命令安装node-static：

npm install -g node-static

然后，CD进入您的文件所在的目录并运行：

static

一个简单的服务器将开始在http://localhost:8080处运行您的文件。

从nodejs.org安装nodejs。有关node-static的信息位于https://github.com/cloudhead/node-static

AngularJS无法在Chrome（Mac和Windows）中使用，但在Safari中无法使用

1 个答案: