AngularJS DOM manipulation with jqLite

In this tutorial, I will be talking about how to manipulate DOM using jqLite. jqLite is a subset of jquery which allows angular to manipulate DOM. Let's start by creating the basic structure. Create two files described below:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>AngularJS DOM manipulation with jqLite</title>
    <link
      rel="stylesheet"
      href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div class="container" ng-app="myApp">
      <my-directive></my-directive>
    </div>
  </body>
</html>

app.js

'use strict';

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function () {
  return {
    template: '<h1>This is myDirective</h1>',
    restrict: 'E',
    replace: true,
    link: function (scope, element, attrs) {},
  };
});

Open index.html in the browser, the output will be "This is myDirective" in heading1.

Angular's jqLite (source: AngularDocs)

jqLite provides only the following jQuery methods:

addClass()
after()
append()
attr()
bind() – Does not support namespaces, selectors or eventData
children() – Does not support selectors
clone()
contents()
css()
data()
detach()
empty()
eq()
find() – Limited to lookups by tag name
hasClass()
html()
next() – Does not support selectors
on() – Does not support namespaces, selectors or eventData
off() – Does not support namespaces or selectors
one() – Does not support namespaces or selectors
parent() – Does not support selectors
prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
triggerHandler() – Passes a dummy event object to handlers.
unbind() – Does not support namespaces
val()
wrap()

In the case of angular jqLite, angular.element is used as a alias for jQuery or $ as in the jQuery. Let's take a look at some of the functions jqLite supports, replace the code corresponding to the function with app.js.

text()

'use strict';

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function () {
  return {
    template: '<h1>This is myDirective</h1>',
    restrict: 'E',
    replace: true,
    link: function (scope, element, attrs) {
      element.text('this is the myDirective directive');
    },
  };
});

prepend(), append()

'use strict';

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function () {
    return {
      template: '<h1>This is myDirective</h1>',
      restrict: 'E',
      replace: true,
      link: function (scope, element, attrs) {
            element.prepend('this is prepend text <hr/>');
            element.append('<hr/> this is append text');
         }
     };
  });

bind(), addClass(), toggleClass()

'use strict';

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function () {
    return {
      template: '<h1>This is myDirective</h1>',
      restrict: 'E',
      replace: true,
      link: function (scope, element, attrs) {
            element.addClass('btn btn-primary');
            element.bind('click', function(event) {
                element.toggleClass('btn btn-primary');

            });
         }
     };
  });

Similarly, all the other functions can be used like this. Also, if you want you can use complete jQuery library and use it with Angular. Angular & jQuery works well with each other.