<commit_before># Hola mundo!

 En éste capítulo vamos a crear nuestra primera aplicación con AngularJS, super básica, que nos va a dar la estructura inicial para poder desarrollar Pedalear Trae Felicidad (PTF).
 El código de éste capítulo se puede ver en el branch `capitulo/hola-mundo` [acá](https://github.com/germanio/intro-a-angularjs/tree/capitulo/hola-mundo).

## Paso 1: la vista

 Vamos a crear la vista, o sea el HTML, y le vamos a agregar la librería de Angular y la de Bootstrap (nos gusta Bootstrap, Bootstrap es bueno).
 El Html inicial va a quedar así:

    public/html/index.html

    <!doctype html>
    <html lang="es">
        <head>
            <title><NAME> Felicidad</title>
            <meta charset="utf-8">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="<KEY>" crossorigin="anonymous">
        </head>
        <body>
            <h1>Hola Mundo! <span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span></h1>

            <!-- Librerías acá -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="<KEY>CJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
        </body>
    </html>

 Hasta acá todo bien, pero no es una aplicación Angular todavía. Sólo está mostrando un texto y un glyphicon de Bootstrap, pero nos sirve para ver que las librerías están en su lugar.

## Paso 2: integración con AngularJS

 Hay que agregar un atributo al html para que Angular interprete que ahí hay una aplicación. Ese atributo es `ng-app`, que representa una _directiva_ de Angular que es la encargada de indicar dónde comienza la aplicación.

    <html lang="es" ng-app>

 Ahora podemos agregar un _binding_ para ver si nuestro "Hola Mundo" de verdad funciona.

    <body>
        <h1>Hola \{\{ 'Mundo' + '!' \}\}</h1>
    </body>

 Esto demuestra dos funcionalidades principales de Angular para armar las vistas (templates):

 - Un _binding_, que se escribe con doble llave: `\{\{ \}\}`
 - Una expresión en Javascript, como la concatenación de dos strings: `'Mundo' + '!'`

 El binding le dice a Angular que debe evaluar la expresión que contiene y usar el resultado de la misma para reemplazar dicho binding en el DOM de la página.
 Es como decir "Acá va el resultado de ésta expresión, calculalo y reemplazalo".
 Lo interesante de ésto es que el reemplazo se hace cada vez que el resultado de la expresión cambia, por lo tanto resulta en una forma muy eficiente de actualizar la vista sin agregar lógica adicional.

 El resultado que debería aparecer en pantalla es:

    Hola Mundo!

## Paso 3: entendiendo qué está pasando

 La directiva `ngApp` automáticamente inicia la aplicación Angular. Hay 3 cosas que suceden durante el inicio que está bueno tener en cuenta:

 1. Se crea un elemento conocido como `injector` que va a ser el encargado de la inyección de dependencias de la aplicación (básicamente, se encarga de cablear los distintos elementos de la aplicación antes de que arranque)
 1. El injector entonces crea el `root scope`, otro elemento que va a servir de contexto para nuestro `Modelo` en la aplicación. El Html es la vista, el `scope` es el modelo.
 1. Finalmente, Angular revisa todo el html comprendido entre las etiquetas que tienen la directiva, buscando directivas y bindings para compilar y así completar el inicio de la aplicación.

 Una vez que la aplicación inició, se queda escuchando eventos del navegador, como clicks del mouse, teclas que se presionan o mensajes de servidores remotos. Si dichos eventos cambian el modelo, Angular se encarga de refrescar la vista usando los bindings.

## Paso 4: ahora te toca a vos!

 Probá de agregar un nuevo binding con la expresión que vos quieras. Por ejemplo, la suma de dos números:

    <p>La expresión 5 + 3 es igual a \{\{ 5 + 3 \}\}</p><commit_msg>Vamos de nuevo con el escaping de { }<commit_after># Hola mundo!

 En éste capítulo vamos a crear nuestra primera aplicación con AngularJS, super básica, que nos va a dar la estructura inicial para poder desarrollar <NAME> (PTF).
 El código de éste capítulo se puede ver en el branch `capitulo/hola-mundo` [acá](https://github.com/germanio/intro-a-angularjs/tree/capitulo/hola-mundo).

## Paso 1: la vista

 Vamos a crear la vista, o sea el HTML, y le vamos a agregar la librería de Angular y la de Bootstrap (nos gusta Bootstrap, Bootstrap es bueno).
 El Html inicial va a quedar así:

    public/html/index.html

    <!doctype html>
    <html lang="es">
        <head>
            <title><NAME></title>
            <meta charset="utf-8">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="<KEY>" crossorigin="anonymous">
        </head>
        <body>
            <h1>Hola Mundo! <span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span></h1>

            <!-- Librerías acá -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
        </body>
    </html>

 Hasta acá todo bien, pero no es una aplicación Angular todavía. Sólo está mostrando un texto y un glyphicon de Bootstrap, pero nos sirve para ver que las librerías están en su lugar.

## Paso 2: integración con AngularJS

 Hay que agregar un atributo al html para que Angular interprete que ahí hay una aplicación. Ese atributo es `ng-app`, que representa una _directiva_ de Angular que es la encargada de indicar dónde comienza la aplicación.

    <html lang="es" ng-app>

 Ahora podemos agregar un _binding_ para ver si nuestro "Hola Mundo" de verdad funciona.

{% raw %}
    <body>
        <h1>Hola {{ 'Mundo' + '!' }}</h1>
    </body>
{% endraw %}

 Esto demuestra dos funcionalidades principales de Angular para armar las vistas (templates):

{% raw %}
 - Un _binding_, que se escribe con doble llave: `{{ }}`
 - Una expresión en Javascript, como la concatenación de dos strings: `'Mundo' + '!'`
{% endraw %}

 El binding le dice a Angular que debe evaluar la expresión que contiene y usar el resultado de la misma para reemplazar dicho binding en el DOM de la página.
 Es como decir "Acá va el resultado de ésta expresión, calculalo y reemplazalo".
 Lo interesante de ésto es que el reemplazo se hace cada vez que el resultado de la expresión cambia, por lo tanto resulta en una forma muy eficiente de actualizar la vista sin agregar lógica adicional.

 El resultado que debería aparecer en pantalla es:

    Hola Mundo!

## Paso 3: entendiendo qué está pasando

 La directiva `ngApp` automáticamente inicia la aplicación Angular. Hay 3 cosas que suceden durante el inicio que está bueno tener en cuenta:

 1. Se crea un elemento conocido como `injector` que va a ser el encargado de la inyección de dependencias de la aplicación (básicamente, se encarga de cablear los distintos elementos de la aplicación antes de que arranque)
 1. El injector entonces crea el `root scope`, otro elemento que va a servir de contexto para nuestro `Modelo` en la aplicación. El Html es la vista, el `scope` es el modelo.
 1. Finalmente, Angular revisa todo el html comprendido entre las etiquetas que tienen la directiva, buscando directivas y bindings para compilar y así completar el inicio de la aplicación.

 Una vez que la aplicación inició, se queda escuchando eventos del navegador, como clicks del mouse, teclas que se presionan o mensajes de servidores remotos. Si dichos eventos cambian el modelo, Angular se encarga de refrescar la vista usando los bindings.

## Paso 4: ahora te toca a vos!

 Probá de agregar un nuevo binding con la expresión que vos quieras. Por ejemplo, la suma de dos números:
{% raw %}
    <p>La expresión 5 + 3 es igual a {{ 5 + 3 }}</p>
{% endraw %}
{'fraction_non_alphanumeric': 0.0863205850617432, 'fraction_numerical': 0.00755305119290253, 'mean_word_length': 3.6370205669816564, 'pattern_counts': {'":': 0, '<': 68, '<?xml version=': 0, '>': 68, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, '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': '1829828', 'n_tokens_mistral': 2792, 'n_tokens_neox': 2616, 'n_words': 1089}