带域别名的角度用户界面路由

Question

我们使用角用户界面路由器导航到我们的网站。效果很好。但是我们希望使用域别名，它指向网站的特定页面，地址栏中有别名的url。

例句:我们有一个网站: domain.com，里面有一些商店页面。domain.com/shop/shop-name，shop/shop-2，shop/store-name，等等。我们希望有多个域名，其别名为/shop/shop-slug页面。

站点itselfs使用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 1/

我们认为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 1/home和domainalias.com/shop/demo1 1/products，是否可以修复刷新页面？将代码注释掉后，每次刷新都会重定向到/home。

用卷曲编辑到domainalias.com，我们看到301重定向到/shop/demo1 1

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”，所以它必须在NodeJS服务器上

Answer 1

我们已经解决了这个问题，通过试验和错误和“文件”的角度-UI-路由器。

我们创建了两个“父”状态:商店和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});
                }],
            })

对于页面上的链接，我们在角范围内创建了一个函数，它与上面的getShopType()函数相同。所以我们有动态链接到状态，没有状态两次。

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