Javascript 找不到AngularJS页面。主页插入索引模板，但不插入其他页面_Javascript_Jquery_Angularjs

Javascript 找不到AngularJS页面。主页插入索引模板，但不插入其他页面

javascript jquery angularjs

Javascript 找不到AngularJS页面。主页插入索引模板，但不插入其他页面,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我将app.js和controller.js文件存储在项目的js文件夹中，下面是每个文件的一个片段 app.js var myApp = angular.module('myApp', ['ngRoute','RouteControllers']); myApp.config(["$routeProvider",function ($routeProvider) { $routeProvider .when("/", { templateUrl: 'templates/home.htm

我将app.js和controller.js文件存储在项目的js文件夹中，下面是每个文件的一个片段

app.js

var myApp = angular.module('myApp', ['ngRoute','RouteControllers']);
myApp.config(["$routeProvider",function ($routeProvider) {
$routeProvider

.when("/", {
    templateUrl: 'templates/home.html',
    controller: 'HomeController'
}).
  when("/about", {
    templateUrl: 'templates/biography.html',
    controller: 'BiographyController'
    });
}]);

controller.js

angular.module('RouteControllers', [])

.controller('HomeController', function($scope) {

    $scope.title = "Welcome to Website!"
    console.log("HomeController: I was instantiated!")

})

.controller('BiographyController', function($scope) {

    $scope.title = "About"

});

然后我有了index.html文件，基本内容：

 <base href="/">
 <link rel="stylesheet" type="text/css"  href="bootstrap/css/bootstrap.min.css"        />
 <link rel="stylesheet" href="css/style.css">

<body ng-app="myApp">

<a href="/">Home </a>

<a href="/about"> About </a>

<div ng-view> </div>



<script src ="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>

</html>

我的问题是，当我加载页面时，主页上的文本会显示出来（这是应该的），但当我单击“关于”时，会出现以下内容： '找不到页面

在此网站上找不到此指定文件。请检查URL是否有错误，然后重试。为什么我会看到这个？此页面由Firebase命令行界面生成。要修改它，请在项目配置的公用目录中编辑404.html文件

控制台中的错误只是“加载资源失败：服务器以404（）的状态响应”

我一直在搜索问题所在，但找不到问题所在，单击“关于”时的url为“”

您需要将

添加到您的锚定中

<a href="#/">Home</a>
<a href="#/about">About</a>

现在，您可以在模板中使用

goAbout

功能

<div>
  <h1>{{title}}</h1>
  <button ng-click="goAbout()">About us</button>
</div>

注入

$locationProvider

服务并设置

$locationProvider.html5Mode（true）
如果您不需要
标记，请使用如下对象
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

现在，您的链接需要更改
<a href="/">Home</a>
<a href="about">About</a>



你会有更漂亮的网址。请注意，为了将所有导航重定向到您的索引
页面
希望它有帮助我想你可以从你的href中删除/或者用“#/about”试试，我想你应该使用ui路由器，它比ngroute更好
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

<a href="/">Home</a>
<a href="about">About</a>