Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Tutorial fácil de Angular JS
Actualizado el 09 Marzo, 2016 y leído 5,420 veces
Calificación: 10.00 / 10

Tutorial fácil de Angular JS

Anexsoft

El objetivo de esta entrada es introducirlos al mundo de Angular JS, si bien es cierto la versión 2 ya está disponible como beta, Angular "1" está bastante maduro y podremos hacer grandes proyectos con este.

¿Qué es Angular JS?

Es un framework SPA para javascript que nos permite realizar aplicaciones web de una sola página implementando el patrón MVC.

 

Creando nuestra primera plantilla

Para esto vamos a crear una plantilla HTML base que trabajaremos con Bootstrap 3, pero solo vamos a usar el CSS de este.

<!doctype html>
<html lang="es" ng-app>
<head>
  <meta charset="utf-8">
  <title>Mi primera App Angular</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                
                <h1 class="jumbotron">Mi primera App Angular</h1>
                <!-- Content Body -->
                hola {{ 'eduardo' + '!' }}
            </div>
        </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</body>
</html>

Si logran visualizar en la pantalla de su browser el siguiente texto, "Hello eduardo!", entonces hemos podido crear con éxito nuestra primera APP con Angular JS.

{{ 'eduardo' + '!' }}

Las llaves doble permiten realizar impresiones sobre una expresión dada.

 

Nuestro primer controlador

Vamos a crear un archivo js y lo llamaremos controllers.js, este lo vamos agregar debajo del script de angular.

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="controllers.js"></script>
</body>
</html>

Antes de proseguir, vamos agregar un nombre al atiruto ng-app.

<html ng-app="appDemo">

Este atributo le dirá a nuestro archivo HTML que estamos trabajando un proyecto Angular JS, nuestra app se llama "appDemo".
Nota: todos los atributos de angular comienzan con el prefijo "ng-" seguido por un guión medio (spinal case).

El archivo controllers.js es el siguiente:

var appDemo = angular.module('appDemo', []);

appDemo.controller('InstrumentosListadoCtrl', function ($scope) {
    $scope.model = [
        { marca: 'Fender', nombre: 'Fender Squier Vibe 60', precio: 400},
        { marca: 'Ibanez', nombre: 'Ibanez 350 EX', precio: 450},
        { marca: 'Schecter', nombre: 'Schecter Omen Extreme 6', precio: 500},
    ];
});
  • Lo primero que hacemos es obtener el módulo con el cual vamos a trabajar, en este caso con el nombre de nuestra ng-app que difinimos en la etiqueta html.
    <html ng-app="appDemo">
    
  • Los controladores funcionan como acciones a la vez. En este caso, si quisieramos que nuestro controlador pueda listar, registrar, actualizar y eliminar, tendríamos que definir 4 controladores.
    appDemo.controller('InstrumentoRegistrarCtrl', function($scope){});
    appDemo.controller('InstrumentoActualizarCtrl', function($scope){});
    appDemo.controller('InstrumentoVisualizarCtrl', function($scope){});
    appDemo.controller('InstrumentoEliminarCtrl', function($scope){});
  • El $scope sirve como contenedor donde podemos almacenar valores para capturarlo desde la vista, también podemos especificar valores en la vista para recibirlos desde el controlador y/o declarar eventos en el controlador para interacuar con la vista.
  • Angular JS trabaja usando el patrón inyección de dependencia, entonces para poder usas sus componentes debemos inyectarlo como parámetro de la función. Miren el ejemplo del $scope como es pasado.
    function ($scope){}

    En este caso el $scope ya ha sido especificado previamente, en otros ejemplos vamos a ver más componentes de angular como el objeto $http.

 

Nuestra vista

Por ahora nuestra arquitectura es bastante pobre y todo esta dentro de un mismo archivo HTML, como aprendizaje esta bien, luego veremos el tema de las rutas. Lo que debemos hacer ahora, es especificar alguna de nuestras etiquetas HTML que sea el padre que contedrá a nuestro controlador con el cual vamos a trabajar, ya luego de realizar esto podremos llamar al scope de este.

<div ng-controller="InstrumentosListadoCtrl">
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="m in model">
            <b>{{ m.marca }}</b> {{ m.nombre }} - USD {{ m.precio }}
        </li>
    </ul>                    
</div>

Haciendo uso del atributo ng-repeat podemos iterar los valores que especificamos en nuestro scope, en nuestro la variable model que contiene los instrumentos musicales. El atributo ng-repeat hará repetir el elemento en el cual fue especificado, en nuestro caso el <li>.

 

Registrando más instrumentos

Alteramos nuestro HTML actual y creamos un <li> al inicio para poder registrar nuevos instrumentos, la maquetación es la siguiente.

<ul class="list-group">
    <li class="list-group-item">
        <form class="form-inline" ng-submit="registrar()">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Marca" ng-model="marca">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Nombre" ng-model="nombre">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Precio" ng-model="precio">
            </div>
            <button type="submit" class="btn btn-default">Agregar</button>
        </form>
    </li>
  • Nuestro formulario tiene un nuevo atributo ng-submit (para los demás tipos de eventos es muy similar, usen los de javascript, ng-click, ng-change, etc) el cual responderá al evento submit del formulario y llamará a la función registrar().
  • Cada input tiene un atributo llamado ng-model, este nos va a permitir obtener los valores seteados desde nuestro controlador.

Declaramos la función registrar en nuestro controlador y realizamos una pequeña lógica de negocio para poder agregar nuevos instrumentos.

$scope.registrar = function(){
    if(typeof($scope.marca) !== 'undefined' && typeof($scope.nombre) !== 'undefined' && typeof($scope.precio) !== 'undefined'){
        if(!isNaN(parseFloat($scope.precio))){
            $scope.model.push(
                { marca: $scope.marca, nombre: $scope.nombre, precio: $scope.precio }
            );
            
            // Limpia
            $scope.marca = null;
            $scope.nombre = null;
            $scope.precio = null;
        }
    }
    
    return false;
}
  • Como declaramos los atributos ng-model en el HTML podemos acceder a ellos por el nombre que hayamos especificado mediante la variable $scope.
  • Si los datos ingresados cumplen con nuestra regla de validación el array de instrumentos se incrementará y la vista automaticamente va a ser actualizada. No hace falta llamar a un método actualizar o nada por el estilo ya que, Angular JS detectará los cambios en el modelo.

 

Eliminando instrumentos

Actualizamos nuestro HTML del listado por el siguiente:

<li class="list-group-item" ng-repeat="m in model">
    <button class="btn btn-danger btn-xs pull-right" ng-click="retirar($index)" type="button">Retirar</button>
    <b>{{ m.marca }}</b> {{ m.nombre }} - USD {{ m.precio }}
</li>

Hemos declarado un evento ng-click que recibe un el $index de la iteración actual, lo que vamos hacer es eliminar el indice del instrumento que queremos retirar de nuestro array.

$scope.retirar = function($index){
    $scope.model.splice($index, 1);
}

 

Adjunto los scripts del ejemplo.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.