Crea una aplicación AngularJS con Python EVE: parte 2

() translation by (you can also view the original English article)

En la parte anterior de esta serie, implementamos el proceso de inicio de sesión y registro usando la API de Eve que creamos en la primera parte de la serie. Usamos Node.js y AngularJS para crear y ejecutar nuestra aplicación.

En este tutorial, llevaremos nuestro desarrollo de aplicaciones al siguiente nivel utilizando las API Add, Edit and Delete para crear elementos en la página de inicio del usuario.

Empezando

Para comenzar, clone el código fuente del tutorial anterior de GitHub.

1	git clone https://github.com/jay3dec/AngularEveApp_Part1.git

Una vez hecho esto, navegue a AngularEveApp_Part1 e instale las dependencias.

1	npm install
2	bower install

Asegúrese de que se estén ejecutando las API REST de Python Eve. Inicie el servidor de la aplicación.

1	node app.js

Apunte su navegador a http://localhost:3000 y debería tener la aplicación ejecutándose.

Crear inicio de usuario

Después de que el usuario inicie sesión con éxito, llevaremos al usuario a la página de inicio. Entonces, comencemos creando userHome.html. Navegue a la carpeta pública public y cree una nueva carpeta llamada userHome. Inside userHome crea archivos llamados userHome.html y userHome.js. Abra userHome.html y agregue el siguiente código HTML:

<div class="container">
    <div class="header">
        <nav>
            <ul class="nav nav-pills pull-right">
                <li role="presentation" class="active"><a href="#userHome">Home</a></li>
                <li role="presentation"><a href="#addItem">Add</a></li>
                <li role="presentation"><a href="#">Logout</a></li>
            </ul>
        </nav>
        <h3 class="text-muted">Home</h3>
    </div>
    <h1>Data will be displayed here !!</h1>

    <footer class="footer">
        <p>&copy; Company 2015</p>
    </footer>

</div>

Inside userHome.js define el módulo userHome y su plantilla y controlador. Por lo tanto, abra userHome.js y agregue el siguiente código:

'use strict';

angular.module('userHome', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/userHome', {
        templateUrl: '../userHome/userHome.html',
        controller: 'UserHomeCtrl'
    });
}])

.controller('UserHomeCtrl', ['$scope', function($scope) {

}]);

Agregue una referencia a userHome.js en la página index.html.

1	<script src="userHome/userHome.js"></script>

Inyecte el módulo userHome en la aplicación myApp en index.js.

angular.module('myApp', [
  'ngRoute',
  'home',
  'signin',
  'userHome'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/home'});
}]);

En la función signIn en signin.js, en la devolución de llamada exitosa de la solicitud de $http, redirija a la vista /userHome.

1	$location.path('/userHome');

Guarde los cambios anteriores y reinicie el servidor de nodos. Apunte su navegador a http://localhost:3000 e inicie sesión con un nombre de usuario y contraseña válidos. Una vez que haya iniciado sesión correctamente, debería poder ver la página de inicio del usuario con la vista predeterminada.

Crear una página Agregar tarea

Agreguemos una vista para permitir al usuario agregar elementos. Navegue a la carpeta pública public y cree una carpeta llamada addItem. Dentro de la carpeta addItem, cree dos archivos llamados addItem.html y addItem.js. Abra addItem.html y agregue el siguiente código HTML:

<div class="container">
    <div class="header">
        <nav>
            <ul class="nav nav-pills pull-right">
                <li role="presentation"><a href="#userHome">Home</a></li>
                <li role="presentation" class="active"><a href="#addItem">Add</a></li>
                <li role="presentation"><a href="#">Logout</a></li>
            </ul>
        </nav>
        <h3 class="text-muted">Home</h3>
    </div>


    <div class="row">

        <div class="col-md-8 col-sm-8 col-xs-8">
            <input id="txtTitle" name="txtTitle" type="text" ng-model="title" placeholder="Enter Task" class="form-control input-md">
        </div>

        <div class="col-md-4 col-sm-4 col-xs-4">
            <input id="singlebutton" name="singlebutton" class="btn btn-primary" ng-click="addItem(title)" value="Add Task" />
        </div>


    </div>


    <footer class="footer">
        <p>&copy; Company 2015</p>
    </footer>

