2012-12-07 16 views
8

Jestem zainteresowany wykorzystaniem AngularJS dla projektu, nad którym pracuję. Dużo czytałem, oglądałem filmy, zrobiłem kilka przykładowych aplikacji. Wszystko ma sens, kupuję koncepcje.Używanie AngularJS/AngularUI z efektami d3.js i DOM

Projekt, który robię, wymaga pewnych efektów specjalnych DOM (dynamiczne przemieszczanie elementów wokół strony itp.) I uwzględnienia niektórych wykresów D3.js.

Często używam jQuery; Rozumiem to i lubię to. Użyłem AngularJS na tyle, aby uzyskać podstawy. Zupełnie nie rozumiem, jak nazywać rzeczy takie jak jQuery's $("#my-element").slideUp() z poziomu Angular. Na przykład:

powiedzmy mam następujący kod HTML na stronę gdzieś:

<!-- 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> 

A w miejscu JS:

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

Najlepsze, co mogę powiedzieć na jak osiągnąć coś blisko to dla kątowego jest:

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> 

CSS:

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

Jakoś, że czuje się jak to nie jest właściwe podejście, ale nie wiem, co jest właściwe podejście.

Widzę, że istnieje projekt AngularUI, który wygląda schludnie ... ale "dokumentacja" zakłada, że ​​czytelnik jest dość dobrze zaznajomiony z Angular, a nie z nowicjuszem.

Jestem całkowicie chętny do zakupu idei Angulara, że ​​deklaratywna składnia z powiązaniem danych dla html jest drogą do zrobienia, i jestem gotów pójść na całość i przyjąć styl, konwencje lub cokolwiek innego. Ale nie mogę się dowiedzieć, jak zacząć od czegoś więcej niż prostych rzeczy do prezentacji.

Czy ktoś może wskazać mi przykładowy projekt, który używa (a najlepiej demonstruje użycie):

  • angularjs
  • jQuery

Bonus jeśli jest jakaś wzmianka o D3 =) Ja nie przejmuję się specjalnie jQuery-UI, ale nie robi mi to krzywdy, bym tam był.

Uwaga

Widziałem this question, ale odpowiedzi były znowu nie bardzo pomocne dla początkującego do kątowa.

+0

Sprawdź moją odpowiedź na to pytanie http://stackoverflow.com/questions/13103671/how-to-integrate-flot-with-angularjs. To nie jest D3, ale zasady są takie same. Przy okazji, zamierzam napisać coś o używaniu D3 z Angularem, daj mi znać, jeśli masz jakieś sugestie. – jaime

Odpowiedz

8

Manipulacja DOM ma być wykonana w dyrektywach. Chciałbym obejrzeć następujące samouczki. Oni naprawdę pomógł mi zrozumieć pojęcia:

angularjs dyrektywa Tutorial Part 1 - http://www.youtube.com/watch?v=Yg-R1gchccg część 2 - http://www.youtube.com/watch?v=nKJDHnXaKTY

końcu również będzie się zastanawiać, w jaki sposób kontrolery i dyrektyw może komunikować się, a do tego chcesz wyglądać w interfejsie $ scope API: http://docs.angularjs.org/api/ng. $ rootScope.Scope

Możesz wysyłać zdarzenia za pomocą $ scope. $ broadcast i słuchać zdarzeń za pomocą $ scope.on.

AngularJS i jQuery działają bardzo dobrze razem - po prostu wkrocz do skryptu jQuery przed Angular i powinieneś być dobry.

Potrzeba czasu, aby zrozumieć koncepcje w AngularJS, ale jest to bardzo dobrze zaokrąglone i wydajne ramy. Tak trzymać.

1

W AngularJS, jeśli potrzebujesz interakcji z elementem, żądasz elementu $.

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

$ element powinien mieć wszystkie funkcje jQuery, jeśli nie może trzeba zrobić coś jak $ ($ element) .slideUp(). Chociaż to wygląda trochę niechlujnie.

Całkowicie słusznym rozwiązaniem byłoby zastosowanie dyrektywy, ale minęło trochę czasu odkąd pracowałem z AngularJS, a ta metoda powinna działać dobrze.