如何整合AngularJS查看与Word preSS? [英] How to integrate AngularJS view with Wordpress?

查看:353
本文介绍了如何整合AngularJS查看与Word preSS?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在做一些测试与AngularJS和Word preSS,但我似乎无法弄清楚如何获得NG-观点与WP工作。我对WP / PHP的知识是极其有限的,我应该尝试做什么,我试图做(我打算这样做后,我解决了这个问题)之前可能做这些更多的教程。

I'm doing some testing with AngularJS and WordPress but I can't seem to figure out how to get ng-view to work with WP. My knowledge about WP/php is extremely limited and I should probably do more tutorials on those before trying to do what I'm trying to do (I'm planning to do that after I solve this problem).

有我的主题没有文件夹。这里是我的code:

There are no folders in my theme. Here is my code:

的header.php

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

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

footer.php

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

app.js

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

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中。谢谢!

I believe the problem lies in functions.php. Thanks!

推荐答案

我相信你的问题依赖于PHP文件,因为PHP文件生成html在服务器端。由于Angularjs是一个客户端框架,你不能得到适合你的工作。

I believed your problem relies on the php files since php files generate html on the server side. Since Angularjs is a client-side framework you can't get that working for you.

这篇关于如何整合AngularJS查看与Word preSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