Para iniciarnos con Angular JS es necesario tener un cambio de mentalidad de como hacemos las cosas, si venimos del mundo de jQuery se nos puede complicar un poco entender los conceptos que Angular JS maneja.

En este tutorial se muestra, mediante un ejemplo, lo que debemos tener en mente a la hora de adentrarnos en Angular JS, en ingles a esto se le denomina "The Angular Way".

Para explicar este concepto vamos a realizar un pequeño ejemplo en jQuery y luego lo portaremos a Angular, lo que haremos será desplegar un botón, cada que el usuario de click sobre ese botón mostraremos/ocultaremos un mensaje de error.

jQuery

Primero definimos el html que vamos a usar.

<div id="message" class="hidden msg msg-error">
    <p>Lo sentimos pero ha ocurrido un error.</p>
</div>

<button id="btn">Enviar</button>

Solamente es un div con algunas clases css y un botón, vamos a definir los estilos para esos elemento.

.hidden{
    display:none;
}
.msg{
    padding:5px 20px;
    margin:10px 0;
}
.msg-error{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

Aquí definimos una clase hidden, esta clase es la que vamos a estar usando para ocultar o mostrar el mensaje, mediante JavaScript se la vamos a agregar o quitar cuando se de click sobre el botón.

Ahora definamos el JavaScript de la siguiente manera.

$(function(){
    $('#btn').click(function(){
        $('#message').toggleClass('hidden');
    });    
})

Algo muy sencillo realmente, cuando el DOM esté listo agregamos un listener al botón, luego quitamos o agregamos la clase hidden al div del mensaje. 

Esto es algo muy común cuando usamos jQuery, modificamos el DOM, cambiamos estilos, agregamos listeners, etc.

Puedes ver el demo aquí: http://jsfiddle.net/crysfel/pou0a8pn/

Angular JS

Ahora haremos exactamente lo mismo pero usando Angular JS, algo importante a considerar es que Angular es un framework que nos provee de herramientas para crear aplicaciones de gran escala, nos proporciona de templates reutilizables, controladores, servicios,factorías, directivas,entre varias cosas más.

Primero vamos a modificar el template de la siguiente manera.

<div ng-app="MyApp" ng-controller="Controller">
    <div class="msg msg-error" ng-class="{'hidden':!error}">
        <p>Lo sentimos pero ha ocurrido un error.</p>
    </div>
    
    <button ng-click="toggleError()">Enviar</button>
</div>

Algo importante es que a diferencia del ejemplo con jQuery, esto es un template que será procesado por Angular, no es el DOM final todavía, es un template.

Como se puede observar estamos declarando una app llamada MyApp y un controlador llamado Controller, también estamos usando la directiva ng-class, esta directiva me permite agregar la clase hidden siempre y cuando la variable error sea true.

Por último invocamos el método toggleError que será el responsable de asignar el valor a la variable error, este método lo vamos a definir en el controlador así como la variable error.

El template está listo, solo nos falta crear la aplicación, el controlador y el método que estamos invocando de la siguiente manera.

angular.module('MyApp',[])

.controller('Controller',function($scope){
    $scope.error = false;
    
    $scope.toggleError = function(){
        $scope.error = !$scope.error;
    }
});

Primero creamos el modulo MyApp, luego el controlador Controller, la parte interesante está dentro del controlador.

El objeto $scope es el que une las vistas (templates) con el controlador, todo lo que se defina sobre el $scope podrá ser accedido en las vistas, aquí es que definimos la variable error e inicialmente le asignamos false, esto provocará que el mensaje esté oculto inicialmente.

En el método toggleError solamente estamos negando la variable error, para mostrar u ocultar el mensaje cada que el usuario de click sobre el botón.

Puede ver el ejemplo funcionando aquí: http://jsfiddle.net/crysfel/pkkgqcw8/

Si lo notaste, en ningún momento se tocó el DOM como lo hacemos con jQuery. La idea es sencilla, en Angular JS los templates reflejan el estado de nuestra información, Angular se encarga de estar actualizando cada cambio que hagamos sobre la información de manera automática, a esto es lo que se le denomina "The Angular Way".

Con esta mentalidad las cosas se nos harán más sencillas al iniciar con esta librería que cada vez es más y más popular.

Happy Coding!