gpt4 book ai didi

javascript - 未找到 AngularJS 页面。主页已注入(inject)索引模板,但未注入(inject)其他页面

转载 作者:行者123 更新时间:2023-12-01 05:21:22 26 4
gpt4 key购买 nike

我将 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 命令行界面生成。要修改它,请编辑项目配置的公共(public)目录中的 404.html 文件。'

控制台中的错误只是“无法加载资源:服务器响应状态为 404 ()”

我一直在寻找问题所在,但找不到,我点击“关于”时的网址是“http://localhost:5000/about” '。

最佳答案

您需要添加#到你的 anchor

<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);
......

注入(inject)$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页面

希望对你有帮助

关于javascript - 未找到 AngularJS 页面。主页已注入(inject)索引模板,但未注入(inject)其他页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43208984/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com