我正在快速/节点服务器上构建一个角度应用程序.有两页.我在app.js上设置它们
var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes.list);
app.use('/users/', users.showUsers);
这里是路由(index.js和users.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>
链接是菜单和主div中索引加载的不同模板.但是,当我点击< li>< a href =“/ users /”>用户与LT; / A>< /锂>它没有加载页面,它认为是另一个加载索引并失败的模板.我甚至尝试以不同的方式设置链接,如http:// localhost:4800 / users,没有.我应该在routeProvider中设置另一个,然后为用户重新加载页面吗?有没有更智能的方法来不使用routeProvider?我在app.js中为用户声明了一条不同的路线,为什么它不加载页面?
提前致谢
UPDATE
我换了这个
app.use('/', routes.list);
app.use('/users/', users.showUsers);
对此
app.get('/', routes.list);
app.get('/users/', users.showUsers);
但仍然没有
更新2
我在路由中还有一个相对的情况和一个相对的“notFoundController”控制器.我一开始没有把它们包括在内,以简化问题.当我点击用户时,我会在页面上看到“在找到您想要的页面时遇到问题”.
更新3
我的原始代码是
sp.config(function($routeProvider,$locationProvider){.在相同的配置函数中
$locationProvider.html5Mode(真).hashPrefix( ‘!’);.如果删除它并将菜单URL前缀从/更改为#(用户仍然是/)它一切正常.但我不明白为什么html 5模式打破了整个代码而我不想使用#
解决方法:
试试这个:
<li><a href="/users/" target="_self"> users</a></li>
target属性将强制angular不使用自己的路由,只执行服务器请求.
原文地址:https://codeday.me/bug/20190702/1358654.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。