Angularjs html dom

In AngularJS, the HTML DOM is manipulated using directives, which are special markers that can be added to HTML elements to attach behavior to them. Directives are used to create custom HTML elements, attributes, and classes, and to extend the functionality of existing HTML elements.

There are many built-in directives in AngularJS, such as ng-model, ng-repeat, ng-show, and ng-hide, which are used to bind data to HTML elements, create repeating elements, show or hide elements based on conditions, and more.

Here's an example of how to use the ng-repeat directive to create a list of items:

<li ng-repeat="item in items">{{ item.name }}

In this example, we have used the ng-repeat directive to create a list of items based on an array of objects called items. The directive iterates over the array and creates a list item for each object, displaying the name property of each object.

AngularJS also allows you to create custom directives using the directive function, which takes a name and a factory function that returns a configuration object. The configuration object can define the behavior and properties of the directive, including its template, scope, controller, and link function.

Here's an example of how to create a custom directive that displays a message when the user hovers over an element:

angular.module('myApp').directive('myDirective', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.on('mouseenter', function() {
        console.log('You hovered over the element!');
      });
    }
  };
});

In this example, we have created a custom directive called myDirective using the directive function. The directive is restricted to attributes using the restrict property, and its behavior is defined in the link function, which listens for the mouseenter event on the element and logs a message to the console.

Once the directive is defined, it can be used in HTML elements by adding the directive name as an attribute, like this:

<div my-directive>Hover over me!</div>