converting Jquery to angular or making Jquery work in angular

Question

I am new to angular and we are converting a set of screens based on jsp to angular. Initially we have written lot of code in Jquery. Converting them to angular is tedious task and thought of trying to see if we can make jquery work with angular. Here is teh code snippet that i am trying to make it work while it in Jquery.

 $(document).ready(function() {
    $("#ClickTask2").click(function() {
        $(".ClickTask1").hide();
        $(".ClickTask2").show();
    });
});

Above is the piece of code I have in JQuery and i tried to make it work.

 angular.element(document).ready(function() {
    $("#ClickTask2").click(function() {
        $(".ClickTask1").hide();
        $(".ClickTask2").show();
    });
});

Can anyone tell me how i could make it work with minimal changes to the above one and rest of the jqueries?

You don't translate jQuery to angular this way. Angular approach is totally different and you would change data in model and use `ng-show` or `ng-hide` in html for this after an `ng-click` event — charlietfl, Jan 08 '15 at 14:19
I agree with @blockhead you should go read up on how to use angular and perhaps do the tutorial. — Mathew Berg, Jan 08 '15 at 14:19
please read [“Thinking in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Jan 08 '15 at 14:22
Go read the basis of Angular and you will learn how to relate data with presentation (as said, with ng-show and ng-hide, or ng-if). Read about the supported event handlers. Finally, if you really need to integrate jquery, read about directives. — Luis Masuelli, Jan 08 '15 at 14:22

score 0 · Answer 1 · answered Jan 08 '15 at 14:24

You can convert many jquery features over to Angular by simply changing the $() method to angular.element() e.g.

$('#output').html('<h1>Title</h1>');

You could convert this to:

angular.element('#output').html('<h1>Title</h1>');

However not all function work, and some are renamed e.g.

$("#output").click(function() { console.log('Hi'); });

Would need to be changed to:

angular.element('#output').on('click', function() { console.log('Hi'); });

You can find a full list of the supported functions here: https://docs.angularjs.org/api/ng/function/angular.element

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

like said Luis Masuelli on the comments read the basis of Angular. a quick lesson

app.js

function TaskCtrl($scope) {
  $scope.selectedTask = null;
  $scope.tasks = [/* ... */];
  $scope.onClickTask = function(task) {
    $scope.selectedTask = task;
  }
  $scope.isSelected = function (task) {
    return task === $scope.seletectedTask;
  }
}

$scope it is a special variable, it is injected by Angular to controllers and serves to communicate the controller with the view among other things. A controller can be any function and the name does not matter.

main HTML

<ul data-ng-controller="TaskCtrl">
<li data-ng-repeat="task in tasks" data-ng-click="onClickTask(task)">
  {{task.title}}
  <div data-ng-show="isSelected(task)">{{task.description}}</div>
</li>
</ul>

data-ng-controller tells to Angular "this is the controller" for this tag and her children. The other directives are pretty explanatory, but the documentation you left it more clearly.

Of course I am assuming that your tasks has the following structure:

{
  title: "...",
  description: "..."
}

in your html you need include the angular.js, the previous js and a directive to tell angular that this is a application

<!DOCTYPE html>
<html>
  <head></head>
  <body data-ng-app>
   <!-- main HTML -->
   <script src="angular.js"><script/>
   <script src="app.js"><script/>
  </body>
</html>

the data- prefix on each directive is not necessary but as angular "extend" HTML and these are not native attributes, I use them to place custom attributes as "ng-repeat", "ng-controller", "ng-app" etc. They are called directives

Remember, with Angular you need not manipulate the DOM directly as is done with jQuery, except for some special exceptions

converting Jquery to angular or making Jquery work in angular

2 Answers2

app.js

main HTML