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的永久链接设置

回答

相关问题