Angularjs 角度路由-未找到显示页面_Angularjs

Angularjs 角度路由-未找到显示页面

angularjs

Angularjs 角度路由-未找到显示页面,angularjs,Angularjs,//嗨，我正在努力学习角度布线。我只是在尝试一个来自youtube的简单例子。当我点击第1页和第2页的链接。我仍然停留在同一页上。请帮忙 //This is index.html <!DOCTYPE html> <html ng-app> <head> <title>Angular Practice</title>[enter image description here][1]

//嗨，我正在努力学习角度布线。我只是在尝试一个来自youtube的简单例子。当我点击第1页和第2页的链接。我仍然停留在同一页上。请帮忙

//This is index.html

<!DOCTYPE html>
<html ng-app>
    <head>
            <title>Angular Practice</title>[enter image description here][1]

            <script src = "app.js" type = "text/javascript"> </script>
    </head>

 <body>

<h1>This is Index.html page</h1> <br/>
<a href = "/#/page1"> This is page 1 </a> <br/>
<a href = "/#/page2"> This is page 2 </a> <br/>


<div ng-view> </div> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
            <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"> </script>

 </body>

</html>

//这是page1.html

这是第一页 //这是page2.html

这是第二页从链接中删除

。像这样

是因为您启用了

HTML5模式

编辑

您应该通过添加到@HJz suggestion将

更改为



在app.js中，您在这两个条件中为page1定义了路径，并使用相应的templateUrl将其中一个条件更改为page2
var myApp = angular.module('myApp',['ngRoute'])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
      $routeProvider.when('/page1', { templateUrl : 'partials/page1.html'});
      $routeProvider.when('/page2', { templateUrl : 'partials/page2.html'});
      $routeProvider.otherwise({ redirectTo : 'index.html'});

      $locationProvider.html5mode({enabled : true, requiredBase : false});
}]);

首先，将html代码更新为
<a href = "#page1"> This is page 1 </a> <br/>

您的代码中有许多语法错误……我将在下面的解释中描述这些错误
首先对于templateUrl属性，模板应与其文件扩展名一起提供。假设您使用.html
文件作为模板，则templateUrl应更改如下：
$routeProvider.when('/page1', { templateUrl : 'partials/page1.html'});
$routeProvider.when('/page2', { templateUrl : 'partials/page2.html'});

你犯的第二个语法错误是在使用html5Mode时。记住html5Mode关键字函数是区分大小写的
从HTML5模式
更改为HTML5模式

第三个是将requiredBase属性更改为requiredBase
 $locationProvider.html5Mode({enabled : true, requireBase : false});

最后一个一个是删除锚定标签中的hasbang以跟随链接。这是要完成的，因为您已启用HTML5模式
<a href="/page1">This is page 1 </a>
  <br />
 <a href="/page2">This is page 2 </a>
  <br />







编辑1:
在头部的app.js上方加载标签，如下所示
<head>
  <title>Angular Practice</title>[enter image description here][1]
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"> </script>
  <script src = "app.js" type = "text/javascript"> </script>


角度练习[在此处输入图像描述][1]


但将所有脚本加载到body标记中是一种很好的做法。为了突出显示脚本的顺序，我将脚本放在head标记中。
请尝试从链接中删除。
。像这样的仍然显示找不到页面。这是github链接。请检查一下，让我知道哪里出错了Uncaught ReferenceError:angular未在app.js:1中定义。这是我在检查开发工具时遇到的错误。您在错误的位置加载angular.js和route.js。将两个脚本标记都放在您加载到head中的app.js上方section@shailuk很高兴听到。如果你觉得这是答案，把它标记为答案并投票表决；通过点击勾号和向上箭头按钮，它将有助于其他网站，但它表示页面未找到。github.com/shailuk/routingPrac.git这是github链接。请检查一下，让我知道哪里出错了Uncaught ReferenceError:angular未在app.js:1中定义。这是我在检查开发人员工具时遇到的错误。
 $locationProvider.html5Mode({enabled : true, requireBase : false});

<a href="/page1">This is page 1 </a>
  <br />
 <a href="/page2">This is page 2 </a>
  <br />

<head>
  <title>Angular Practice</title>[enter image description here][1]
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"> </script>
  <script src = "app.js" type = "text/javascript"> </script>