Built-in Directives in AngularJS

AngularJS is a powerful JavaScript framework that helps developers build dynamic web applications. One of its key features is the use of built-in directives, which are special HTML attributes that enhance the functionality of AngularJS applications. In this article, we will explore some of the most commonly used built-in directives in AngularJS.

1. ng-app Directive

The ng-app directive is used to define the root element of an AngularJS application. By adding this directive to an HTML element, we inform AngularJS that this element and its children will be using AngularJS features. For example:

<div ng-app="myApp">
  <!-- AngularJS code goes here -->
</div>

In the above example, the ng-app directive is added to a <div> element, indicating that the AngularJS application will be within this element. The "myApp" value is used to reference the AngularJS module that will be initialized.

2. ng-controller Directive

The ng-controller directive is used to define the controller for a particular section of an AngularJS application. It is added to an HTML element and specifies the name of the controller as a value. For example:

<div ng-app="myApp" ng-controller="myController">
  <!-- AngularJS code goes here -->
</div>

In the above example, the ng-controller directive is added to a <div> element, specifying that the controller named "myController" will be used for this section of the application.

3. ng-model Directive

The ng-model directive is used to bind the value of an HTML input element to a variable in the AngularJS application. It establishes a two-way data binding, meaning that any changes in the input element will be reflected in the variable, and vice versa. For example:

<input type="text" ng-model="name">

In the above example, the ng-model directive is added to an <input> element, binding its value to the "name" variable.

4. ng-repeat Directive

The ng-repeat directive is used to repeat a portion of HTML code multiple times based on an array or object in the AngularJS application. It iterates over each item in the collection and generates the HTML code accordingly. For example:

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

In the above example, the ng-repeat directive is added to an <li> element, repeating it for each item in the items array. The {{ item }} expression represents the value of each item in the array.

These are just a few examples of the many built-in directives available in AngularJS. They provide powerful features that make it easier to develop dynamic and interactive web applications. By understanding and utilizing these directives effectively, you can leverage the full potential of AngularJS in your projects.