---
title: "AngularJs Directives"
description: "Hi everyone in this article I’m explaining about Angularjs Directives."
author: "Anonymous User"
published: 2015-03-19
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/1676/angularjs-directives
category: "angular js"
tags: ["javascript", "angularjs directive", "javascript library"]
reading_time: 2 minutes
---
# AngularJs Directives
Hi everyone in this article I’m explaining about Angularjs [Directives](https://www.mindstick.com/blog/44/directives-in-asp-dot-net).\
##### Details:
AngularJS directives are used to extend HTML. These are special [attributes](https://www.mindstick.com/articles/13105/2-attributes-that-make-your-odoo-ecommerce-theme-productive-and-engaging) starting with ng- prefix. We're going to discuss following directives:\
1. ng-app - This directive starts an AngularJS [Application](https://www.mindstick.com/articles/12824/calculator-application-in-android).
2. ng-init - This directive initializes application data.
3. ng-model - This directive defines the model that is variable to be used in AngularJS.
4. ng-repeat - This directive repeats [html elements](https://www.mindstick.com/forum/158688/how-can-you-dynamically-create-html-elements-using-jquery) for each item in a [collection](https://www.mindstick.com/articles/1718/collections-in-java).
##### Ng-app Directive:
ng-app directive starts an AngularJs Application. It defines the [root element](https://www.mindstick.com/interview/1692/what-is-root-element-in-xml). It automatically initializes the application when [web page](https://answers.mindstick.com/qa/92898/how-to-create-a-web-page-using-bootstrap-4) containing Angularjs Application is loaded. It is also used to load various Angularjs modules in angularjs application. In following example we defined a default AngularJs application using ng-app attribute of a [div element](https://www.mindstick.com/forum/34450/remove-div-element).\
```
...
```
##### Ng-init directive:
Ng-init directive initializes an AngularJs Application data. It is used to put values to the variables to be used in the application. In following example we’ll [initialize an array](https://www.mindstick.com/forum/159225/how-can-i-declare-and-initialize-an-array-in-java) of countries we are using JSON syntax to define array of countries.\
```
...
```
##### Ng-model directive:
Ng-model directive defines the model/variable to be used in Angularjs Application. In following example we defined a model named “username”\
```
...
Enter your Name:
```
##### Ng-repeat directive:
Ng-repeat directive repeats html elements for each time in a collection in following example we iterated over array of countries.\
```