Verwendung von AngularJS / AngularUI mit d3.js und DOM-Effekten

8

Ich möchte AngularJS für ein Projekt verwenden, an dem ich gerade arbeite. Ich habe viel darüber gelesen, habe die Videos angeschaut, mehrere Beispiel-Apps gemacht. Es macht alles Sinn, ich kaufe in die Konzepte.

Das Projekt, das ich mache, muss einige DOM-Spezialeffekte machen (Dinge dynamisch um die Seite bewegen, etc.) und einige D3.js-Diagramme einbauen.

Ich habe jQuery sehr oft benutzt; Ich verstehe und mag es. Ich habe AngularJS genug benutzt, um die Grundlagen zu bekommen. Ich verstehe völlig nicht, wie man Dinge wie jQuerys $("#my-element").slideUp() von Angular aus aufrufen kann. Zum Beispiel:

Nehmen wir an, ich habe irgendwo auf einer Seite den folgenden HTML-Code:

%Vor%

Und in der Site JS:

%Vor%

Das Beste, was ich dafür sagen kann, wie man etwas für Angular erreichen kann, ist:

HTML

%Vor%

CSS:

%Vor%

Irgendwie fühlt sich das an, als wäre es nicht der richtige Ansatz, aber ich weiß nicht, was der richtige Ansatz ist.

Ich sehe, dass es ein AngularUI-Projekt gibt, das ordentlich aussieht ... aber die "Dokumentation" geht davon aus, dass der Leser mit Angular ziemlich vertraut ist, anstatt mit einem Neuling.

Ich bin völlig bereit, die Idee von Angular zu kaufen, dass eine deklarative Syntax mit Datenbindung für HTML der richtige Weg ist, und ich bin bereit, den ganzen Stil zu übernehmen und den Stil, die Konventionen oder was auch immer anzunehmen. Aber ich kann mir nicht vorstellen, wie man mit mehr als nur einfacher Präsentation beginnt.

Kann mich jemand auf ein Beispielprojekt hinweisen, das (und demonstriert vorzugsweise den Gebrauch von):

  • AngularJS
  • jQuery

Bonus, wenn D3 erwähnt wird =) Mir ist jQuery-UI nicht besonders wichtig, aber es tut mir nicht weh, dass es da ist.

Hinweis

Ich sah diese Frage , aber die Antworten waren wiederum nicht sehr hilfreich für einen Neuling in Angular.

    
Sir Robert 07.12.2012, 17:55
quelle

2 Antworten

8

DOM-Manipulation soll in Direktiven erfolgen. Ich würde die folgenden Tutorials sehen. Sie haben mir wirklich geholfen, die Konzepte zu verstehen:

AngularJS Directive Tutorial Teil 1 - Ссылка Teil 2 - Ссылка

Schließlich werden Sie sich auch fragen, wie Ihre Controller und Direktiven kommunizieren können, und dazu wollen Sie sich die $ scope API ansehen: Ссылка . $ RootScope.Scope

Sie können Ereignisse mit $ scope. $ broadcast senden und Ereignisse mit $ scope.on abhören.

AngularJS und jQuery arbeiten sehr gut zusammen - fügen Sie einfach das jQuery-Skript vor Angular hinzu und Sie sollten gut gehen.

Es braucht Zeit, um die Konzepte in AngularJS zu verstehen, aber es ist ein sehr gut gerundeter und produktiver Rahmen. Bleib dran.

    
Brian DiCasa 07.12.2012, 18:15
quelle
1

Wenn Sie in AngularJS mit dem Element interagieren müssen, fordern Sie das $ -Element an.

%Vor%

Das $ -Element sollte alle jQuery-Funktionen haben, wenn Sie nicht unbedingt etwas wie $ ($ element) .slideUp () brauchen. Obwohl das ein bisschen schlampig aussieht.

Der vollständig korrekte Weg dazu wäre eine Direktive, aber es ist eine Weile her, seit ich mit AngularJS gearbeitet habe, und diese Methode sollte gut funktionieren.

    
Nicholas E. 07.12.2012 18:06
quelle

Tags und Links