Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 7 down vote favorite
1

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.

share|improve this question
Check my answer to this question stackoverflow.com/questions/13103671/…;. 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. – jm- Dec 7 '12 at 20:55
add comment (requires an account with 50 reputation)

2 Answers

up vote 7 down vote accepted

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.

share|improve this answer
add comment (requires an account with 50 reputation)
up vote 1 down vote

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.

share|improve this answer
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.