AngularJS Directives

AngularJS Directives

Directives are the most powerful feature inside the AngularJS framework.

They allow you to extend standard HTML elements with custom behaviors.

What are Directives?

AngularJS directives are easily recognizable by the ng- prefix.

When AngularJS compiles your HTML, it scans for these special attributes.

If it finds one, it automatically executes the JavaScript logic tied to that directive!

Common Built-in Directives

There are dozens of built-in directives that handle everything from loops to events.

For example, ng-init initializes application variables directly in HTML.

Another popular one is ng-repeat, which loops through arrays and renders HTML for each item.

<div ng-app="" ng-init="names=['Alice', 'Bob', 'Charlie']">
  <ul>
    <!-- Loops through the array and creates an LI for each name -->
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

SEO and Best Practices

Use built-in directives like ng-repeat to dynamically generate lists of content.

Generating clean, semantic HTML structure using directives is highly beneficial for SEO bots.

Avoid writing overly complex logic directly inside your HTML attributes; move it to controllers!