Tutorial #26 del curso de angular JS, finalizamos el curso con un pequeño proyecto CRUD, en este tutorial crearemos la interfaz de usuario empleando Bootstrap3 y HTML5.
index.php
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AngularJS PHP CRUD</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> </head> <body ng-app="crud"> <div ng-controller="crudController"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1><i class="fab fa-angular"></i> AngularJS PHP CRUD</h1> </div> </div> <div class="row"> <div class="col-md-12"> <div class="pull-right"> <button class="btn btn-success" data-toggle="modal" data-target="#add_new_modal"> <i class="fas fa-plus-circle"></i> Nuevo Producto </button> </div> </div> </div> <div class="row"> <div class="col-md-12"> <h3><i class="fas fa-boxes"></i> Productos:</h3> <table class="table table-bordered table-responsive table-striped"> <tr> <th>No</th> <th>Nombre</th> <th>Descripción</th> <th>Acción</th> </tr> <tr> <td></td> <td></td> <td></td> <td> <button class="btn btn-primary btn-xs"><i class="fas fa-pencil-alt"></i> Editar</button> <button class="btn btn-danger btn-xs"><i class="fas fa-trash"></i> Eliminar</button> </td> </tr> </table> </div> </div> <!-- Bootstrap Modals --> <div class="modal fade" id="add_new_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Nuevo Producto</h4> </div> <div class="modal-body"> <ul class="alert alert-danger"> </ul> <div class="form-group"> <label for="name">Nombre</label> <input type="text" id="name" class="form-control"/> </div> <div class="form-group"> <label for="description">Descripción</label> <textarea class="form-control" name="description"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button> <button type="button" class="btn btn-primary">Guardar Producto</button> </div> </div> </div> </div> <!-- // Modal --> <!-- Modal - Update --> <div class="modal fade" id="modal_update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Editar Producto</h4> </div> <div class="modal-body"> <ul class="alert alert-danger"> </ul> <div class="form-group"> <label for="name">Nombre</label> <input type="text" id="name" class="form-control"/> </div> <div class="form-group"> <label for="description">Descripción</label> <textarea class="form-control" name="description"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button> <button type="button" class="btn btn-primary">Guardar Cambios</button> </div> </div> </div> </div> <!-- // Modal --> </div> </div> <script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="lib/angular.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> </body> </html>