2013-09-02 9 views
5

में AngularJS दृश्य मुझे मेरे वर्डप्रेस-एप्लिकेशन में मेरे AngularJS फ़ंक्शन के साथ कोई समस्या है। मैं जो बनाना चाहता हूं वह एक एसपीए है, ताकि वेबसाइट (यह एक ब्लॉग नहीं है, मैं सिर्फ सीएमएस के रूप में WP का उपयोग कर रहा हूं) तेजी से काम कर रहा है और मोबाइल फोन पर पुनः लोड किए बिना काम कर रहा है। इस लक्ष्य को प्राप्त करने के लिए, मैंने वर्डप्रेस में एंगुलरजेएस को शामिल करने का निर्णय लिया (यदि यह सबसे अच्छा समाधान नहीं है, तो कृपया मुझे बताएं :))। मैंने कुछ ट्यूटोरियल किए जो मुझे एजेएस में "विचार" के विषय के बारे में समझाते हैं, मैंने इसे स्वयं को एक अलग HTML दस्तावेज़ में करने की कोशिश की और यह बहुत अच्छा काम किया।वर्डप्रेस

तो मेरी समस्या समेकित है, कि मेरा एसपीए 3 कॉलम में बांटा गया है। बायां एक प्रकार का स्थैतिक (केवल बुनियादी सूचनाएं) है, दूसरे के पास हमेशा WP (जो बहुत अच्छा काम करता है) के माध्यम से नवीनतम सामग्री है और दाएं कोलम को "नवीनतम सामग्री" के लिंक में से किसी एक पर क्लिक करके अपनी सामग्री बदलनी चाहिए। । क्या आप यहां तक ​​मेरा विचार समझते हैं? :) तो, जैसा कि आप अनुमान लगा सकते हैं - यह वास्तव में काम नहीं करना चाहता है।

<?php get_header();?> <!-- Header + AngularJS included --> 



<div class="content"> <!-- open class="content"--> 
<a href="/?page_id=6"> 

</a> 
<div class="bg-texture"> <!--open class "bg-texture/ closed in "footer"--> 
    <?php while(have_posts()):the_post();?> 
    <div class="col"> 


    <?php if (in_category('infotext')):?> 
    <div class="infotext"> 




    <?php elseif (in_category('apps')):?>     
     <div class="round-borders-panel"> 

    <?php elseif (in_category('righttext')):?> <!-- hier kommen die single-pages rein--> 
      <?php if(function_exists('get_twoclick_buttons')) {get_twoclick_buttons(get_the_ID());}?> 
     <?php endif;?>  


      <h1> 
       <a href="<?php the_permalink()?>"> <?php the_title();?> </a> 
      </h1> 

     <?php the_content(__(''));?> 
     </div> 
    </div> 

       <?php endwhile;?> 

<?php get_the_ID('');?> 


     <script src="angular.min.js"></script> 

     <div data-ng-view></div> 
    <script> 
    var cloud = angular.module("cloud", []); 

    demoApp.config(function ($routeProvider) { 
    $routeProvider 
      .when('/?=p<?php get_the_ID();?>, 
        { 
          controller: 'SimpleController', 
          templateUrl: '<?php get_template_part('single','');?>' 
        }) 
      .when('/view2', 
        { 
          controller: 'SimpleController', 
          templateUrl: 'Partials/view2.html' 
        }) 
      .when('/view3', 
        { 
          controller: 'SimpleController', 
          templateUrl: 'Partials/view3.html' 
        }) 
      .otherwise({redirectTo: '/view1'}); 
    }); 


    </script> 
<!-- Loop--> 

</div> <!-- Close <class="bg-texture--> 

->

यह सुनिश्चित करने के लिए अभी, काम नहीं करेगा। यदि आप इस समस्या को हल करने में मेरी सहायता करते हैं तो मैं सराहना करता हूं। बीटीडब्ल्यू मैंने लगभग 5 हफ्ते पहले प्रोग्रामिंग शुरू की - तो कुछ नौसिखिया के कुछ वाकई बेवकूफ हो सकते हैं! :)

नमस्ते, Yannic :)

+0

इसे देखें: https://github.com/HRoger/angularpresstheme - यह थीम वर्डप्रेस को एकल पृष्ठ एप्लिकेशन में बदल देगी। यहां एक डेमो संस्करण भी है: http://angularpresstheme.com – RoyRogers

उत्तर

2

मैं कोणीय लगता है यहां काफी एक overkill है। आप सिर्फ jquery (जो वर्डप्रेस के साथ जहाजों) का उपयोग करने पर विचार कर सकते हैं। अपने "नवीनतम सामग्री" फायर jquery फ़ंक्शंस में लिंक बनाएं जो दाएं बॉक्स में AJAX अनुरोध का उपयोग करके अनुरोधित सामग्री डालें। यह आप के लिए सबसे अधिक ब्याज की हो सकती है http://codex.wordpress.org/AJAX : http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side

मूल विचार आप wp_ajax_nopriv_ साथ एक हुक के साथ एक समारोह रजिस्टर है ('किसी विशेषाधिकार') हुक

वर्डप्रेस में बनाया कुछ अच्छा AJAX कार्यक्षमता है और यह कुछ इस तरह का उपयोग कर अनुरोध करते हैं:

jQuery(document).ready(function($) { 
    var data = { 
     action: 'my_action', 
     whatever: 'any value to access later in php' 
    }; 
    jQuery.post(ajax_url, data, function(response) { 
     alert('Got this from the server: ' + response); 
    }); 
}); 

'my_action' सामान आप wp_ajax_nopriv_ उपसर्ग के साथ करने के लिए बराबर होना चाहिए। AJAX_url को admin_url('admin-ajax.php') पर इंगित करने की आवश्यकता है। आप अपने जेएस में इसे सुलभ बनाने के लिए wp_localize_script() का उपयोग कर सकते हैं।

+0

उस तेज़ उत्तर के लिए बहुत बहुत धन्यवाद। मैं अब jQuery का प्रयास करूंगा, लेकिन यह यूआरएल और दृश्य को बदलने के लिए jQuery के साथ संभव है लेकिन सबकुछ पुनः लोड नहीं कर रहा है? मैंने इसे Google पर समझने की कोशिश की, लेकिन मुझे संतोषजनक उत्तर नहीं मिला। –

+0

jQuery किसी भी रूटिंग कार्यक्षमता के साथ जहाज नहीं भेजता है। लेकिन [pathjs] (https://github.com/mtrpcic/pathjs) एडन को एकीकृत करने के लिए उचित और तेज़ी से दिखता है। शुरुआती रूप से jQuery का सुझाव देते समय रूटिंग सामग्री के बारे में नहीं सोचा था, लेकिन कोणीय जो आपको चाहिए उससे कहीं अधिक है। मैं अभी भी jQuery का उपयोग कर ऐसा करने की सलाह देते हैं। यह पूछने के लिए स्वतंत्र महसूस करें कि आपको और सहायता चाहिए या नहीं। – ahoereth

+1

ठीक है, मैं बस आपको धन्यवाद कहना चाहता हूं! अंत में, सब ठीक काम करता है। यहाँ अच्छा समुदाय! –