() translation by (you can also view the original English article)
No tutorial anterior, nós implementamos a funcionalidade de registro e também vimos como usar os AngularJS services para compartilhar dados entre controllers. Nesta parte da série de tutoriais, criaremos uma interface para o usuário logado criar um post do blog.
Iniciando
Vamos começar clonando a terceira parte do tutorial, disponível no GitHub.
1 |
git clone https://github.com/jay3dec/AngularJS_Firebase_Part3.git |
Depois de clonar o código fonte, navegue até o diretório do projeto e instale as dependências requisitadas.
1 |
cd AngularJS_Firebase_Part3 |
2 |
npm install |
Assim que estiverem instaladas, inicie o servidor.
1 |
npm start |
Aponte seu navegador para http://localhost:8000/app/#/home e você deverá ver o aplicativo em execução.
Criando uma página para adicionar um post
Necessitamos de uma página para que o usuário possa criar e publicar os posts do blog. Vamos adicionar os modelos requisitados e os arquivos para criar a página Adicionar Post.
Navegue até o diretório AngularJS_Firebase_Part3/app e crie uma pasta chamada addPost. Dentro de addPost, crie um arquivo HTML chamado addPost.html e outro, chamado addPost.js. No arquivo addPost.html, adicione o seguinte 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, iremos definir as rotas para a visão Add Post. $routeProvider tem um método chamado when, que usaremos para criar uma rota para nossa visão addPost. Iremos definir uma templateUrl que será renderizada no arquivo index.html. Vamos também definir um controller (lógica que controla uma visão) para o recém-criado $scope da visão addPost. Aqui está como o arquivo addPost.js finalmente deve ficar:
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 |
}]);
|
Inclua o módulo myApp.addPost no arquivo app.js.
1 |
angular.module('myApp', [ |
2 |
'ngRoute', |
3 |
'myApp.home', |
4 |
'myApp.register', |
5 |
'myApp.welcome', |
6 |
'myApp.addPost' // Newly added module |
7 |
])
|
Adicione também, uma referência ao arquivo addPost.js na página app/index.html.
1 |
<script src="addPost/addPost.js"></script> |
Salve as alterações, reinicie o servidor e aponte seu navegador para http://localhost:8000/app/#/addPost e você deverá estar pronto a ver a página para adicionar um post.
Validando os campos de Adicionar Post
Em primeiro lugar, precisamos adicionar uma diretiva ngModel aos campos textbox e textarea na página de postagem, para habilitar o 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> |
Quando um usuário publica um post no blog, ele deve ter um título e um texto. Então, vamos adicionar uma validação para verificar se um post no blog tem um título e um texto. Se o título e o texto forem fornecidos, iremos habilitar o botão de publicação e o usuário poderá publicar sua postagem. Usaremos uma diretiva ngDisabled para desabilitar o botão de publicação. Adicione a diretiva ngDisabled ao botão de publicação como exibido.
1 |
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" /> |
Como visto no código acima, ngDisabled desabilitaria o botão de publicação quando o título ou o texto do arquivo não estivesse disponível.
Implementando a funcionalidade para adicionar um post
A seguir, iremos salvar o título e o texto do arquivo no Firebase quando o usuário clicar no botão de publicação. Para salvar os dados no Firebase, iremos usar a API $push.
Adicione a diretiva ngController ao corpo do arquivo addPost.html e também a diretiva ngSubmit ao formulário, no addPost.html.
1 |
<body ng-controller="AddPostCtrl"> |
1 |
<form class="form-horizontal" ng-submit="AddPost()"> |
Abra o arquivo addPost.js e adicione uma nova função chamada AddPost, dentro do controller AddPostCtrl, como exibido:
1 |
.controller('AddPostCtrl', ['$scope', function($scope) { |
2 |
$scope.AddPost = function() { |
3 |
|
4 |
// Add Post logic will be here
|
5 |
|
6 |
}
|
7 |
}]);
|
Nós vamos precisar de $firebase para mover os dados para o BD do Firebase. Para isso, injete o módulo $firebase no controller AddPostCtrl.
1 |
.controller('AddPostCtrl', ['$scope','$firebase',function($scope,$firebase) { |
Crie um objeto Firebase usando sua URL do Firebase.
1 |
var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com"); |
Utilizando firebaseObj vamos criar uma instância de $firebase que iremos usar para mover os dados para o Firebase.
1 |
var fb = $firebase(firebaseObj); |
Leia o título e o texto digitado pelo usuário utilizando $scope.
1 |
var title = $scope.article.title; |
2 |
var post = $scope.article.post; |
Assim que tivermos o título e o texto, iremos chamar a API push, para salvar os dados no 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 |
});
|
Agora, salve as alterações, reinicie o servidor e tente adicionar um novo post ao blog. Assim que você clicar no botão de publicação, verifique o console do navegador para ver os objetos referenciados. Depois disso, acesse sua conta do Firebase e você poderá ver os dados.
Concluindo
Nesta parte da série, nós criamos uma interface para adicionar ou publicar os posts do blog. Na próxima parte iremos criar uma interface para buscar e exibir todos os posts adicionados pelos usuários.
O código fonte deste tutorial está disponível no GitHub. Deixe suas considerações nos comentários abaixo.
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
