If you do a search for Angular directives most of the hits you get will be on how to write your own. Of course at some point you will want to do this. However Angular has many builtin directives ready for us to use.
So what are directives? The docs have this to say
Angular comes with a built in set of directives which are useful for building web applications but can be extended such that HTML can be turned into a declarative domain specific language (DSL).
If you look at the Angular docs on directives you'll see that it mostly talks about writing directives and the mechanics of how directives work. However if you look at the API docs you'll see many directives listed that are part of the framework. What I think is surprising about this set of directives is that as well as the ng* set of directives that augment the DOM, such as ngRepeat and ngClick, there are directives that replace standard HTML elements such as 'a' and 'input'. Obviously Angular is doing a lot of work under the covers to make our lives easier.
While Angular lets you build very complex applications it also lets you do very simple things, the simplest of which is to bind data to a model. You do this by using templates. Templates allow you to output data, carry out calculations in-line. Taken from the AngularJS docs:
Attribute Evaluation: evaluation of all properties are against the scope, doing the
evaluation, unlike in JavaScript where the expressions are evaluated against the global
window.
Forgiving: expression evaluation is forgiving to undefined and null, unlike in JavaScript,
where trying to evaluate undefined properties can generate ReferenceError or TypeError.
No Control Flow Statements: you cannot do any of the following in angular expression:
conditionals, loops, or throw.
Filters: you can pass result of expression evaluations through filter chains. For example
to convert date object into a local specific human-readable format.
Templates are simple to use, like this:
{{3 + 3}}
However this is not particularly interesting in and off itself, we are simply displaying data. To make this both more interesting and useful we'd like ability to dynamically grab dats from the user and then update the page using that data, this is where two-way binding comes in.
Two way data binding can be added to elements on the page. This binding allows data to be entered into one element and the value of that data to be reflected back through other elements on the page. To do this an input element is annotated with an ng-model attribute. This attribute specifies the name of the 'model' that the data will be stored in. As data is entered into the element Angular will update the model with this data. The value of this model can then be displayed using the 'moustache' syntax in a template as seen above.
{{3 + 34}}
Hello {{name}}
If a user enters the value 'Kevin' into the input field then the following is produced:
The key thing here is hg-model, this creates a model called 'name' which is then available to be used in the rest of the page, in this case inside the h2 tag. ng-model (aka ngModel) takes a string value which specifies the name of the model that Angular binds the data to.
Data-binding is a general purpose mechanism. This means that you can bind the data to other places in the DOM such as a class name or a attribute value.
AngularJS applications need to be 'bootstrapped.' This is done by adding the ng-app directive to an element in the page. You can use any element but typically the root 'body' or 'html' element is used.
<html ng-app="">
</html>
Notice that hg-app takes a string value, this is the name of a module to load, if you have no modules this can be the empty string.
Once you have this in place you can then start using Angular
<html ng-app="">
<body>
{{3 + 34}}
</body>
</html>
will cause angular to 'execute' the template and display the value 37 on the page.
This is about as simple as it gets for Angular code.
The problem with the simple approach of just using ng-app is that this is not compliant with the HTML 5 specification. Because of this Angular provides other ways of defining directives. Instead of just ng-app, you could use data-ng-app (this is the most widely used alternative) x-ng-app. This applies to all the directives not just ngApp.
