AngularJS | HTML DOM

AngularJS is a JavaScript framework that extends HTML by adding directives, filters, services and other functionality to enhance the development of dynamic web applications. One of the ways AngularJS achieves this is through its manipulation of the HTML DOM.

HTML DOM Manipulation in AngularJS

The Document Object Model (DOM) is a standard programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style and content. AngularJS extends the HTML DOM with directives and data binding.

Directives

Directives are a way to add behavior to an HTML element or attribute. AngularJS has many built-in directives for DOM manipulation such as ng-repeat, ng-show, ng-hide, ng-class, ng-style, and more. Directives start with a "ng-" prefix and are declared in the HTML markup.

Example:

<ul>
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

In the example above, the ng-repeat directive is used to repeat the list item for each item in the "items" array.

Data Binding

Data binding is a way to synchronize data between the model and view components in an AngularJS application. When data in the model changes, it reflects in the view, and vice versa.

AngularJS provides two-way data binding, which means any changes made in the view will be reflected in the model and any changes made in the model will be reflected in the view.

Example:

<input type="text" ng-model="name">
<p>Hello {{ name }}!</p>

In the example above, the ng-model directive binds the input value to the "name" variable in the model. The value of the "name" variable is then displayed in the paragraph tag using the {{ }} expression.

Services

Services in AngularJS are used to share code between components or provide common functionality to the application. There are many built-in services in AngularJS, such as $http for making HTTP requests, $location for manipulating the browser URL, and $timeout for running code after a specified amount of time.

Example:

app.service('myService', function() {
  this.sayHello = function(name) {
    return "Hello " + name + "!";
  };
});

In the example above, a new service called "myService" is created with a method called "sayHello" that returns a greeting with the provided name. The service can then be injected into any component that needs it.

Conclusion

AngularJS provides developers with powerful tools for working with the HTML DOM. Directives, data binding, and services all work together to create dynamic, responsive, and maintainable web applications.