javascript – 无法加载角度spa上的不同页面

我正在快速/节点服务器上构建一个角度应用程序.有两页.我在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&GT&LT /锂&GT它没有加载页面,它认为是另一个加载索引并失败的模板.我甚至尝试以不同的方式设置链接,如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 举报,一经查实,本站将立刻删除。

相关推荐


根据官网 入门 express
java叫接口control什么的app.get.post等等都是请求方式我们可以在游览器输入localhost端口/或者在Apifox里面写。
为了前端丢进去的时候可以直接判断中间件就是经过了这个就会被使用可以做一些自己的数据处理什么的。
Express 文件的上传和下载
运行命令下载app.js 增加中间件。
基本模板来的 后面用后就有什么加什么都行。
此篇完成 增删 刷新文件 的基本操作
最基本的创建 以及 添加了其他的一些插件 登录接口和四个接口
由于每个接口都要放就很麻烦 所以做个中间件
1importre234defstrip_operate(exp):#合并多余的操作符5exp=exp.replace("+-","-")6exp=exp.replace("--","+")7returnexp8910defcal_exp_son(exp_son):#计算两数的乘除11if&
 socket.html<script>//高级api不兼容socket.io//http单向的,socket是双向的,传输都靠tcpletsocket=newWebSocket('ws://localhost:3000')socket.onopen=()=>{//多个页面通信就是先发给服务器,服务器再发给另一个页面socket.send('我
M模式:类,表示数据的应用程序和使用验证逻辑以强制实施针对这些数据的业务规则。V视图:应用程序使用动态生成HTML响应的模板文件。C控制器:处理传入的浏览器请求的类中检索模型数据,然后指定将响应返回到浏览器的视图模板。简单练习: 1、添加ControllerHelloWorldControlle
在Node开发中免不了要使用框架,比如express、koa、koa2拿使用的最多的express来举例子开发中肯定会用到很多类似于下面的这种代码varexpress=require('express');varapp=express();app.listen(3000,function(){console.log('listen3000...');});app.use(middle
node的http创建服务与利用Express框架有何不同原生http模块与使用express框架对比:consthttp=require("http");letserver=http.createServer(function(req,res){//服务器收到浏览器web请求后,打印一句话console.log("recvreqfrombrowser");
编辑nginx文件vi/usr/local/etcginxginx.confnginx配置如下,配置后需重启nginxnginx-sreloadlocation~.*\.json{roothtml;add_header"Access-Control-Allow-Origin""*";}前端index.html<script>fetch('http://localhost:12
constexpress=require('express')constapp=express()//步骤的拆解constresult=express.static('./views')app.use(result)//再次托管一下样式表的资源目录app.use('/css',express.static('./css'))//托管JS文件目录app.use('/js&#
问题描述:最近在做毕设,express里边的中间件(body-parser)失效,req.body获取不到任何值,req.query能获取到值。一开始加body-parser中间件是有用的,直到昨天加了token之后,body-parser失效。试着把token去掉,无济于事,也不是这个问题,也有说版本对不上的,换了中间件的引入方法,还是没用!!! 后
express官网:---->传送门 expressexpress框架有许多功能,比如路由配置,中间件,对于想配置服务器的前端来说,非常便捷自从node发展之后,基于nodejs的开发框架也不断涌现出来,express就是其中之一,最近简单的写了点express框架的简单的处理请求的demo首先是安装express模块npminstall
目录问题: 操作:Win+S按键,输入“事件查看器”问题详情:模块DLLC:\ProgramFiles(x86)\IISExpress\aspnetcore.dll未能加载。返回的数据为错误信息。问题:  操作:Win+S按键,输入“事件查看器” 问题详情:模块DLLC:\ProgramFiles(x86)\IISExpress\aspnetcore.dll
//获取阿里云市场,快递物流记录https://market.aliyun.com/products/56928004/cmapi022273.html?spm=5176.2020520132.101.26.61f97218v18GBF#sku=yuncode1627300000//get_express_log(self::$config['web']['aliyun_AppCode']阿里云市场AppCode,缓存秒数如300秒,'快递公司代