Módulo 5

leamarty · Dec 27, 2015 · 9d0c5f4 · 9d0c5f4
1 parent 324a5d7
commit 9d0c5f4
Show file tree

Hide file tree

Showing 13 changed files with 167 additions and 0 deletions.
diff --git a/M4/Módulo 4.pptx b/M4/Módulo 4.pptx
diff --git a/M5/Módulo 5.pptx b/M5/Módulo 5.pptx
diff --git a/M5/practica/bower.json b/M5/practica/bower.json
@@ -0,0 +1,28 @@
+{
+  "name": "modulo 5",
+  "version": "0.0.5",
+  "homepage": "https://github.com/leamarty/cursoweb",
+  "description": "Agregamos AngularJS al frontend",
+  "main": "index.html",
+  "keywords": [
+    "curso"
+  ],
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "bower_components"
+  ],
+  "dependencies": {
+    "angular": "~1.4.8",
+    "angular-route": "~1.4.8",
+    "angular-ui-select2": "~0.0.5",
+    "bootstrap": "~3.3.5",
+    "jquery": "~2.1.4",
+    "restangular": "~1.5.1",
+    "select2": "~3.5.3",
+    "underscore": "~1.8.3"
+  },
+  "resolutions": {
+    "select2": "~3.5.3"
+  }
+}
diff --git a/M5/practica/estilos.css b/M5/practica/estilos.css
@@ -0,0 +1,10 @@
+#boton-buscar {
+	padding: 13px 15px;
+}
+.alert {
+	display: none;
+	margin-bottom: 0 !important;
+}
+.bold {
+	font-weight: bold;
+}
diff --git a/M5/practica/html/cliente/listado.html b/M5/practica/html/cliente/listado.html
@@ -0,0 +1,9 @@
+<table>
+    <thead></thead>
+    <tbody>
+        <tr ng-repeat="cliente in clientes">
+            <td>{{ cliente.id }}</td>
+            <td>{{ cliente.razon_social }}</td>
+        </tr>
+    </tbody>
+</table>
diff --git a/M5/practica/html/cliente/nuevo.html b/M5/practica/html/cliente/nuevo.html
@@ -0,0 +1 @@
+View de nuevo cliente
diff --git a/M5/practica/index.html b/M5/practica/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="cursoweb">
+<head>
+    <title>La web del curso</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link type="text/css" rel="stylesheet" href="estilos.css"/>
+    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+    <!-- Vendor -->
+    <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="bower_components/angular/angular.js"></script>
+    <script src="bower_components/angular-route/angular-route.min.js"></script>
+    <script src="bower_components/select2/select2.min.js"></script>
+    <script src="bower_components/angular-ui-select2/src/select2.js"></script>
+    <script src="bower_components/underscore/underscore-min.js"></script>
+    <script src="bower_components/restangular/dist/restangular.min.js"></script>
+    <!-- App -->
+    <script src="js/angular-app.js"></script>
+    <script src="js/controllers/main-controller.js"></script>
+    <script src="js/routes.js"></script>
+    <script src="js/directivas/ocultar.js"></script>
+    <!-- Controllers -->
+    <script src="js/controllers/cliente/listado.js"></script>
+    <script src="js/controllers/cliente/nuevo.js"></script>
+</head>
+<body>
+    <div class="container" ng-controller="MainController">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="jumbotron text-center">
+                    <h1>Telapong S.A.</h1>
+                    <p>Listado de clientes oficiales</p>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <nav class="navbar navbar-default">
+                    <ul class="nav navbar-nav">
+                        <li id="menu-listado" class="{{ menuActivo == 'cliente_listado' ? 'active' : '' }}">
+                            <a href="#/cliente/listado">Listado</a>
+                        </li>
+                        <li id="menu-nuevo" class="{{ menuActivo == 'cliente_nuevo' ? 'active' : '' }}">
+                            <a href="#/cliente/nuevo">Nuevo</a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+        <div ng-view></div>
+    </div>
+</body>
+</html>
diff --git a/M5/practica/js/angular-app.js b/M5/practica/js/angular-app.js
@@ -0,0 +1,6 @@
+var cursoweb = angular.module('cursoweb', [
+    'ngRoute',
+    'ui.select2',
+    'restangular'
+]);
+
diff --git a/M5/practica/js/controllers/cliente/listado.js b/M5/practica/js/controllers/cliente/listado.js
@@ -0,0 +1,7 @@
+cursoweb.controller('ClienteListado', function ($scope) {
+    $scope.$parent.menuActivo = 'cliente_listado';
+
+    $scope.clientes = [
+        {id: 5, razon_social: 'hola'}
+    ]
+});
diff --git a/M5/practica/js/controllers/cliente/nuevo.js b/M5/practica/js/controllers/cliente/nuevo.js
@@ -0,0 +1,3 @@
+cursoweb.controller('ClienteNuevo', function ($scope, Nombre) {
+    $scope.$parent.menuActivo = 'cliente_nuevo';
+});
diff --git a/M5/practica/js/controllers/main-controller.js b/M5/practica/js/controllers/main-controller.js
@@ -0,0 +1,20 @@
+cursoweb.controller('MainController', function ($scope, $timeout) {
+
+    $scope.menuActivo = '';
+
+    $scope.clientes = [];
+
+    $scope.buscar = function () {
+        $scope.clientes.push({
+            id: $scope.clientes.length + 1,
+            nombre: 'Pepe',
+            edad: 5
+        });
+    };
+
+    $scope.borrar = function (cliente, index) {
+        $scope.clientes.splice(index, 1);
+        alert('Ya borre el cliente ' + cliente.nombre);
+    };
+
+});
diff --git a/M5/practica/js/directivas/ocultar.js b/M5/practica/js/directivas/ocultar.js
@@ -0,0 +1,10 @@
+cursoweb.directive('ocultar', function () {
+    return {
+        restrict: 'A',
+        link: function (scope, element, attrs) {
+            setTimeout(function () {
+                element.hide();
+            }, (attrs.ocultarTiempo || 2) * 1000);
+        }
+    };
+});
diff --git a/M5/practica/js/routes.js b/M5/practica/js/routes.js
@@ -0,0 +1,20 @@
+cursoweb.config(function ($routeProvider) {
+    $routeProvider
+        .when('/cliente/listado', {
+            templateUrl: 'html/cliente/listado.html',
+            controller: 'ClienteListado'
+        })
+        .when('/cliente/nuevo', {
+            templateUrl: 'html/cliente/nuevo.html',
+            controller: 'ClienteNuevo'
+        })
+        /*
+        .when('/cliente/:id', {
+            templateUrl: '',
+            controller: ''
+        })
+        */
+        .otherwise({
+            redirectTo: '/cliente/listado'
+        })
+});