</div>

A continuación, abra addItem.js y agregue el siguiente código para definir la ruta, la plantilla y el controlador.

'use strict';

angular.module('addItem', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/addItem', {
    templateUrl: '../addItem/addItem.html',
    controller: 'AddItemCtrl'
  });
}])

.controller('AddItemCtrl', [function() {

}]);

Abra userHome.html y modifique la href del enlace Agregar para señalar la ruta correcta.

1	<li role="presentation" ><a href="#addItem">Add</a></li>

Agregue una referencia a addItem.js en index.html.

1	<script src="addItem/addItem.js"></script>

Inyecte el módulo addItem en myApp en index.js.

angular.module('myApp', [
  'ngRoute',
  'home',
  'signin',
  'userHome',
  'addItem'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/home'});
}]);

Guarde los siguientes cambios y reinicie el servidor de nodos. Una vez que haya iniciado sesión, haga clic en el enlace Agregar Add y podrá ver la página Agregar elemento.

Agregar elementos usando la API de Eve

Para agregar elementos, necesitaremos los authdata base64. Por lo tanto, en el inicio de sesión exitoso mantendremos el nombre de usuario y los datos de autenticación dentro de un servicio AngularJS. Navegue a la carpeta public y cree una carpeta llamada service. Dentro de la carpeta service crea un archivo llamado service.js. Vamos a crear un nuevo módulo de servicio llamado myAppService.

1	angular.module('myAppService',[])

Agregue un nuevo servicio al módulo myAppService.

1	.service('CommonProp', function() {
2
3	});

Dentro del servicio CommonProp, definiremos algunas funciones para obtener y establecer el username y authData.

.service('CommonProp', function() {
    var user = '';
    var userAuth = '';

    return {
        getUser: function() {
            return user;
        },
        setUser: function(value) {
            user = value;
        },
        getUserAuth: function() {
            return userAuth;
        },
        setUserAuth: function(value) {
            userAuth = value;
        }
    };
});

Incluye una referencia al servicio en index.html.

1	<script src="service/service.js"></script>

A continuación, inserte el módulo myAppService creado anteriormente en el módulo signin.

1	angular.module('signin', ['base64','ngRoute','myAppService'])

Inyecte el servicio CommonProp requerido en el controlador SignInCtrl.

