我使用expressjs进行角度处理，大部分工作都在运行，但是我遇到了与快速和角度路线的冲突
app.js
app.get('/',routes.index);
app.get('/about/:name', aboutRoutes.partials);
app.get('/partials/:name', routes.partials);
//authentication
//app.get('/app', ensureAuthenticated ,appRoutes.app);
app.get('/app',appRoutes.app);
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/[a-z]{0,100}',routes.index)
路线
var homeContent = require('../content-config/home.json');
exports.index = function(req, res) {
res.render('template', {
headerTitle: homeContent.headerTitle,
headerContent: homeContent.headerContent,
mainTitle: homeContent.mainTitle,
mainContent: homeContent.mainContent,
employersTagLine: homeContent.employersTagLine,
candidatesTagLine: homeContent.candidatesTagLine,
providersTagLine: homeContent.providersTagLine,
fundingTagLine: homeContent.fundingTagLine,
howItWorksTitle: homeContent.howItWorksTitle,
partials: {
head: 'partials/head',
header: 'partials/header',
footer: 'partials/footer',
maincontent: 'homepage',
signupModal: 'partials/signup-modal',
verisignSeal: 'partials/verisign-seal',
learnAboutUs: 'partials/learn-about-us',
industries: 'partials/industries-blue'
}
});
};
exports.partials = function (req, res) {
var name = req.params.name;
var content = "";
res.render('partials/'+name,content);
};
var employersContent = require('../content-config/employers.json'),
candidatesContent = require('../content-config/candidates.json'),
providersContent = require('../content-config/providers.json'),
fundingContent = require('../content-config/funding.json');
exports.us = function(req, res) {
res.render('about/us', {
partials: {
header: 'partials/header',
footer: 'partials/footer',
signupModal: 'partials/signup-modal',
verisignSeal: 'partials/verisign-seal'
}
});
};
exports.partials = function (req, res) {
var name = req.params.name;
var content = "";
switch(name)
{
case "funding":
content ={
headerTitle: fundingContent.headerTitle,
headerContent: fundingContent.headerContent,
explanation: fundingContent.explanation,
partials: {
header: 'partials/header',
footer: 'partials/footer',
learnAboutUs: 'partials/learn-about-us',
signupModal: 'partials/signup-modal',
verisignSeal: 'partials/verisign-seal'
}
};
break;
case "candidates":
content = {
headerTitle: candidatesContent.headerTitle,
headerContent: candidatesContent.headerContent,
explanationTitle: candidatesContent.explanationTitle,
explanationContent: candidatesContent.explanationContent,
explanationBullets: candidatesContent.explanationBullets,
resumeTitle: candidatesContent.resumeTitle,
resumeContent: candidatesContent.resumeContent,
funnelTitle: candidatesContent.funnelTitle,
funnelContent: candidatesContent.funnelContent,
partials: {
header: 'partials/header',
industries: 'partials/industries-blue',
footer: 'partials/footer',
learnAboutUs: 'partials/learn-about-us',
signupModal: 'partials/signup-modal',
verisignSeal: 'partials/verisign-seal',
funnel: 'partials/funnel-candidate',
output: 'partials/candidate-grid'
}
}
break;
case "employers":
content = {
headerTitle: employersContent.headerTitle,
headerContent: employersContent.headerContent,
explanationTitle: employersContent.explanationTitle,
explanationContent: employersContent.explanationContent,
explanationBullets: employersContent.explanationBullets,
factsTitle: employersContent.factsTitle,
facts: employersContent.facts,
funnelTitle: employersContent.funnelTitle,
funnelContent: employersContent.funnelContent,
buildVsBuyTitle: employersContent.buildVsBuyTitle,
buildVsBuyContent: employersContent.buildVsBuyContent,
partials: {
header: 'partials/header',
footer: 'partials/footer',
learnAboutUs: 'partials/learn-about-us',
signupModal: 'partials/signup-modal',
verisignSeal: 'partials/verisign-seal',
funnel: 'partials/funnel',
output: 'partials/output'
}
};
break;
case "providers":
content = {
headerTitle: providersContent.headerTitle,
headerContent: providersContent.headerContent,
explanationTitle: providersContent.explanationTitle,
explanationContent: providersContent.explanationContent,
explanationBullets: providersContent.explanationBullets,
buildVsBuyTitle: providersContent.buildVsBuyTitle,
buildVsBuyContent: providersContent.buildVsBuyContent,
partials: {
header: 'partials/header',
footer: 'partials/footer',
learnAboutUs: 'partials/learn-about-us',
signupModal: 'partials/signup-modal',
verisignSeal: 'partials/verisign-seal',
funnel: 'partials/funnel',
output: 'partials/output'
}
};
break;
}
res.render('about/'+name,content);
};
Angular App.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.controllers',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/homepage',
controller: 'MyCtrl1'
}).
when('/about/:name', {
templateUrl: name,
controller: 'MyCtrl1'
}).
when('/funnel', {
templateUrl: 'partials/funnel',
controller: 'MyCtrl2'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
如果我转到/然后整页呈现并将主页部分拉入而没有问题
如果我去/漏斗，它的工作方式相同。
如果我得到了关于/ randompage它会自动渲染部分没有页面的其余部分，但是如果我点击从主页转到about / randompage它将部分拉入页面就像它应该。我该怎么做才能阻止路线冲突？
答案 0 :(得分：3)
这里有两件不同的事情。首先，是向服务器发出请求的浏览器和向服务器发出请求的角度之间的区别。
当您的浏览器请求＆＃39; / funnel＆＃39;它匹配您的catchall路由并返回您期望的索引页面。然后会发生什么是Angular（和所有其他静态资产加载）然后Angular的客户端路由器匹配＆＃39; /漏斗＆＃39;你的Angular路线。由于路径模板是partials / funnel，因此它向服务器请求partials / funnel并加载结果。
当您直接请求/ about / randompage时，它会匹配您的某个部分路线＆＃39; about /：name＆＃39;只返回部分。 Angular提出同样的要求＆＃39; / partials /＆＃39;因为你的templateUrl：name映射使它相对于路由。
在这个基本意义上，你可以认为它是一个冲突＆＃34;因为您的服务器端路由不应该与您的客户端路由匹配，因为每次浏览器进入新版本时您需要响应初始加载（index.html，所有角度js文件等）。
通常，我在支持深层链接时所做的是将角度模板文件与模块的所有静态资源保持在一起。 templateUrl路径应该全部静态引用它们（比如templateUrl：＆＃39; /js/about/templates/person.html'）Express可以将它们作为静态文件服务（基本的html）。唯一真正的＆＃34;路线＆＃34;在服务器上是ajax /服务调用的API端点等。
如果你想把它包装在一个像路线和aboutRoutes这样的模块中，那么我建议你把所有东西都放在＆＃39; / templates＆＃39;或者＆＃39; / partials＆＃39;路径父母。但是，除非您实际通过Jade或其他一些视图引擎渲染模板，否则这是一个不必要的步骤。如果它们是简单的html，只需正常使用express.static提供它们。
除了我不使用正则表达式之外，我使用类似于你的收藏夹。不确定它是好还是坏，但是阅读IMO会更清楚一些。 app.use（＆＃39; *＆＃39;，routes.index）;
这样，当用于深层链接时，所有客户端路由都将通过并始终返回索引页并允许Angular管理客户端路由。希望有所帮助！