Interview Questions to remember

AngularJS Directives

As you have already seen, AngularJS directives are HTML attributes with an ng prefix.

• The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text"></p>
</div>

</body>
</html>
                                                                                                                                                                   

• The ng-model directive binds the value of the input field to the application variable name.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
</div>

</body>
</html>

                                                                                                                                                                   

• The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

                                                                                                                                                                   

• The ng-init directive initializes AngularJS application variables.

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>