如何將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集成？

回答

相關問題