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 de Angular: Routing + CRUD
Actualizado el 11 Marzo, 2016 y leído 3,111 veces
Calificación: 10.00 / 10

Tutorial de Angular: Routing + CRUD

Anexsoft

Siguiendo con nuestro tutorial acelerado, achorado (jerga peruana) y práctico de Angular JS, vamos a implentar las rutas, ya que con esta podemos implementar una APP más robusta definida como su nombre lo dice por rutas.

 

¿Qué vamos hacer?

Vamos a desarrollar un pequeño CRUD para una tienda de instrumentos. La información de los instrumentos lo vamos a mentener en una Array Global, así que todo el CRUD va a correr sobre dicho Array el cual le vamos hacer update, insert, delete y select.

 

¿Qué son las rutas?

Las rutas es un concepto en general, normalmente se caracteriza por la definición de una URL en nuestro aplicativo. Ejm users/get/1, users/getAll. Cuando nuestro proyecto es grande no podemos distribuir todo en una sola página HTML, entonces lo que podemos hacer es trabajar como cualquier estructura MVC y cargar vistas dinámicas (obviamente todo va a correr en la misma página principal) y estas serán cargadas en base a la ruta  o URL que nos encontremos según nosotros hayamos especificado.

 

¿Cómo implemento las rutas?

Las rutas son un módulo por separado para Angular JS, las podemos descargar desde el siguiente enlace, en este tambíen podremos encontrar otros componentes oficiales. Hoy nos vamos a enfocar solamente en las rutas.

Hemos cambiado un poco el proyecto, este ha quedado de la siguiente manera:

  • partials/, está carpeta contedrá a nuestras vistas que serán cargadas desde el index.html según la ruta en la que estemos navegando actualmente.
    • crud.html
    • listado.html
  • app.js, es nuestro archivo base de configuración y en este vamos a definir las rutas de nuestro proyecto.
  • controllers.js, en este archivo vamos a definir los controladores de nuestro ejemplo.
  • index.html

index.html

Este debe quedar de la siguiente manera:

<!doctype html>
<html lang="es" ng-app="appDemo">
<head>
    <meta charset="utf-8">
    <title>Mi tienda de música</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 tienda de música</h1>

                <!-- Content body -->
                <ng-view />

            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.0/angular-route.min.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
</body>

</html>

<ng-view />

Esta etiqueta nos va a a permitir cargar las vistas en base a nuestra ruta actual.

 

app.js

Vamos a definir el nombre de nuestro proyecto, cargar la dependencia de ngRoute, nuestros controladores y a crear el ruteo o routing.

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

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/listado.html',
        controller: 'InstrumentosListadoCtrl'
      }).
      when('/crud/:id?', {
        templateUrl: 'partials/crud.html',
        controller: 'InstrumentosCrudCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);
  • El nombre de nuestro módulo principal o llamenlo nombre de nuestro proyecto debe ser igual al que especificaron en la etiqueta ng-app, en nuestro caso appDemo.
  • Luego cargas la dependencia de ngRoute para poder trabajar con las rutas en Angular JS.
  • Después registramos un controlador, el cual vamos a acceder posteriormente para agregar los controladores. Digamos que este es el nombre del controlador base.
  • Finalmente asignamos las rutas y a que vista o template pertenece.

Routing

  • Definir el ruteo es bastante sencillo, solo debemos especificar la ruta de nuestro archivo html y el controlador al que esta amarrado.
  • Para enviar un parámetro hacemos lo siguiente: /crud/:id, siendo :id el parámetro. Si queremos que sea opcional /crud/:id?
  • Lo especificado en otherwise es cuando la ruta actual de navegación no coincide con ninguna de las que hemos especificado. En este nos va a redireccionar a la ruta que especifiquemos.

 

controllers.js

En este script hemos creado 2 controladores, uno para el listado y el otro para el actualizar/registrar.

var instrumentoControllers = angular.module('instrumentoControllers', []),
    instrumentos = [
        {
            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
        },
    ];

instrumentoControllers.controller('InstrumentosListadoCtrl', function ($scope) {
    $scope.model = instrumentos;

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

instrumentoControllers.controller('InstrumentosCrudCtrl', ['$scope', '$routeParams', '$location', function ($scope, $routeParams, $location) {
    var id = $routeParams.id,
        existe = typeof (id) !== 'undefined',
        model = existe ? instrumentos[id] : null;

    $scope.titulo = existe ? model.nombre : 'Nuevo registro';

    if (existe) {
        $scope.marca = model.marca;
        $scope.nombre = model.nombre;
        $scope.precio = model.precio;
    }

    $scope.guardar = function () {
        if (typeof ($scope.marca) !== 'undefined' && typeof ($scope.nombre) !== 'undefined' && typeof ($scope.precio) !== 'undefined') {
            if (!isNaN(parseFloat($scope.precio))) {
                var model = {
                    marca: $scope.marca,
                    nombre: $scope.nombre,
                    precio: $scope.precio
                };

                if (existe) instrumentos[id] = model;
                else instrumentos.push(model);

                $location.path('/');
            }
        }

        return false;
    }
}]);

 

Nuestra variable global "instrumentos"

Si se dieron cuenta existe una variable global que ha sido inicializada con data dura que contiene algunos instrumentos musicales. Esta fue declarada para poder manipularla desde otros controladores.Hay un detalle importante, si refrescan la página por un F5 van a perder la información guardada en la variable.

var instrumentoControllers = angular.module('instrumentoControllers', []),
    instrumentos = [
        {
            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
        },
    ];

 

InstrumentosCrudCtrl

Este a diferencia del otro controlador esta recibiendo 2 módulos adicionales, $routeParams y $location los cuales son inyectados. El primero permite recibir los parámetros enviados a nuestra ruta y el segundo nos permite hacer redireciones.

instrumentoControllers.controller('InstrumentosCrudCtrl', ['$scope', '$routeParams', '$location', function ($scope, $routeParams, $location) {}])

 

 

Nuestras vistas

Como mencioné las vistas son cargadas dinamicamente dependiendo de la ruta en la que estes navegando actualmente. Estas son las siguientes:

listado.html

<a href="#/crud" class="btn btn-default btn-block">
    Registrar nuevo producto
</a>

<hr />

<ul class="list-group">
    <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>
        <a href="#/crud/{{ $index }}" class="btn btn-default btn-xs pull-right" style="margin-right:10px;">Editar</a>
        <b>{{ m.marca }}</b> {{ m.nombre }} - USD {{ m.precio }}
    </li>
</ul>

crud.html

<h2 class="page-header">
    {{ titulo }}
</h2>

<form ng-submit="guardar()">
    <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>
    
    <a href="#/" class="btn btn-danger">Cancelar</a>
    <button type="submit" class="btn btn-primary">Guardar</button>
</form>

 

Adjunto el ejemplo para que lo pueda descargar y poner en práctica. Para poder ayudarles ante cualquier duda que tengan, dejen un comentario en la entrada para responderles lo más pronto posible.

¡Adquiera ya!

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

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

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

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.