找不到AngularJS页面。主页注入指数模板，但没有其他网页

我有我的app.js并存储在该项目的JS文件夹controller.js文件，这里的每个找不到AngularJS页面。主页注入指数模板，但没有其他网页

片段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（）状态回复”

我一直在寻找的是什么问题，但不能找到一个，网址当我点击的是'http://localhost:5000/about'。

来源

2017-04-04 Haz88

我想你可以从您的href删除/或以“＃/试试关于” About – CrazyMac

我认为你应该使用ui-router，它比ngroute更好 – Akashii

您需要将#添加到您的锚

<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 funtion在你的模板

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

但是，如果你想利用HTML5 mode的优势做选择，摆脱#并有更漂亮的网址，至少在支持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 may need some server side configuration为了所有的导航重定向到您的index页面

希望它可以帮助

来源

2017-04-04 14:50:29

找不到AngularJS页面。主页注入指数模板，但没有其他网页

回答

相关问题