1	.controller('SignInCtrl',['$scope','$http','$base64','$window','$location','CommonProp',function($scope,$http,$base64,$window,$location,CommonProp)

En la devolución de llamada con éxito de $http, agregue el siguiente código para mantener el nombre de usuario y authData en el servicio.

1	CommonProp.setUser(username);
2	CommonProp.setUserAuth(authdata);

A continuación, abra addItem.js e inserte el módulo myAppService.

1	angular.module('addItem', ['ngRoute','myAppService'])

Inyecte el servicio CommonProp en AddItemCtrl.

1	.controller('AddItemCtrl', ['$scope','CommonProp','$http','$location',function($scope,CommonProp,$http,$location)

Abra addItem.html y agregue el ngModel y ngClick al cuadro de texto de la tarea y al botón Add task, respectivamente.

<div class="col-md-8 col-sm-8 col-xs-8">
  <input id="txtTitle" name="txtTitle" type="text" ng-model="title" placeholder="Enter Task" class="form-control input-md">
</div>

<div class="col-md-4 col-sm-4 col-xs-4">
  <input id="singlebutton" name="singlebutton" class="btn btn-primary" ng-click="addItem(title)" value="Add Task" />
</div>

Dentro de addItem.js se define una nueva función llamada addItem.

1	$scope.addItem = function(title){
2	// Add item logic will be here !
3	}

Dentro de la función addItem, hagamos nuestra llamada de $http a la API REST de Python Eve. Primero, necesitaremos obtener el nombre de usuario y los datos de autenticación del usuario del servicio.

1	var auth = CommonProp.getUserAuth();
2
3	var user = CommonProp.getUser();

Establezcamos los encabezados necesarios para hacer la llamada API.

$http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"};
$http.defaults.headers.common = {"Access-Control-Expose-Headers": "Origin, X-Requested-With, Content-Type, Accept"};
$http.defaults.headers.common["Cache-Control"] = "no-cache";
$http.defaults.headers.common.Pragma = "no-cache";
$http.defaults.headers.common['Authorization'] = 'Basic '+auth;

Una vez que se hayan establecido los encabezados, usemos $http para hacer una llamada a la API para agregar el elemento.

$http({
    method: 'POST',
    cache: false,
    url: 'http://127.0.0.1:5000/item',
    data: {
        name: title,
        username: user
    }
}).
success(function(data, status, headers, config) {
    $location.path('/userHome');
}).
error(function(data, status, headers, config) {
    console.log(data, status);
});

Guarde los cambios y reinicie el servidor de nodos. Apunte su navegador a http://localhost:3000 e inicie sesión. Haga clic en el enlace Add, ingrese una tarea y haga clic en Add Task. En llamadas API exitosas, debe ser redirigido a la página de inicio del usuario.

Obtener tareas de la API de Eve

Cuando se carga la página de inicio del usuario, realizaremos una llamada de API para recuperar los elementos agregados por el usuario en particular. Para realizar la llamada a la API necesitaremos el nombre de usuario username y el authData. Por lo tanto, inyecte el módulo myAppService en el módulo userHome.

1	angular.module('userHome', ['ngRoute','myAppService'])

Inyecte el servicio CommonProp en UserHomeCtrl.

1	.controller('UserHomeCtrl',['$scope','CommonProp','$http','$location', function($scope,CommonProp,$http,$location)

A continuación, busquemos el nombre de usuario username y authData de CommonProp.

1	var auth = CommonProp.getUserAuth();
2
3	var user = CommonProp.getUser();

Establezca los encabezados necesarios para realizar la llamada API.

$http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"};
$http.defaults.headers.common = {"Access-Control-Expose-Headers": "Origin, X-Requested-With, Content-Type, Accept"};
$http.defaults.headers.common["Cache-Control"] = "no-cache";
$http.defaults.headers.common.Pragma = "no-cache";
$http.defaults.headers.common['Authorization'] = 'Basic '+auth;

Para obtener las tareas creadas por un usuario en particular, haremos una solicitud $http GET a http://127.0.0.1:5000/item?where={"username":"'+user+'"}'.

$http({
    method: 'GET',
    cache: false,
    url: 'http://127.0.0.1:5000/item?where={"username":"' + user + '"}'
}).
success(function(data, status, headers, config) {
    console.log(data);
}).
error(function(data, status, headers, config) {
    console.log(data, status);
});

En una llamada API exitosa, analizaremos los datos devueltos y estableceremos los datos en una variable $scope.

Primero, creemos una variable de tareas:

1	$scope.tasks = [];

Ahora, analicemos los datos devueltos y completemos la variable tasks.

for (var i = 0; i < data._items.length; i++) {
    $scope.tasks.push({
        'title': data._items[i].name
    });
}

En userHome.html, iteraremos sobre la variable de tareas y presentaremos las tareas recuperadas para un usuario en particular. Haremos uso de la directiva ngRepeat para iterar sobre la variable de tareas.

<div class="list-group" ng-repeat="task in tasks">
    <a href="#" onclick="return false;" class="list-group-item active">

        <p class="list-group-item-text">{{task.title}}</p>

    </a>
</div>

Guarde los cambios anteriores y reinicie el servidor. Apunte su navegador a http://localhost:3000 e inicie sesión. Cuando inicie sesión con éxito, podrá ver las tareas agregadas por el usuario que inició sesión.

Edición y eliminación de un elemento de tarea

Edición de tareas

Agreguemos un botón de edición y eliminación a la lista de tareas en la página de inicio del usuario, para permitir la edición y eliminación de las tareas, respectivamente. Abra userHome.html y agregue el siguiente código HTML al div .list-group.

<span class="pull-right">
     <button class="btn btn-xs btn-info" ng-click="editTask(task.title,task.id,task.tag)" data-target="#editModal">EDIT</button>
     
     <button class="btn btn-xs btn-warning" ng-click="confirmDelete(task.id,task.tag)" data-target="#deleteModal" >DELETE</button>
</span>

Utilizaremos modales de arranque para mostrar la tarea que se va a editar, por lo tanto, incluya jQuery y Bootstrap en index.html.

1	<script src="https://code.jquery.com/jquery-2.0.1.min.js"></script>
2
3	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Agregue el siguiente código HTML a userHome.html para la ventana emergente modal para editar.

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">Update Task</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Title:</label>
                        <input type="text" class="form-control" ng-model="edit.task" id="recipient-name">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" ng-click="update()">Update</button>
            </div>
        </div>
    </div>
</div>

A continuación, abra userHome.js y cree una nueva función llamada editTask que se invocará al hacer clic en el botón editar.

$scope.edit = {};

$scope.editTask = function(title,id,tag){
      $scope.edit.task = title;
		$scope.edit.id = id;
		$scope.edit.tag = tag;
		$('#editModal').modal('show');
}

Como se ve en el código anterior, hemos asignado el title, id y tag del registro particular a la variable $scope.edit.task. Si el usuario elige actualizar el registro en particular, usaremos los datos de $scope.edit para la actualización.

Guarde todos los cambios anteriores y reinicie el servidor. Una vez que haya iniciado sesión correctamente, haga clic en el botón Editar para editar una tarea, y debe tener la ventana emergente modal.

Anteriormente, realizamos una solicitud de $http desde el UserHomeCtrl. Vamos a convertir eso en una función adecuada, ya que tendremos que llamar a eso en el futuro. Aquí está la función getAllTask.

var getAllTask = function(){
    	$scope.tasks = [];
		$http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"};
	    $http.defaults.headers.common = {"Access-Control-Expose-Headers": "Origin, X-Requested-With, Content-Type, Accept"};
		$http.defaults.headers.common["Cache-Control"] = "no-cache";
	    $http.defaults.headers.common.Pragma = "no-cache";
	    $http.defaults.headers.common['Authorization'] = 'Basic '+auth;
	    
		$http({method: 'GET',cache: false, url: 'http://127.0.0.1:5000/item?where={"username":"'+user+'"}'}).
		    success(function(data, status, headers, config) {
		
			for(var i=0;i<data._items.length;i++){
				$scope.tasks.push({'title': data._items[i].name,'id':data._items[i]._id,'tag':data._items[i]._etag});
			}
			
		    }).
		    error(function(data, status, headers, config) {
		        console.log(data,status);
		    });
}

getAllTask();	

A continuación, cree una función llamada update in userHome.js a la que llamaremos para actualizar la tarea editada. Dentro de la función de actualización haremos una solicitud de PATCH a http://127.0.0.1:5000/item/(item-id) con los datos que se actualizarán. La API de Eve espera que se pase un encabezado tag id cuando se realiza una solicitud de actualización, por lo que también le pasaremos el tag id en el encabezado de la solicitud. Dentro de la función de actualización, primero declararemos los encabezados necesarios para la solicitud $http.

$http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"};
$http.defaults.headers.common = {"Access-Control-Expose-Headers": "Origin, X-Requested-With, Content-Type, Accept"};
$http.defaults.headers.common["Cache-Control"] = "no-cache";
$http.defaults.headers.common.Pragma = "no-cache";
$http.defaults.headers.common['Authorization'] = 'Basic '+auth;
$http.defaults.headers.common['If-Match'] = $scope.edit.tag;

Una vez que se hayan definido los encabezados, haremos la solicitud PATCH $http.

$http({
    method: 'PATCH',
    cache: false,
    url: 'http://127.0.0.1:5000/item/' + $scope.edit.id,
    data: {
        name: $scope.edit.task
    }
}).
success(function(data, status, headers, config) {
    $('#editModal').modal('hide');
    getAllTask();
}).
error(function(data, status, headers, config) {
    console.log(data, status);
});

Como se ve en el código anterior, en la actualización exitosa cerramos el modo de edición y volvimos a cargar todas las tareas relacionadas con el usuario en particular.

Guarde todos los cambios y reinicie el servidor. Apunte su navegador a http://localhost:3000 e inicie sesión con credenciales válidas. Una vez que haya iniciado sesión, intente editar una tarea en particular haciendo clic en el botón Editar.

Eliminando Tareas

Antes de eliminar una tarea, debemos mostrar una ventana emergente de confirmación. Por lo tanto, en userHome.html agregue el siguiente código HTML para la ventana emergente de confirmación de eliminación.

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="text-align:center;">
                <h4 class="modal-title" style="color:red;" id="deleteModalLabel">You are about to Delete this Task !!</h4>
            </div>
 
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" ng-click="deleteTask()">Delete</button>
            </div>
        </div>
    </div>
</div>

A continuación, debemos definir una función llamada confirmDelete que ya hemos adjuntado al botón Eliminar utilizando la directiva ngClick. Dentro de la función confirmDelete guardaremos la identificación de la tarea y el TAG que se requerirán cuando llamemos a Delete API. Aquí está la función confirmDelete:

$scope.deletion = {};

$scope.confirmDelete = function(id, tag) {
    $scope.deletion.id = id;
    $scope.deletion.tag = tag;
    $('#deleteModal').modal('show');
}

Guarde los cambios y reinicie el servidor. Inicie sesión en la aplicación y, cuando se encuentre en la página de inicio del usuario, haga clic en el botón Eliminar Delete y podrá ver la ventana emergente de confirmación de eliminación.

A continuación, definiremos una función más para llevar a cabo la eliminación de la tarea. Ya hemos adjuntado una función llamada deleteTask al botón Eliminar utilizando la directiva ngClick. Ahora, definamos la función deleteTask dentro de userHome.js.

De forma similar a la función de actualización, llamar a la solicitud de eliminación en la API de Eve requiere que la ID de etiqueta TAG ID se establezca en el encabezado. Entonces, primero configure los encabezados requeridos como se muestra:

$http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"};
$http.defaults.headers.common = {"Access-Control-Expose-Headers": "Origin, X-Requested-With, Content-Type, Accept"};
$http.defaults.headers.common["Cache-Control"] = "no-cache";
$http.defaults.headers.common.Pragma = "no-cache";
$http.defaults.headers.common['Authorization'] = 'Basic '+auth;
$http.defaults.headers.common['If-Match'] = $scope.deletion.tag;

A continuación, realizaremos una solicitud DELETE a la API REST http://127.0.0.1:5000/item/(itemId).

$http({
    method: 'DELETE',
    cache: false,
    url: 'http://127.0.0.1:5000/item/' + $scope.deletion.id
}).
success(function(data, status, headers, config) {
    $('#deleteModal').modal('hide');
    getAllTask();
}).
error(function(data, status, headers, config) {
    console.log(data, status);
});

Como se ve en el código anterior, en la devolución de llamada de solicitud DELETE exitosa, ocultaremos la ventana emergente modal de confirmación de eliminación y volveremos a cargar las entradas llamando al método getAllTask. Aquí está la función deleteTask completa:

$scope.deleteTask = function() {
    $http.defaults.headers.common = {
        "Access-Control-Request-Headers": "accept, origin, authorization"
    };
    $http.defaults.headers.common = {
        "Access-Control-Expose-Headers": "Origin, X-Requested-With, Content-Type, Accept"
    };
    $http.defaults.headers.common["Cache-Control"] = "no-cache";
    $http.defaults.headers.common.Pragma = "no-cache";
    $http.defaults.headers.common['Authorization'] = 'Basic ' + auth;
    $http.defaults.headers.common['If-Match'] = $scope.deletion.tag;

    $http({
        method: 'DELETE',
        cache: false,
        url: 'http://127.0.0.1:5000/item/' + $scope.deletion.id
    }).
    success(function(data, status, headers, config) {
        $('#deleteModal').modal('hide');
        getAllTask();
    }).
    error(function(data, status, headers, config) {
        console.log(data, status);
    });
}

Guarde los cambios anteriores y reinicie el servidor. Apunte su navegador a http://localhost:3000 e inicie sesión. Cuando esté en la página de inicio del usuario, haga clic en el botón Eliminar Delete para eliminar algunas tareas y debería estar funcionando.

Conclusión

En esta parte de la serie, vimos cómo usar las API REST de Python Eve creadas en la primera parte de la serie en una aplicación AngularJS. Implementamos algunas operaciones CRUD simples desde nuestra aplicación AngularJS utilizando las API de Eve REST. Espero que este tutorial sirva como base para crear algo increíble.

Siéntase libre de publicar sus comentarios, correcciones o preguntas a continuación. Si encontraste útil este tutorial, visita mi página de instructor para ver otros tutoriales.

El código fuente de este tutorial está disponible en GitHub.