gpt4 book ai didi

javascript - 无法在 Angular 水疗中心加载不同的页面

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:15:43 25 4
gpt4 key购买 nike

我正在 express/node 服务器上构建一个 Angular 应用程序。有两页。我将它们设置为 app.js

var routes = require('./routes/index');
var users = require('./routes/users');

app.use('/', routes.list);
app.use('/users/', users.showUsers);

这是路线(index.jsusers.js)

exports.list = function(req, res){
res.render('index')
};

exports.showUsers = function(req, res){
res.render('users')
};

现在,users.ejs只是一个像

这样的虚拟页面
<!DOCTYPE html>
<html >
<div id="main">
this is where content will be injected
</div>
</html>

但是index.ejs水疗风格像

<html ng-app="sp">
var sp = angular.module('sp', ['ngRoute']);

sp.config(function ($routeProvider, $locationProvider) {
// configure the routes


$routeProvider
.when('/', {
// route for the home page
templateUrl: 'http://localhost:4800/home.html',
controller: 'homeController'
})

.when('/about', {
// route for the about page
templateUrl: 'http://localhost:4800/about.html',
controller: 'aboutController'
})
.otherwise({
templateUrl: 'http://localhost:4800/routeNotFound.html',
controller: 'notFoundController'
});

$locationProvider.html5Mode(true).hashPrefix('!');

});

sp.controller('homeController', function ($scope) {
$scope.message = 'Welcome to my home page!';
});

sp.controller('aboutController', function ($scope) {
$scope.message = 'Find out more about us.';
});

sp.controller('notFoundController', function ($scope) {
$scope.message = 'There seems to be a problem finding the page you wanted';
});

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

<div id="main">
<div ng-view></div>
</div>

链接是菜单和索引加载的不同模板 main div .但是当我点击 <li><a href="/users/"> users</a></li>它不加载页面,它认为是另一个要加载到索引中的模板,但失败了。我什至尝试以不同的方式设置链接,例如 http://localhost:4800/users , 没有什么。我应该再设置一个 when 吗?在routeProvider然后重新加载 users 的页面?有没有更聪明的方法通过不使用 routeProvider 来做到这一点? ?我在 app.js 中声明了一条不同的路线对于 users ,为什么它不只是加载页面?

提前致谢

更新

我改变了这个

app.use('/', routes.list);
app.use('/users/', users.showUsers);

对此

app.get('/', routes.list);
app.get('/users/', users.showUsers);

还是什么都没有

更新 2我还有一个 otherwise路由中的案例和相关的“notFoundController” Controller 。起初我没有包括它们,以使问题简短。当我点击用户时,我在页面上看到“找到您想要的页面似乎有问题”。

更新 3我的原始代码是 sp.config(function ($routeProvider, $locationProvider) { .在同一个配置函数中有 $locationProvider.html5Mode(true).hashPrefix('!'); .如果删除它并更改菜单 url 前缀 /# (用户仍然有 / )一切正常。但我不明白为什么 html 5 模式会破坏整个代码而且我不想使用 #

最佳答案

试试这个:

 <li><a href="/users/" target="_self"> users</a></li>

target 属性会强制 angular 不使用自己的路由,只做服务器请求。

关于javascript - 无法在 Angular 水疗中心加载不同的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31807847/

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