用Angular,Express和Jade刷新特定页面(使用html5mode)

我试图刷新一个页面,并执行客户端路由在ng-view中打开一个模板

Index.jade

extends layouts/default block content section(data-ng-view) script(type="text/javascript"). window.user = !{user}; 

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 

服务器路由

 // 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

 /** * 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

 //Setting HTML5 Location Mode angular.module('mean').config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode(true); $locationProvider.hashPrefix("!"); } ]); 

这里的客户端路由器 ,我想在ng-view里面显示这个模板

 angular.module('mean').config(['$stateProvider', function ($stateProvider) { $stateProvider. state('viewCamera', { url: "/cameras/:cameraId", templateUrl: 'static/modules/cameras/views/cameras.camera.view.html' }); } 

]);

带有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> 

我的HTML头

 head base(href='/') 

我想要的是? 当手动插入这个URL:localhost:3000 / cameras / 12时,调用服务器并获取索引来调用客户端路由并在ng-view中打开模板

有什么问题? 当我在浏览器中插入这个URL时,我用下载模式得到了index.jade

我已经尝试过了吗?

更改服务器的路线(这显然是这个返回呈现的索引)

  // Home route app.get('*', index.render); 

但客户端路由永远不会被调用

怎么了?

编辑1

我的依赖版本

 "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" 

我从这里使用Mean-Stack-Relacional: https : //github.com/jpotts18/mean-stack-relational

编辑2

我正在使用angular度路由,所以我改成了UI路由器,看看问题是否解决了。

编辑3

客户端路由核心

 //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帮我find这个问题:

对于任何可能使用Jade的人,这里有一个快速的窍门: div(ui-view)编译为<div ui-view="ui-view"></div>. 你需要的是div(ui-view="").

所以,你可以在ng-include里面使用ui-view ,但是需要这样做

字体: https : //github.com/angular-ui/ui-router/issues/679

您正在使用带有hashbang后备的HTML5路由。 这意味着你想设置你的服务器,以便请求/cameras/12redirect到/#!/cameras/12 。 然后,服务器将呈现您的Angular应用程序,它将检测到它想要进入viewCamera状态,并将重写客户端上的URL。

您只需将以下中间件添加到快速应用程序即可完成此操作:

 app.use(function (req, res, next) { res.set('Location', '/#!' + req.path) .status(301) .send(); });