Question

我们使用Angular-UI-Router导航到我们的网站。这工作正常。但我们希望使用指向网站特定页面的域别名，以及地址栏中别名的URL。

实施例：我们的网站：domain.com有一些商店页面。 domain.com/shop/shop-name,shop / shop-2，商店/商店名称等我们希望有多个域名，其中包含/ shop / [shop-slug]页面的别名。

网站本身与NodeJS一起运行，但是有人用apache和NodeJS创建了一个设置，因此我们可以在Apache中创建别名，重定向到指定的页面。这是重定向的示例：

VirtualHost文件

<VirtualHost *:80>
  ServerName domainalias.com
  RewriteEngine on
  RewriteRule ^ https://domainalias.com/ [R]
</VirtualHost>

<VirtualHost *:443>
  ServerName domainalias.com
  RewriteEngine on
  RewriteRule ^/$ http://127.0.0.1:3000/shop/demo1 [P]
  RewriteRule ^/(.+) http://127.0.0.1:3000/$1 [P]
  Include /etc/letsencrypt/options-ssl-apache.conf
  SSLCertificateFile [certfile]
  SSLCertificateKeyFile [certfile]
  SSLCertificateChainFile [certfile]
</VirtualHost>

工作正常，但是，地址栏中显示的网址如下：domainalias.com/shop/demo1 /

我们认为UI路由器正在使用新URL进行重定向。目前我们的路线文件是：

UI-路由器

app.config(['$locationProvider', '$sceProvider', '$stateProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider',
function($locationProvider, $sceProvider, $stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {

    // disabled due some other problems with the redirects to the shop pages
    // but can't refresh a page now > other problem
    // $urlMatcherFactoryProvider.strictMode(false);

    // $urlRouterProvider.rule(function($injector, $location) {
    //  var path = $location.path();
    //  var hasTrailingSlash = path[path.length-1] === '/';

    //  if(hasTrailingSlash) {
    //      //if last charcter is a slash, return the same url without the slash  
    //      var newPath = path.substr(0, path.length - 1); 
    //      return newPath;
    //  }
    // });

    $urlRouterProvider
        // Show homepage by default on the shop/pro-shop.
        .when('/shop/:nameSlug/', '/shop/:nameSlug/home')

        // Redirect invalid routes to homepage.
        .otherwise('/home');

    $stateProvider

        .state('shop', {
            abstract: true,
            url: '/shop/:nameSlug',
            templateUrl: '/views/shop/index.html',
            controller: 'shopController',

        })

            .state('shop.home', {
                url: '/home',
                templateUrl: '/views/shop/home.html'
            })

            .state('shop.product', {
                url: '/products/:productNameSlug',
                templateUrl: '/views/product.html',
                controller: 'productController'
            })

            .state('shop.products', {
                url: '/products',
                templateUrl: '/views/products.html'
            })

            .state('shop.brand', {
                url: '/brands/:brandNameSlug',
                templateUrl: '/views/brand.html',
                controller: 'brandController'
            })

            .state('shop.brands', {
                url: '/brands',
                templateUrl: '/views/brands.html'
            })

            .state('shop.campaigns', {
                url: '/campaigns',
                templateUrl: '/views/campaigns.html'
            })

            .state('shop.campaign', {
                url: '/campaigns/:campaignNameSlug',
                templateUrl: '/views/campaign.html',
                controller: 'campaignController'
            })

            .state('shop.contact', {
                url: '/contact',
                templateUrl: '/views/shop/contact.html'
            })

            .state('shop.custom-page', {
                url: '/:customPageNameSlug',
                templateUrl: '/views/shop/custom-page.html'
            })

            .state('shop.cart', {
                url: '/cart',
                templateUrl: '/views/cart.html',
                controller: 'checkoutController'
            })

        .state('layout', {
            abstract: true,
            templateUrl: '/views/layout.html',
            controller: 'homeController'
        })

            .state('layout.home', {
                url: '/home',
                templateUrl: '/views/home.html',
                controller: 'homeController'
            })

            .state('layout.product', {
                url: '/products/:nameSlug',
                templateUrl: '/views/product.html',
                controller: 'productController'
            })

            .state('layout.products', {
                url: '/products',
                templateUrl: '/views/products.html',
                controller: 'productsController',
                data: {
                    pageTitle: 'Producten'
                }
            })

            .state('layout.brand', {
                url: '/brands/:nameSlug',
                templateUrl: '/views/brand.html',
                controller: 'brandController'
            })

            .state('layout.brands', {
                url: '/brands',
                templateUrl: '/views/brands.html',
                controller: 'brandsController'
            })

    $locationProvider.html5Mode({enabled: true, requireBase: false});
    $sceProvider.enabled(false);
}
]);

正如您所看到的，我们在路由上方注释了一些行以使重定向成为可能，使用此代码，将别名的页面重定向到/ home。

问题：

是否可以在域别名下提供商店页面？所以我们得到的URL就像domainalias.com/home和domainalias.com/products而不是domainalias.com/shop/demo1/home和domainalias.com/shop/demo1/products，是否可以修复刷新页面？随着代码被注释掉，每次刷新都会重定向到/ home。

EDIT 通过卷曲到domainalias.com，我们看到301重定向到/ shop / demo1

HTTP/1.1 301 Moved Permanently
Date: Thu, 02 Feb 2017 11:02:01 GMT
Server: Apache/2.4.7 (Ubuntu)
X-Powered-By: Express
Content-Type: text/html; charset=UTF-8
Content-Length: 55
X-Content-Type-Options: nosniff
Location: /shop/demo1/
Vary: Accept-Encoding

但是，我们无法找到此重定向。我们还没有创建它，因为它是Powered-By: Express＆＃39;它必须在NodeJS服务器上

Answer 1

我们通过试验和错误以及Angular-UI-Router的“文档”解决了这个问题。

我们创建了两个“父母”状态：shop和proshop。为避免重复代码，我们根据域名创建了带有“shop”或“proshop”的变量。

var shop = "shop";
var getShopType = function(){
    if (window.location.hostname != 'domain.com' && window.location.hostname != "127.0.0.1") {
                shop = "proshop";
            }
        return shop;
}
getShopType();

国：

.state("shop", {
        abstract: true,
        url: '/shop/:nameSlug',
        templateUrl: '/views/shop/index.html',
        controller: 'shopController',
        params: {
            nameSlug: null
        }
    })

    .state("proshop", {
        abstract: true,
        templateUrl: '/views/shop/index.html',
        controller: 'shopController',
        params: {
            nameSlug: null
        }
    })


        .state(shop +'.home', {
            url: '/home',
            templateUrl: '/views/shop/home.html',
        })

        .state(shop + '.product', {
            url: '/products/:productNameSlug',
            templateUrl: '/views/product.html',
            controller: 'productController'
        })

其他域名现在将指向另一个新状态'extern'，它将所有路由重定向到'proshop'。

.state('extern', {
                url: '/extern/:nameSlug/:page',
                controller: ['$stateParams', '$state', function($stateParams, $state){
                    $state.go('proshop.' + $stateParams.page , {nameSlug: $stateParams.nameSlug});
                }],
            })

对于页面上的链接，我们在angular的rootscope中创建了一个函数，它与上面的getShopType（）函数功能相同。所以我们动态地链接到州，而没有州两次。

a(ui-sref="{{getShopType()}}.home({nameSlug})" ui-sref-active="active") Home

具有域别名的角度ui路由

VirtualHost文件

UI-路由器

问题：

1 个答案: