AngularJS：鏡像WordPress的永久鏈接設置

我發佈在SO導致我的問題是關於AngularJS，而不是Wordpress。我正在使用AngularJS（1.6.4）和WP REST API構建單頁應用程序。一切都很好，但我現在正在尋找解決方案來鏡像帖子的永久鏈接設置。AngularJS：鏡像WordPress的永久鏈接設置

我想延長REST API來顯示它們，然後注入$http服務爲我模塊的config

app.config(function ($routeProvider, $locationProvider) {  
    $routeProvider.when('/', {templateUrl: partials.folder + 'home.php', controller: 'allposts'}); 

    var tags = [ 
     '%year%', 
     '%monthnum%', 
     '%day%', 
     '%hour%', 
     '%minute%', 
     '%second%', 
     '%post_id%', 
     '%postname%', 
     '%category%', 
     '%author%' 
    ]; 
    var urlvars = ''; 
    var inj = angular.injector(['ng']); 
    var $http = inj.get("$http"); 
    $http.get('wp-json/permalink_api/v0/settings').then(function (res) { 
     var settings = res.data; 
     var permalink_settings = settings.permalink_settings; 

     //This array contains the permalink settings 
     var arr = settings.permalink_settings.permalink_structure.split('/'); 

     //I'll now generate a string using that array... 
     for (var i = 0; i<arr.length; i++) { 
      if (arr[i] == "") { 
       arr.splice(i,1); 
       i=i-1; 
      } else { 
       if ((ix = tags.indexOf(arr[i]))> -1) { 
        var cleantag = ":" + tags[ix].replace(/%/g, ""); 
        urlvars += '/' + cleantag; 
       } else { 
        urlvars += '/' +arr[i]; 
       } 
      } 
     } 
    }).then(function() { 
     //...and create a route based on permalink setting 
     $routeProvider.when(urlvars, {templateUrl: partials.folder + 'post.html', controller: 'singlepost'});   
    }); 
    $locationProvider.html5Mode(true); 
})

此代碼是好的，一旦應用程序是滿載，但遭受的事實$http服務在這個階段還沒有準備好。會發生什麼，它會加載整個應用程序，然後開始應用此配置，這意味着json數據加載太遲。最糟糕的後果是我無法直接從瀏覽器欄訪問路線，而只能通過應用程序鏈接訪問路線。

我想使用攔截器不會改變這一點。鏡像永久鏈接結構對搜索引擎優化非常有用，所以即使創建SPA，我也想實現這一目標，不要提及它會像用經典主題一樣提供對用戶的完全控制。

意思是要達到這個目的嗎？謝謝。

編輯 .htaccess設置設置良好;在任何情況下定義任何靜態路由的路由。

來源

2017-08-15 Daniele Squalo

我通過Wordpress函數解決了這個問題：它打印一個包含我的配置的標籤。

function pre_configure_angular() { 
?> 
<script> 
    angular.module('single-page').config(function ($routeProvider, $locationProvider) { 
     var tags = [ 
      '%year%', 
      '%monthnum%', 
      '%day%', 
      '%hour%', 
      '%minute%', 
      '%second%', 
      '%post_id%', 
      '%postname%', 
      '%category%', 
      '%author%' 
     ]; 
     var urlvars = ''; 

     var permalink_structure = '<?php echo get_option('permalink_structure'); ?>'; 

     var arr = permalink_structure.split('/'); 
     for (var i = 0; i<arr.length; i++) { 
      if (arr[i] == "") { 
       arr.splice(i,1); 
       i=i-1; 
      } else { 
       if ((ix = tags.indexOf(arr[i]))> -1) { 
        var cleantag = ":" + tags[ix].replace(/%/g, ""); 
        urlvars += '/' + cleantag; 
       } else { 
        urlvars += '/' +arr[i]; 
       } 
      } 
     } 

     $routeProvider.when('/', {templateUrl: partials.folder + 'home.php', controller: 'allposts'}); 
     $routeProvider.when(urlvars, {templateUrl: partials.folder + 'post.html', controller: 'singlepost'}); 
     $routeProvider.when('/:page', {templateUrl: partials.folder + 'page.html', controller: ''}); 

     $locationProvider.html5Mode(true); 
    }); 
</script> 
<?php 
} 
add_action ('wp_head', 'pre_configure_angular');

這使我可以避免另一個http請求到服務器。

來源

2017-08-16 22:46:00

AngularJS：鏡像WordPress的永久鏈接設置

回答

相關問題