Expressjs路线与Angular路线问题直接加载url

我有expressjsangular工作，一切大部分工作，但是我遇到与expression和angular度的路线冲突

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('/[az]{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，就会像进入页面一样将页面拉入页面。 我能做些什么来阻止路线冲突？

Answer 1

你在这里有两件不同的事情。 首先，是向服务器发送请求的浏览器和向服务器发出请求的angular度之间的区别。

当您的浏览器请求“/ funnel”时，它会匹配您的catchall路由并按照您的预期返回索引页面。 接下来会发生的事情是Angular（以及所有其他的静态资产加载），然后Angular的客户端路由器将'/ funnel'匹配到你的Angular路由。 由于路由模板是partials / funnel，因此它会向服务器请求partials / funnel并加载结果。

当你直接请求/ about / randompage它匹配你的部分路由之一“about /：name”，它只返回部分。 Angular使这个相同的请求'/ partials /'，因为你的templateUrl：name映射使它相对于路由。

在这个基本的意义上，你可以认为它是一个“冲突”，因为你的服务器端路由不应该匹配你的客户端路由，因为你需要每次都回应初始加载（index.html，所有的angular度js文件等）浏览器进来新鲜。

通常，我在支持深度链接时所做的是将angular度模板文件保留在模块的所有静态资源中。 templateUrlpath应该都静态地引用它们（比如templateUrl：'/js/about/templates/person.html'）.Express可以将它们作为静态文件来处理（基本html）。 服务器上唯一真正的“路由”是ajax /服务调用的API端点。

如果你想把它包装在一个模块中，就像你使用路由和aboutRoutes一样，那么我build议把所有的东西放在'/ templates'或者'/ partials'path父项中。 但是，除非您实际上是通过Jade或其他视图引擎呈现模板，否则这是一个不必要的步骤。 如果他们是简单的HTML只是使用express.static正常服务他们。

我使用一个类似于你的东西，除非我不使用正则expression式。 不知道是好还是坏，但是读一下IMO有点清楚。 app.use（'*'，routes.index）;

这样所有的客户端路由，当用于深度链接时，将通过并始终返回索引页面，并允许Angularpipe理客户端路由。 希望有所帮助！