Use AngularJS just for routing purposes

Question

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 devel

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