[英]Refresh specific page with Angular, Express and Jade (using html5mode)
I'm trying to refresh a page and execute client route to open a template inside ng-view 我正在尝试刷新页面并执行客户端路由以在ng-view中打开模板
Index.jade Index.jade
extends layouts/default
block content
section(data-ng-view)
script(type="text/javascript").
window.user = !{user};
default.jade default.jade
doctype html
html(lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product')
include ../includes/head
body
div(data-ng-include="'static/modules/core/views/core.header.view.html'", data-role="navigation")
div(data-ng-include="'static/modules/core/views/core.index.view.html'", data-role="navigation")
div(data-ng-include="'static/modules/core/views/core.menu.view.html'", data-role="navigation")
div(data-ng-include="'static/modules/core/views/core.footer.view.html'", data-role="navigation")
include ../includes/foot
Server route 服务器路由
// Camera Routes
app.get('/api/cameras', cameras.all);
app.post('/api/cameras', auth.requiresLogin, cameras.create);
app.get('/api/cameras/:cameraId', cameras.show);
app.put('/api/cameras/:cameraId', auth.requiresLogin, auth.article.hasAuthorization, cameras.update);
app.del('/api/cameras/:cameraId', auth.requiresLogin, auth.article.hasAuthorization, cameras.destroy);
app.param('cameraId', cameras.camera);
// Home route
app.get('/', index.render);
express.js express.js
/**
* Module dependencies.
*/
var express = require('express');
var flash = require('connect-flash');
var helpers = require('view-helpers');
var config = require('./config');
module.exports = function(app, passport) {
console.log('Initializing Express');
app.set('showStackError', true);
//Prettify HTML
app.locals.pretty = true;
//Should be placed before express.static
app.use(express.compress({
filter: function(req, res) {
return (/json|text|javascript|css/).test(res.getHeader('Content-Type'));
},
level: 9
}));
//Setting the fav icon and static folder
app.use(express.favicon());
app.use('/static',express.static(config.root + '/public'));
//Don't use logger for test env
if (process.env.NODE_ENV !== 'test') {
app.use(express.logger('dev'));
}
//Set views path, template engine and default layout
app.set('views', config.root + '/app/views');
app.set('view engine', 'jade');
//Enable jsonp
app.enable("jsonp callback");
app.configure(function() {
//cookieParser should be above session
app.use(express.cookieParser());
// request body parsing middleware should be above methodOverride
app.use(express.urlencoded());
app.use(express.json());
app.use(express.methodOverride());
//express/mongo session storage
app.use(express.session({ secret: '$uper$ecret$e$$ionKey'}));
//connect flash for flash messages
app.use(flash());
//dynamic helpers
app.use(helpers(config.app.name));
//use passport session
app.use(passport.initialize());
app.use(passport.session());
//routes should be at the last
app.use(app.router);
//Assume "not found" in the error msgs is a 404. this is somewhat silly, but valid, you can do whatever you like, set properties, use instanceof etc.
app.all('/*', function(req, res, next) {
res.render('index.jade', {'root': 'app/views/'});
});
app.use(function(err, req, res, next) {
//Treat as 404
if (~err.message.indexOf('not found')) return next();
//Log it
console.error(err.stack);
//Error page
res.status(500).render('500', {
error: err.stack
});
});
//Assume 404 since no middleware responded
app.use(function(req, res, next) {
res.status(404).render('404', {
url: req.originalUrl,
error: 'Not found'
});
});
});
};
HTML5 ENABLE HTML5 ENABLE
//Setting HTML5 Location Mode
angular.module('mean').config(['$locationProvider',
function($locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix("!");
}
]);
Client router here, I want to show this template inside ng-view 客户路由器在这里,我想在ng-view中显示这个模板
angular.module('mean').config(['$stateProvider',
function ($stateProvider) {
$stateProvider.
state('viewCamera', {
url: "/cameras/:cameraId",
templateUrl: 'static/modules/cameras/views/cameras.camera.view.html'
});
}
]); ]);
Index view with ui-view tag 带有ui-view标签的索引视图
<section data-ng-controller="MapController" data-ng-init="find()">
<div ui-view>
</div>
<div class="map-content" ng-class="{'map-content-left': cameraOpen != undefined}">
<leaflet defaults="defaults" center="center" class="map"></leaflet>
</div>
</section>
My html head 我的html头
head
base(href='/')
What I want? 我想要的是? When insert this url manually: localhost:3000/cameras/12, call server and get index to call client route and open the template inside ng-view
手动插入此URL时:localhost:3000 / cameras / 12,调用服务器并获取索引以调用客户端路由并在ng-view中打开模板
What's the problem? 有什么问题? When I insert this url in browser, I get the index.jade with download mode
当我在浏览器中插入此URL时,我获得了带有下载模式的index.jade
What I already tried? 我已经尝试过了什么?
Change the server route to this (apparently this return rendered index) 将服务器路由更改为此(显然是此返回呈现的索引)
// Home route
app.get('*', index.render);
But the client route is never called 但永远不会调用客户端路由
What's wrong? 怎么了?
EDIT 1 编辑1
My dependencies version 我的依赖版本
"angular": "latest",
"angular-resource": "latest",
"angular-cookies": "latest",
"angular-mocks": "latest",
"angular-ui-utils": "0.0.4",
"angular-translate": "~2.5.2",
"angular-translate-loader-static-files": "~2.5.2",
"ngDialog": "~0.3.7",
"angular-leaflet-directive": "~0.7.10",
"leaflet.markercluster": "~0.4.0",
"angular-loading-bar": "~0.6.0",
"angular-ui-router": "~0.2.13"
I'm using Mean-Stack-Relacional from here: https://github.com/jpotts18/mean-stack-relational 我从这里使用Mean-Stack-Relacional: https : //github.com/jpotts18/mean-stack-relational
EDIT 2 编辑2
I was using angular-route, so I changed to ui-router to see if the problem was solved. 我正在使用angular-route,所以我改为使用ui-router来查看问题是否已解决。
EDIT 3 编辑3
Client Route core 客户路由核心
//Setting up route
angular.module('mean').config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.
state('login', {
url: '/login',
template: '',
controller: 'SessionController',
data: {
method: "login"
}
})
.state('signin', {
url: '/signin',
template: '',
controller: 'SessionController',
data: {
method: "signin"
}
})
.state('home', {
url: '/',
resolve: {
resetMap: function ($q, $location, $rootScope) {
$rootScope.$emit('rootScope:emit', '');
}
}
});
}
]);
@Scymex help me to find this issue: @Scymex帮我找到这个问题:
For anybody who might be using Jade, here's a quick gotcha: div(ui-view)
compiles to <div ui-view="ui-view"></div>.
对于任何可能使用Jade的人来说,这里有一个快速的问题:
div(ui-view)
编译为<div ui-view="ui-view"></div>.
What you need is div(ui-view="").
你需要的是
div(ui-view="").
So, you can have ui-view
inside ng-include
, but need do this trick 所以,你可以在
ng-include
使用ui-view
,但需要这样做
Font: https://github.com/angular-ui/ui-router/issues/679 字体: https : //github.com/angular-ui/ui-router/issues/679
You're using HTML5 routes with a hashbang fallback. 您正在使用带有hashbang后备的HTML5路由。 What that means is you want to set your server up so that requests to
/cameras/12
redirect to /#!/cameras/12
. 这意味着你想要设置你的服务器,以便
/cameras/12
请求重定向到/#!/cameras/12
。 The server will then render your Angular application, which will detect that it wants to go to your viewCamera
state and will rewrite the url on the client. 然后,服务器将呈现您的Angular应用程序,该应用程序将检测到它想要进入您的
viewCamera
状态并将重写客户端上的URL。
You can accomplish this by simply adding the following middleware to your express app: 您只需将以下中间件添加到您的快速应用程序即可实现此目的:
app.use(function (req, res, next) {
res.set('Location', '/#!' + req.path)
.status(301)
.send();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.