我试图刷新页面并执行客户端路由以在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-route，所以我更改为ui-router以查看问题是否已解决。
编辑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', '');
}
}
});
}
]);
答案 0 :(得分：5)
@Scymex帮助我找到这个问题：
对于任何可能使用Jade的人来说，这里有一个快速问题：div(ui-view)编译为<div ui-view="ui-view"></div>.您需要的是div(ui-view="").
所以，你可以在ui-view内ng-include，但需要这个技巧
答案 1 :(得分：2)
您正在使用带有hashbang回退的HTML5路由。这意味着您要设置服务器，以便/cameras/12的请求重定向到/#!/cameras/12。然后，服务器将呈现您的Angular应用程序，该应用程序将检测到它想要进入您的viewCamera状态并将重写客户端上的URL。
只需将以下中间件添加到您的快速应用程序即可实现此目的：
app.use(function (req, res, next) {
res.set('Location', '/#!' + req.path)
.status(301)
.send();
});