# AngularJS - Directives
{id: angularjs-directives}

## Directives
{id: directives}

* ng-app
* ng-controller
* ng-model
* ng-click
* ng-view
* ng-repeat
* ...


We can also create our own directives. But What for?


Directives are abstrctions of the View, the HTML in our application.



## Example: List people
{id: list-people}
![](examples/angular/list_people.html)
![](examples/angular/list_people.js)


## Example: List people with directive
{id: list-people-directive}
{i: directive}
{i: scope}
{i: replace}
{i: template}
![](examples/angular/list_people_directive.html)
![](examples/angular/list_people_directive.js)


## Example: List people with directive and templateUrl
{id: list-people-directive-url}
{i: templateUrl}
![](examples/angular/list_people_directive_url.html)
![](examples/angular/list_people_directive_url.js)




## Hello World directive
{id: hello-world-directive}
![](examples/try/hello_world_directive.html)
![](examples/try/hello_world_directive.js)


## Create new directive
{id: define-directive}
![](examples/try/demo_directive.html)
![](examples/try/demo_directive.js)
![](examples/try/demo_directive_definition.js)




