() translation by (you can also view the original English article)
En el tutorial anterior, implementamos la funcionalidad de registro y también vimos como usar los servicios AngularJS para compartir datos entre controladores. En esta parte de la serie de tutoriales, estaremos creando una interfaz que un usuario que haya iniciado sesión cree una publicación en el blog.
Empezando
Empecemos por clonar la tercera parte del tutorial desde GitHub.
1 |
git clone https://github.com/jay3dec/AngularJS_Firebase_Part3.git |
Despues de clonar el código fuente, navega al directorio del proyecto e instala las dependencias necesarias.
1 |
cd AngularJS_Firebase_Part3 |
2 |
npm install |
Una vez que las dependencias se hayan instalado, arranca el servidor.
1 |
npm start |
Apunta tu navegador a http://localhost:8000/app/#/home y ya deberias tener la aplicación corriendo.
Creando la Página de Agregar Publicación
Necesitamos una página con la cual el usuario pueda crear y publicar un anuncio en el blog. Agregemos las plantillas y archivos requeridos para crear la página Agregar Publicación.
Navega al directorio AngularJS_Firebase_Part3/app y crea una carpeta llamada addPost. Dentro de addPost crea un archivo HTML llamado addPost.html y addPost.js. En addPost.html agrega el siguiente código HTML:
1 |
<html lang="en"> |
2 |
|
3 |
<head>
|
4 |
|
5 |
<title></title>
|
6 |
|
7 |
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> |
8 |
|
9 |
<link href="blog.css" rel="stylesheet"> |
10 |
|
11 |
|
12 |
</head>
|
13 |
|
14 |
<body>
|
15 |
|
16 |
<div class="blog-masthead"> |
17 |
<div class="container"> |
18 |
<nav class="blog-nav"> |
19 |
<a class="blog-nav-item " href="#">Home</a> |
20 |
<a class="blog-nav-item active" href="addPost.html">Add Post</a> |
21 |
|
22 |
</nav>
|
23 |
</div>
|
24 |
</div>
|
25 |
|
26 |
<div class="container"> |
27 |
|
28 |
<form class="form-horizontal"> |
29 |
<fieldset>
|
30 |
|
31 |
<!-- Form Name -->
|
32 |
<legend>Create Post</legend> |
33 |
|
34 |
<!-- Text input-->
|
35 |
<div class="form-group"> |
36 |
<label class="col-md-4 control-label" for="txtTitle">Title</label> |
37 |
<div class="col-md-4"> |
38 |
<input id="txtTitle" name="txtTitle" type="text" placeholder="placeholder" class="form-control input-md"> |
39 |
|
40 |
</div>
|
41 |
</div>
|
42 |
|
43 |
<!-- Textarea -->
|
44 |
<div class="form-group"> |
45 |
<label class="col-md-4 control-label" for="txtPost">Post</label> |
46 |
<div class="col-md-4"> |
47 |
<textarea class="form-control" id="txtPost" name="txtPost"></textarea> |
48 |
</div>
|
49 |
</div>
|
50 |
|
51 |
<!-- Button -->
|
52 |
<div class="form-group"> |
53 |
<label class="col-md-4 control-label" for="singlebutton"></label> |
54 |
<div class="col-md-4"> |
55 |
<input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" /> |
56 |
</div>
|
57 |
</div>
|
58 |
|
59 |
</fieldset>
|
60 |
</form>
|
61 |
|
62 |
|
63 |
</div>
|
64 |
<!-- /.container -->
|
65 |
|
66 |
<div class="blog-footer"> |
67 |
<p>AngularJS & Firebase Blog App</p> |
68 |
|
69 |
</div>
|
70 |
|
71 |
|
72 |
|
73 |
</body>
|
74 |
|
75 |
</html>
|
Dentro de addPost.js, definiremos las rutas para la vista Agregar Publicación. $routeProvider tiene un método llamado when, el cual usaremos para crear una ruta para nuestra vista addPost. Estableceremos un templateUrl el cual será reproducido en la index.html. Tambien estableceremos un controller (es la lógica que controla una vista) para el recién creado $scope de la vista addPost. Así es como addPost.js finalmente se ve:
1 |
'use strict'; |
2 |
|
3 |
angular.module('myApp.addPost', ['ngRoute']) |
4 |
|
5 |
.config(['$routeProvider', function($routeProvider) { |
6 |
$routeProvider.when('/addPost', { |
7 |
templateUrl: 'addPost/addPost.html', |
8 |
controller: 'AddPostCtrl' |
9 |
});
|
10 |
}])
|
11 |
|
12 |
.controller('AddPostCtrl', ['$scope', function($scope) { |
13 |
|
14 |
}]);
|
Incluye el módulo myApp.addPost en app.js.
1 |
angular.module('myApp', [ |
2 |
'ngRoute', |
3 |
'myApp.home', |
4 |
'myApp.register', |
5 |
'myApp.welcome', |
6 |
'myApp.addPost' // Newly added module |
7 |
])
|
También, agrega una referencia al addPost.js en la página app/index.html.
1 |
<script src="addPost/addPost.js"></script> |
Guarda los cambios, reinicia el servidor y apunta tu buscador a http://localhost:8000/app/#/addPost y deberias ver la página de agregar publicación.
Validando los Campos de Agregar Publicación
Primero, necesitamos agregar una directiva ngModel al cuadro de entrada de texto y al área de texto en la página de agregar publicación para activar el two-way data binding.
1 |
<input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md"> |
2 |
|
3 |
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea> |
Cuando un usuario publica un anuncio en el blog, debería tener un título y un anuncio. Así que agregaremos una validación para revisar si un publicación de blog tiene título y anuncio. Si el título y el anuncio fuero provistos, activaremos el botón de publicar y el usuario puede realizar su publicación en el blog. Usaremos una directiva ngDisabled para desactivar el botón de publicar. Agrega la directiva ngDisabled al botón de publicar como se muestra a continuación.
1 |
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" /> |
Como se muestra en el código anterior, ngDisabled desactivará el botón de publicar cuando no se provea el título o el anuncio del artículo.
Implementando la Funcionalidad Agregar Publicación
Luego, guardaremos el título y el anuncio del artículo en Firebase cuando el usuario haga click en el botón publicar. En efecto para guardar los datos en Firebase, usaremos la API $push.
Agrega la directiva ngController al cuerpo de addPost.html y además agrega la directiva ngSubmit al formulario en addPost.html.
1 |
<body ng-controller="AddPostCtrl"> |
1 |
<form class="form-horizontal" ng-submit="AddPost()"> |
Abre addPost.js y agrega una nueva función llamada AddPost dentro del controlador AddPostCtrl como se muestra a continuación:
1 |
.controller('AddPostCtrl', ['$scope', function($scope) { |
2 |
$scope.AddPost = function() { |
3 |
|
4 |
// Add Post logic will be here
|
5 |
|
6 |
}
|
7 |
}]);
|
Necesitaremos $firebase para meter los datos a Firebase Db, asi que inyecta el módulo $firebase en el controlador AddPostCtrl.
1 |
.controller('AddPostCtrl', ['$scope','$firebase',function($scope,$firebase) { |
Crear un objeto Firebase usando tu URL Firebase.
1 |
var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com"); |
Usando firebaseObj crearemos una instancia de $firebase con la cual meteremos datos en Firebase.
1 |
var fb = $firebase(firebaseObj); |
Leer el título y el anuncio hecho por el usuario usando $scope.
1 |
var title = $scope.article.title; |
2 |
var post = $scope.article.post; |
Dado que tenemos el título y el anuncio, llamaremos a la API de inyección de Firebase a que guarde los datos en Firebase.
1 |
fb.$push({ |
2 |
title: title, |
3 |
post: post |
4 |
}).then(function(ref) { |
5 |
console.log(ref); |
6 |
}, function(error) { |
7 |
console.log("Error:", error); |
8 |
});
|
Ahora, guarda todos los cambios, reinicia el servidor, e intenta agregar un nueva postulación en el blog. Una vez que hayas hecho click en el botón publicar, revisar la consola del navegador para el objeto de referencia. Luego de eso, ingresa en tu cuenta de Firebase y deberías poder ver los datos.
Finalizando
En esta parte de la serie, creamos una interfaz para agregar o publicar entradas en un blog. En la siguiente parte de esta serie, crearemos una interfaz para cargar y mostrar todas las publicaciones agregadas por usuarios.
El código fuente de este tutorial está disponible en GitHub. Dinos que piensas en los comentarios!
