如何将AngularJS视图与Wordpress集成？

我正在用AngularJS和WordPress做一些测试，但我似乎无法弄清楚如何让ng-view与WP一起工作。我对WP/PHP的知识是非常有限的，在尝试做我想做的事情之前，我应该可以做更多的教程（我打算在解决这个问题后做到这一点）。如何将AngularJS视图与Wordpress集成？

我的主题中没有文件夹。这里是我的代码：

的header.php

<!DOCTYPE html> 
<html <?php language_attributes(); ?> ng-app="myTestApp"> 
    <head> 
     <title>My Test Theme</title> 
     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> 
     <?php wp_head(); ?> 
    </head> 
    <body> 
    <p>header</p>

的index.php

<?php get_header(); ?> 
<div ng-controller="homeController"> 
    <a href="#home">Home</a> 
    <a href="#my_page">My page</a> 
    <div ng-view></div> 
</div> 
<?php get_footer(); ?>

footer.php

<p>footer</p> 
<?php wp_footer(); ?>   
</body> 
</html>

app.js

var myTestApp = angular.module('myTestApp', ['ngRoute']); 

myTestApp.config(function($routeProvider){ 
    $routeProvider 
    .when('home', { 
     templateUrl: 'home.php', 
     controller: 'homeController' 
    }) 
    .when('my_page', { 
     templateUrl: 'my_page.php', 
     controller: 'koncertyController' 
    }); 
}); 

myTestApp.controller('homeController', function($scope){ 
}); 

myTestApp.controller('my_pageController', function($scope){ 
});

functions.php

<?php 
function my_test_theme_enqueue_scripts() { 
    // enqueue jQuery and AngularJS 
    wp_register_script('angular-core', 'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js', array(), null, false); 
    wp_enqueue_script('angular-route', '//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js', array('angular-core'), null, false); 
    wp_register_script('angular-app', get_bloginfo('template_directory').'/app.js', array('angular-core'), null, false); 

    // enqueue all scripts 
    wp_enqueue_script('angular-core'); 
    wp_enqueue_script('angular-route'); 
    wp_enqueue_script('angular-app'); 
    wp_enqueue_script('angular-directives'); 
} 
add_action('wp_enqueue_scripts', 'my_test_theme_enqueue_scripts'); 
?>

我相信问题在于functions.php。谢谢！

来源

2015-02-24 Baki

控制台中有哪些错误？ – trueinViso 2015-09-10 20:01:31

-1

我相信你的问题依赖于php文件，因为php文件在服务器端生成html。由于Angularjs是客户端框架，因此无法为您工作。

来源

2015-02-25 19:18:34

这并没有真正回答这个问题。 – Sildoreth 2015-02-25 19:27:17

只是澄清，在PHP中没有什么阻止您将Angular集成到使用php生成的页面。道歉我没有WP的经验 – user1302114 2016-04-15 16:25:26

如何将AngularJS视图与Wordpress集成？

回答

相关问题