Home/ Questions/Q 8966595
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:03:22+00:00

I’m interested in using AngularJS for a project I’m working on. I’ve read a

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0