Question

我尝试运行此代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Exemple 06</title>
</head>
<body>
    <!-- Diretiva ng-repeat -->
    <div ng-controller="MyController">
        <a ng-href="#/">Page 1</a> | <a ng-href="#/p2">Page 2</a>
        <div ng-view="#/p2"></div>
    </div>

    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', ['ngRoute']);

        myApp.config(function($routeProvider){
            $routeProvider
                .when('/'  , {controller: 'MyController', templateUrl: 'p1.html'})
                .when('/p2', {controller: 'MyController', templateUrl: 'p2.html'})
                .otherwise({ redirectTo: '/'});
        });

        myApp.controller('MyController', function($scope){
            $scope.nomes = [
                {id: 1, nome: 'Arthur'},
                {id: 2, nome: 'Portos'},
                {id: 3, nome: 'Aramis'}
            ];
        });
    </script>
</body>

但是会出现以下错误：

XMLHttpRequest无法加载file：///home/93579551515/Desktop/Angular/p1.html。仅支持HTTP的跨源请求。

我不想在网络服务器上运行它。

Answer 1

您可以在p1.html中添加p2.html和index.html等模板，方法是将其放在script标记内，mentioned in the docs。

<script type="text/ng-template" id="p1.html">
  This is the content of the template
</script>

然后angular将不再需要发出AJAX请求来获取它们。

请注意，这些script元素必须在 ng-app后出现。

Answer 2

我在Chrome中遇到同样的问题，如果您使用的是Chrome，则可以在Chrome中停用相同的来源政策。启动Chrome运行：

$ google-chrome --disable-web-security

此处more detail。

Answer 3

路由提供程序使用http协议，这就是为什么如果直接从文件夹运行此代码，您将遇到跨域问题。

将您的文件夹保存在 localhost / route 等服务器上并运行它。

提供类似templateUrl的参考路径：'/ p1.html'

仅支持HTTP的跨源请求

3 个答案: