找不到 AngularJS 页面.注入索引模板的主页，但不注入其他页面

我有我的应用程序.js和控制器.js文件存储在项目的js文件夹中，这是每个片段

应用.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'
    });
}]);

控制器.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"
});

然后我有我的索引.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 (("响应">

我一直在寻找问题是什么，但找不到，当我点击关于时，网址是"http://localhost:5000/about"。

您需要

将#添加到锚点

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

这将使它起作用。此外，您还可以选择使用 $location 服务以编程方式执行此操作

.controller('HomeController', ['$scope', '$location', function($scope, $location) {
    $scope.title = "Welcome to Website!";
    console.log("HomeController: I was instantiated!");
    $scope.goAbout = function() {
        $location.path('/about');
    };
}])

现在，您可以在模板中使用goAbout功能

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

但是，如果你想利用HTML5 mode，摆脱#并拥有更漂亮的url，至少在支持HTML5 mode的浏览器中，那么你需要在代码中进行一些更新

myApp.config(["$routeProvider", '$locationProvider',
             function ($routeProvider, $locationProvider) {
               $locationProvider.html5Mode(true);
......

注入$locationProvider服务并设置$locationProvider.html5Mode(true);

如果您不需要 <base href="/"> 标记，请使用这样的对象

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

现在，您的链接需要更改

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

你会有更漂亮的网址。请注意，HTML5 mode可能需要一些服务器端配置才能将所有导航重定向到您的index页面

希望对你有帮助

相关内容

最新更新

热门标签：