Question

我努力尝试这项工作，但所有尝试都失败了。我正在尝试学习Angular路由，我开始非常简单：在同一个文件夹中创建了4个文件：index.html，page1.html，page2.html和page3.html。这是index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>routing</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<script src="D:\Developer Library\MyAngular\angular.min.js"></script>
<script src="D:\Developer Library\MyAngular\Scripts\angular-route.js"></script>

<body ng-app="myApp">
    <a href="#page1">one</a>
    <a href="#page2">two</a>
    <a href="#page3">three</a>
    <div ng-view></div>
    <script>
                var app = angular.module('myApp', ['ngRoute']);
                app.config(function ($routeProvider) {
                    $routeProvider
                        .when('/page1', { templateUrl: 'D:\Developer Library\dom\AngularRouting\page1.html' }).
                        when('/page2', { template: '<h1>page2.html</h1>' })//the template is working fine unlike templateUrl
                        .when('/page3', { template: '<h1>page3.html</h1>' });
                    //page1.html, page2.html, page3.html are just files holding headers with some text.-->
                })
            </script>
</body>

</html>

我在控制台窗口中收到了这些错误：

XMLHttpRequest无法加载文件：/// d：/Developer%20LibrarydomAngularRoutingpage1.html。交叉原始请求仅支持协议方案：http，数据， chrome，chrome-extension，https，chrome-extension-resource。

和

错误：[$ compile：tpload] http://errors.angularjs.org/1.5.8/ $编译/ tpload P0 = d％3ADeveloper％20LibrarydomAngularRoutingpage1.html＆安培; P1 = -1＆安培; P2 = 在angular.min.js：6 在angular.min.js：156 在angular.min.js：131 at m。$ eval（angular.min.js：145） at m。$ digest（angular.min.js：142） at m。$ apply（angular.min.js：146）在HTMLBodyElement。（angular.min.js：115）在Sf（angular.min.js：37）在HTMLBodyElement.d（angular.min.js：37）

我做了所有可能的改变以使其发挥作用：我将锚元素的href值更改为/#/page1，#/page1，/page，page ，我还将templateUrl值更改为类似的值（我最后一次尝试是文件的完整路径！）我实际上在href值和when方法的第一个参数以及templateUrl之间感到困惑，所以我有一些问题，我认为这些问题可以帮助我理解路由在角度方面的工作原理：

他们每个人所指的是：href和when方法的第一个参数是一样的吗？我可以为href属性分配任何值，并在when参数中引用它吗？

templareUrl值是否与当前文件的位置（index.html）相关，

哈希符号＃是什么意思以及它为什么重要？

Answer 1

Angular正在通过AJAX加载模板，而AJAX无法访问本地文件系统。

您必须在服务器（可以使用本地服务器）上运行app才能使templateUrl正常工作。

AngularJS路由不适用于templateUrl？

1 个答案: