AngularJS Directives: Giving HTML Superpowers - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Unlocks the Secrets of Directives

Scene: Team Brainstorming – How Can HTML Do More?

After a busy week, the StartApp team (Sara, Mike, and Lina) wants to add new features: hide and show alerts, create dynamic lists, and build smart forms. They notice lots of mysterious ng- attributes in AngularJS examples.

Sara:
“I keep seeing ng-model, ng-repeat, ng-show in code. What are these for?”

Mike (reading):
“These are called AngularJS directives. They give normal HTML elements new abilities—sort of like HTML with superpowers!”

Lina:
“Cool! So, we can use these to build smarter UIs with less code?”

What is an AngularJS Directive?

  • Directives are special attributes (they usually start with ng-) that tell AngularJS to do something special with a DOM element.

  • They extend HTML with custom behavior.

The Team Tries Out Common Directives

1. ng-app – Bootstrapping AngularJS

They already use ng-app to declare the AngularJS application:

<div ng-app="taskApp">
  <!-- AngularJS is active here -->
</div>

2. ng-init – Initialize Data

Sara wants to pre-fill some data for quick demos:

<div ng-app ng-init="greeting='Hi there!'; score=42">
  <p>{{ greeting }}</p>
  <p>Score: {{ score }}</p>
</div>

3. ng-model – Two-way Binding with Forms

They revisit their live greeting feature:

<input ng-model="userName" placeholder="Type your name">
<p>Hello, {{ userName }}!</p>

Result: The page updates as soon as the user types.

4. ng-repeat – Listing Data

Mike wants to show the team’s top tasks:

<div ng-app ng-init="tasks=['Design','Develop','Deploy']">
  <ul>
    <li ng-repeat="t in tasks">{{ t }}</li>
  </ul>
</div>

Result: A list displays all three tasks automatically.

5. ng-show and ng-hide – Showing and Hiding Elements

Lina needs to show a warning only if the user leaves the name blank:

<input ng-model="userName" placeholder="Type your name">
<p ng-show="!userName">Please enter your name above.</p>

Result: The warning is only visible if the input is empty.

6. ng-disabled – Dynamically Disable Buttons

Sara wants to disable the “Add Task” button until the input isn’t empty:

<input ng-model="newTask" placeholder="New Task">
<button ng-disabled="!newTask">Add Task</button>

Result: The button is only enabled when newTask has a value.

Team Discussion: Why Are Directives Useful?

  • Mike: “Directives make our HTML cleaner and smarter. We write less JS, and focus on the UI.”

  • Sara: “I can build forms and lists without manual DOM updates or event listeners.”

  • Lina: “It’s easy to prototype! I can show or hide parts of the UI just with attributes.”

Recap Table: Most Useful AngularJS Directives

Directive Purpose Example
ng-app Defines the AngularJS application
ng-init Initializes variables
ng-model Two-way binds input to a variable
ng-repeat Repeats an element for each item in array
  • {{ i }}
    		•
    ng-show Shows element if expression is true

    Hello
    ng-hide Hides element if expression is true

    Hello
    ng-disabled Disables input/button if expression is true Go

    Quick Team Challenge: Practice with Directives

    Can you build a checklist that:

    • Shows a list of tasks (ng-repeat)

    • Lets the user type a new task (ng-model)

    • Disables the “Add” button if the input is empty (ng-disabled)

    • Shows a congratulatory message if the list has more than 3 tasks (ng-show)

    Solution:

    <!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="taskApp" ng-controller="taskCtrl">
  <h3>Checklist</h3>
  <input ng-model="newTask" placeholder="New Task">
  <button ng-click="addTask()" ng-disabled="!newTask">Add Task</button>
  <ul>
    <li ng-repeat="task in tasks">{{ task }}</li>
  </ul>
  <p ng-show="tasks.length > 3">Great job! You're on fire!</p>
</div>
<script>
  angular.module('taskApp', [])
    .controller('taskCtrl', function($scope) {
      $scope.tasks = ["Design logo", "Setup database"];
      $scope.addTask = function() {
        if ($scope.newTask) {
          $scope.tasks.push($scope.newTask);
          $scope.newTask = "";
        }
      }
    });
</script>
</body>
</html>

    Looking Ahead

    Mike:
    “These directives save us tons of code. What about creating our own directive someday?”

    Sara:
    “There’s a whole world of custom directives—we should explore that next!”

    Try these examples in the W3Schools AngularJS TryIt Editor.

    Ready for controllers, services, or custom directives next? Want everything so far in a single Markdown or Word doc? Just say the word!

    ⚠️ **GitHub.com Fallback** ⚠️