Use AngularJS for routing purposes only.

Question

I have just been assigned a site that was completely created using jQuery. It loads asynchronously with several pages and wants to be a SPA.

Now the only thing that the developer did not think about the URL in general, and people can not access the site in any other way than www.example.com

I know AngularJS a bit, and my question is: Is it worth integrating AngularJS to just manage routing, so I don’t have to go through jQuery and check every click, then every link?

thank

Answer 1

Of course, you can use AngularJs only for routing.

Where angular and jquery stop working together, you cannot use jquery selection for views generated in angular directives because jquery does not select the generated runtime views.

To track angular values ​​when it finishes manipulating the DOM, use this in the angular controller to call the jqueryStartWork method, which should initiate jquery.

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

For some angularjs rendering monitors, you may have a directive that will raise an event when angular finishes dom manipulating this directive. For example, to track ng-repeat, add this directive to finish the finish

 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 to the controller that will be called at the ends of ng-repeat, for example.

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

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

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

[EDIT] Today I am trying to run a simple D3 svg append script in the md-tab div. I ran into a problem to draw it after the controller completes (md-tab also finished), displaying everything. I came to the conclusion that if you use $ timeout (wrapper on windows.setTimeout), it will add a new event to the browser event queue. It will be launched after the current queue (rendering) and before the new function (s) of the timeout event that you add in order. It will also work from 0 ms.

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