<commit_before>---
layout: post
title: AngularJS - its turtles all the way down!
---

![alt text ]({{ site.baseurl }}/images/turtles.jpg "Turtles all the way down")

## AngularJS - it's directives all the way down

## data-ng-app

The first part of learning AngularJS is nearly always adding the attribute ng-app to your html that auto-bootstraps your AngularJS application.

{% highlight html %}
	<html data-ng-app="app">
{% endhighlight %}

or 

{% highlight html %}
	<body ng-app="app">
{% endhighlight %}

<em>You should of course use the data-* syntax if you want your html to be valid according to the [HTML5 specification](http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes).</em>

Adding the data-ng-app attribute to a html element is creating a ngApp directive that tells angular that this element is to be the root of the application.

## MVC - ngModel ngView ngController

### ngModel

AngularJS is built in a MVC software design pattern and the building blocks are ngModel ngView and ngController.

The ngModel directive takes responsibility for managing and binding data to html elements such as a text input 

{% highlight html %}
	<input type="text" name="email" data-ng-model="data.email">
{% endhighlight %}

### ngView 

The ngView directive is used by angular as a container to switch between views when used in conjunction with [$route](https://docs.angularjs.org/api/ngRoute/service/$route) service.	
{% highlight html %}
<div ng-app="app">
  	<ng-view></ng-view>
</div>
{% endhighlight %}
<commit_msg>Edited directives all the way down post<commit_after>---
layout: post
title: AngularJS - its turtles all the way down!
---

![alt text ]({{ site.baseurl }}/images/turtles.jpg "Turtles all the way down")

## AngularJS - it's directives all the way down

## data-ng-app

The first part of learning AngularJS is nearly always adding the attribute ng-app to your html that auto-bootstraps your AngularJS application.

{% highlight html %}
	<html data-ng-app="app">
{% endhighlight %}

or 

{% highlight html %}
	<body ng-app="app">
{% endhighlight %}

<em>You should of course use the data-* syntax if you want your html to be valid according to the [HTML5 specification](http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes).</em>

Adding the data-ng-app attribute to a html element is creating a ngApp directive that tells angular that this element is to be the root of the application.

## MVC - ngModel ngView ngController

AngularJS is built in a MVC software design pattern and the building blocks are ngModel ngView and ngController.

### ngModel

The ngModel directive takes responsibility for managing and binding data to html elements such as a text input 

{% highlight html %}
	<input type="text" name="email" data-ng-model="data.email">
{% endhighlight %}

### ngView 

The ngView directive is used by angular as a container to switch between views when used in conjunction with [$route](https://docs.angularjs.org/api/ngRoute/service/$route) service.	
{% highlight html %}
<div ng-app="app">
  	<ng-view></ng-view>
</div>
{% endhighlight %}

{'fraction_non_alphanumeric': 0.10986267166042447, 'fraction_numerical': 0.009363295880149813, 'mean_word_length': 4.262725779967159, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '970325', 'n_tokens_mistral': 1015, 'n_tokens_neox': 915, 'n_words': 376}