Using AngularJS / AngularUI with d3.js and DOM effects

Question

I'm interested in using AngularJS for a project I'm working on. I've read a lot about it, watched the videos, done several sample apps. It all makes sense, I buy into the concepts.

The project I'm doing needs to do some DOM special effects (moving things around the page dynamically, etc.) and incorporate some D3.js charting.

I've used jQuery a lot; I get it and like it. I've used AngularJS enough to get the basics. I completely don't understand how to call things like jQuery's $("#my-element").slideUp() from within Angular. For example:

Let's say I have the following HTML in a page somewhere:

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

And in the site JS:

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

The best I can tell for how to accomplish something close to this for Angular is:

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();
  }
}

Somehow that feels like it's not the right approach, but I don't know what the right approach is.

I see that there's an AngularUI project that looks neat... but the "documentation" assumes the reader is pretty deeply familiar with Angular, instead of a newcomer.

I'm completely willing to buy the idea of Angular that a declarative syntax with data binding for html is the way to go, and I'm willing to go whole-hog and adopt the style, conventions, or whatever. But I can't figure out how to get started with more than simple presentation stuff.

Can someone point me to a sample project that uses (and preferably demonstrates the use of):

AngularJS
jQuery

Bonus if there's some mention of D3 =) I don't especially care about jQuery-UI, but it doesn't hurt me for it to be there.

Note

I saw this question, but the answers were, again, not very helpful for a newcomer to Angular.

Check my answer to this question http://stackoverflow.com/questions/13103671/how-to-integrate-flot-with-angularjs. It's not D3 but the principles are the same. Btw, I'm planning to write something about using D3 with Angular, let me know if you have suggestions. — jaime, Dec 07 '12 at 20:55

score 8 · Accepted Answer · answered Dec 07 '12 at 18:15

DOM manipulation is supposed to be done in directives. I would watch the following tutorials. They really helped me understand the concepts:

AngularJS Directive Tutorial Part 1 - http://www.youtube.com/watch?v=Yg-R1gchccg Part 2 - http://www.youtube.com/watch?v=nKJDHnXaKTY

Eventually you are also going to wonder how your controllers and directives can communicate, and for this you want to look at the $scope API: http://docs.angularjs.org/api/ng.$rootScope.Scope

You can send events using $scope.$broadcast, and listen to events using $scope.on.

AngularJS and jQuery work very well together - just inlcude the jQuery script before Angular and you should be good to go.

It takes time to understand the concepts in AngularJS, but it is a very well rounded and productive framework. Keep at it.

score 1 · Answer 2 · answered Dec 07 '12 at 18:06

In AngularJS, if you need to interact with the element, you request the $element.

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

The $element should have all jQuery functionality, if it doesn't you may need to do something like $($element).slideUp(). Although that does look a bit sloppy.

The completely correct way to do this would be with a directive, but it's been a while since I worked with AngularJS, and this method should work fine.

Using AngularJS / AngularUI with d3.js and DOM effects

Note

2 Answers2