d3.js और DOM प्रभावों के साथ AngularJS/AngularUI का उपयोग

Question

मुझे एक परियोजना के लिए AngularJS का उपयोग करने में दिलचस्पी है, जिस पर मैं काम कर रहा हूं। मैंने इसके बारे में बहुत कुछ पढ़ा है, वीडियो देखे हैं, कई नमूना ऐप्स किए हैं। यह सब समझ में आता है, मैं अवधारणाओं में खरीदता हूं।

जो परियोजना मैं कर रहा हूं उसे कुछ डीओएम विशेष प्रभाव (पृष्ठ के चारों ओर चीजों को गतिशील रूप से इत्यादि) करने और कुछ D3.js चार्टिंग को शामिल करने की आवश्यकता है।

मैंने jQuery का बहुत उपयोग किया है; मुझे यह मिल गया और इसे पसंद है। मैंने मूलभूत जानकारी प्राप्त करने के लिए पर्याप्त AngularJS का उपयोग किया है। मैं पूरी तरह से समझ नहीं पा रहा हूं कि कोणीय के भीतर से jQuery की $("#my-element").slideUp() जैसी चीज़ों को कैसे कॉल करें।

<!-- somewhere in app.html --> 
<div id="my-element"> 
    <p>Here's some data about your stuff...!</p> 
    <button id="hider">Hide this (but with a cool transition)</button> 
</div> 

और साइट में जे एस:

// somewhere in app.js ... pretend it's all nice and DRY. 
    function main() { 
    $("#my-element button") 
     .click(function() { $("#my-element").slideUp()}); 
    }  
    $(main); 

सबसे अच्छा मैं कैसे पास कुछ को पूरा करने के लिए बता सकते हैं

चलो कहते हैं कि मैं एक पेज में निम्न HTML कहीं करते हैं: उदाहरण के लिए कोणीय के लिए इस के लिए है:

एचटीएमएल

<!-- somewhere in app.html --> 
<div ng-controller="Data"> 
    <p>Here's some data about your stuff...!</p> 
    <button ng-click="slideUp()">Hide this (but with a cool transition)</button> 
</div> 

सीएसएस:

// somewhere in app.css 
function Data ($scope) { 
    $scope.slideUp = function() { 
    $("#my-element").slideUp(); 
    } 
} 

किसी तरह कि लगता है यह सही तरीका नहीं है, लेकिन मैं नहीं जानता कि क्या सही दृष्टिकोण है।

मुझे लगता है कि एक कोणीय यूआई प्रोजेक्ट है जो साफ दिखता है ... लेकिन "प्रलेखन" मानता है कि पाठक एक नवागंतुक के बजाय अंगुलर से काफी गहराई से परिचित है।

मैं कोणीय के विचार को खरीदने के लिए पूरी तरह से तैयार हूं कि एचटीएमएल के लिए बाध्यकारी डेटा के साथ एक घोषणात्मक वाक्यविन्यास जाने का तरीका है, और मैं पूरी तरह से घूमने और शैली, सम्मेलन या जो कुछ भी अपनाने के लिए तैयार हूं। लेकिन मैं यह नहीं समझ सकता कि सरल प्रस्तुति सामग्री से अधिक कैसे शुरू किया जाए।

• AngularJS
• jQuery

बोनस डी 3 में से कुछ जिक्र नहीं है कि अगर =) मैं:

किसी का उपयोग करता है एक नमूना परियोजना के लिए मुझे बात कर सकते हैं (और अधिमानतः के उपयोग को दर्शाता है) विशेष रूप से jQuery-UI के बारे में परवाह नहीं करते हैं, लेकिन यह वहां होने के लिए मुझे चोट नहीं पहुंचाता है।

नोट

मैं this question देखा, लेकिन जवाब, थे फिर से, बहुत कोणीय करने के लिए एक नवागंतुक के लिए मददगार नहीं।

Answer 1

डीओएम मैनिपुलेशन निर्देशों में किया जाना चाहिए। मैं निम्नलिखित ट्यूटोरियल देखता हूं। http://www.youtube.com/watch?v=Yg-R1gchccg भाग 2 - - http://www.youtube.com/watch?v=nKJDHnXaKTY

अंततः आप भी आश्चर्य करने के लिए कैसे अपने नियंत्रकों और निर्देशों संवाद कर सकते हैं जा रहे हैं, और इस के लिए आप देखना चाहते हैं

AngularJS निर्देशक ट्यूटोरियल भाग 1: वे वास्तव में मुझे अवधारणाओं को समझने में मदद मिली $ स्कोप एपीआई: http://docs.angularjs.org/api/ng। $ rootScope.Scope

आप $ स्कोप का उपयोग करके ईवेंट भेज सकते हैं। $ प्रसारण, और $ scope.on का उपयोग करके ईवेंट सुनें।

एंगुलरजेएस और jQuery बहुत अच्छी तरह से काम करते हैं - बस कोणीय से पहले jQuery स्क्रिप्ट को उलझाएं और आपको जाने के लिए अच्छा होना चाहिए।

अंगुलरजेएस में अवधारणाओं को समझने में समय लगता है, लेकिन यह एक बहुत अच्छी तरह गोल और उत्पादक ढांचा है। बने रहिए।

Answer 2

AngularJS में, यदि आपको तत्व से बातचीत करने की आवश्यकता है, तो आप $ तत्व का अनुरोध करते हैं।

function Data ($scope, $element) { 
    $scope.slideUp = function() { 
     $element.slideUp(); 
    } 
} 

$ तत्व अगर यह आप $ ($ तत्व) की तरह कुछ करने के लिए आवश्यकता हो सकती है नहीं करता है, सभी jQuery कार्यक्षमता होना चाहिए .slideUp()। हालांकि यह थोड़ा सा मैला दिखता है।

ऐसा करने का बिल्कुल सही तरीका निर्देश के साथ होगा, लेकिन यह थोड़ी देर हो गया है क्योंकि मैंने एंगुलरजेएस के साथ काम किया था, और इस विधि को ठीक काम करना चाहिए।