Expressjs路線與Angular路線問題加載直接網址

Question

我有角度使用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);
    });

如果我轉到/然后整頁渲染並將主頁部分拉入沒有問題

如果我去/漏斗，它的工作方式相同。

如果我得到about / randompage它將自己渲染部分沒有頁面的其余部分，但如果我點擊從主頁轉到about / randompage它會將部分拉進頁面就像它應該。 我該怎么做才能阻止路線沖突？

Answer 1

你有兩件不同的事情在這里發生。 首先，是向服務器發出請求的瀏覽器和向服務器發出請求的角度之間的區別。

當您的瀏覽器請求'/ funnel'時，它會匹配您的catchall路由，並按預期返回索引頁面。 然后會發生什么是Angular（以及所有其他靜態資產加載）然后Angular的客戶端路由器將'/ funnel'與您的Angular路由匹配。 由於路徑模板是partials / funnel，因此它向服務器發出部分/漏斗請求並加載結果。

當你直接請求/ about / randompage時，它匹配你的一個部分路線'about /：name'，它只返回部分路徑。 Angular發出同樣的請求'/ partials /'，因為你的templateUrl：name的映射使它相對於路由。

在這個基本意義上，你可以認為它是一個“沖突”，因為你的服務器端路由不應該與你的客戶端路由匹配，因為你需要每次響應初始加載（index.html，所有角度js文件等）瀏覽器全新。

通常，我在支持深層鏈接時所做的是將角度模板文件與模塊的所有靜態資源保持在一起。 templateUrl路徑應該全部靜態引用它們（比如templateUrl：'/ js / about / templates / staff.html'）Express可以將它們作為靜態文件服務就好（基本的html）。 服務器上唯一真正的“路由”是ajax / service調用的API端點等。

如果你想把它包裝在一個像你有路由和aboutRoutes的模塊中，那么我建議將所有內容保存在'/ templates'或'/ partials'路徑中。 但是，除非您實際通過Jade或其他視圖引擎渲染模板，否則這是不必要的步驟。 如果它們是簡單的html，就像正常一樣使用express.static來提供它們。

除了我不使用正則表達式之外，我使用類似於你的catchall。 不確定它是好還是壞，但是閱讀IMO會更清楚一些。 app.use（'*'，routes.index）;

這樣，當用於深度鏈接時，所有客戶端路由都將通過並始終返回索引頁並允許Angular管理客戶端路由。 希望有所幫助！