Using AngularJS / AngularUI with d3.js and DOM effects
angular-ui, angularjs, d3.js, jquery
Solution
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.
Problem
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.