I've just been assigned a website that was made entirely with jQuery. It load asynchronously a few pages, and want to be a SPA.

Now the only thing is that the developer didn't think about URL in general, and people can't access the site any other way than by www.example

I know AngularJS a bit and my question would be: -Is it worth integrating AngularJS to just manage the routing, just so I don't have to go through jQuery and checking each and every click, then each links?

Thanks

I've just been assigned a website that was made entirely with jQuery. It load asynchronously a few pages, and want to be a SPA.

Now the only thing is that the developer didn't think about URL in general, and people can't access the site any other way than by www.example.

I know AngularJS a bit and my question would be: -Is it worth integrating AngularJS to just manage the routing, just so I don't have to go through jQuery and checking each and every click, then each links?

Thanks

• javascript
• jquery
• angularjs

• You know you can delegate click events to the document and add one singe listener for the entire application? – David Hellsing Commented Dec 6, 2013 at 10:18
• no I didn't know that... how does that work? – Got The Fever Media Commented Dec 6, 2013 at 10:19
• 1 $(document).click(function(e) { do something with e.target } learn.jquery./events/event-delegation – David Hellsing Commented Dec 6, 2013 at 10:25

1 Answer 1

Of course you can use AngularJs for just routing.

Where angular and jquery stop working together is, you cant use jquery selection on views generated in angular directives, because jquery do not select the runtime generated views.

To monitor for angularjs to when it finishes the DOM manipulation, use this in your controller of angular to call the jqueryStartWork method, which should initiate working of jquery.

function stuffController($scope) {
$scope.$on('$viewContentLoaded', jqueryStartWork);
}

For some angularjs directives rendering monitor,you can have a directive which will trigger event when the angular finishes dom manipulation by that directive. For example to monitor the ng-repeat, for rendering finish add this directive

var app = angular.module('myapp', [])
.directive('onFinishRender', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        if (scope.$last === true) {
            $timeout(function () {
                scope.$emit('ngRepeatFinished');
            });
        }
    }
}
});

and then add a new function in controller which will be called on ng-repeat finishes, like this.

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...
    alert("ng-repeat finished");
});

but dont forget to add this directive to your ng-repeat tag, like this

<tr data-ng-repeat="product in products" on-finish-render>

[EDIT] Today I have been trying to run a simple D3 svg append script in a div of a md-tab. I faced the problem to draw it after the controller has finished (md-tab has also finished) rendering everything. I e up that if you use the $timeout (wrapper on windows.setTimeout) it will add a new event to browser's event queue. It will run after current queue(rendering) and before the new timeout event function(s) you add in order. It will work with 0ms too.

 $timeout(drawTree, 0); //drawTree is a function to get #tree div in a md-tab and append a D3 svg